显示卡
约翰
建筑师和工程师
| 类 | 定义 |
|---|---|
| W3卡 | 集装箱任何HTML内容（有边框） |
| W3-卡2 | 集装箱任何HTML内容（2px的边框阴影） |
| W3卡-4 | 集装箱任何HTML内容（4PX边框阴影） |
| W3卡-8 | 集装箱任何HTML内容（8像素边框阴影） |
| W3-卡12 | 集装箱任何HTML内容（12px的边框阴影） |
| W3-卡16 | 集装箱任何HTML内容（16px的边框阴影） |
| W3-卡24 | 集装箱任何HTML内容（24像素接壤的影子） |
色卡
与W3卡类创建纸质样卡，并使用W3色类添加颜色：
W3-卡2
W3卡-4
W3卡-8
照片卡
巨魔的哈当厄尔，挪威舌头
例
<div class="w3-card-12">
<img src="img_fjords.jpg"
alt="Norway">
<div class="w3-container w3-center">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div> 试一试» 卡片内容
头
有些文字.. Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麦格纳aliqua。 UT enim广告微量veniam，QUIS nostrud实习ullamco laboris暂准UT aliquip前EA commodo consequat。
例
<div class="w3-card-4">
<header class="w3-container
w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
<button
class="w3-btn">Button</button>
</div>
<footer class="w3-container
w3-blue">
<h5>Footer</h5>
</footer>
</div> 试一试» 悬停效果
W3的悬停阴影类添加悬停阴影效果-这会让任何元素看起来像鼠标悬停（相同的样式W3卡-4）的记忆卡。
将鼠标悬停在我！
更多示例
好友请求
李四
例
<div class="w3-card-8 w3-dark-grey">
<div class="w3-container
w3-center">
<h3>Friend request</h3>
<img src="img_avatar3.png"
alt="Avatar" style="width:80%">
<h5>John
Doe</h5>
<button class="w3-btn w3-green">Accept</button>
<button class="w3-btn w3-red">Decline</button>
</div>
</div> 试一试» 李四
1个新的好友请求
首席执行官强大学校。 市场营销和广告。 寻找新的工作和新的机遇。
例
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div
class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>President/CEO at Mighty Schools...</p>
</div>
<button class="w3-btn-block
w3-dark-grey">+ Connect</button>
</div> 试一试»