W3.CSS Cards (卡片)
W3.CSS提供了以下用于显示纸质卡的类：
| 类 | 定义 |
|---|---|
| w3-card
|
与 w3-card-2 相同 |
| w3-card-2 | 任何 HTM L内容的容器（2px带阴影的阴影） |
| w3-card-4
|
任何 HTML 内容的容器（4px带边框的阴影） |
彩色卡片
要显示彩色卡片，只需添加 w3-color 类：
卡内容
在卡内添加容器以创建不同的部分：
实例
<div class="w3-card-4">
<header class="w3-container w3-blue">
<h1>标头</h1>
</header>
<div class="w3-container">
<p>一些文字.. </p>
</div>
<footer class="w3-container w3-blue">
<h5>页脚</h5>
</footer>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
相片卡
实例
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="阿尔卑斯山">
<div class="w3-container w3-center">
<p>意大利/奥地利阿尔卑斯山</p>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
悬停效果
在 w3-hover-shadow 类添加悬停阴影效果-这会让任何元素看起来像鼠标悬停（相同的样式 w3-card-4）的卡片。
实例
<p>将鼠标悬停在我身上！</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
更多例子
实例
<div class="w3-card-4 w3-dark-grey">
<div class="w3-container w3-center">
<h3>好友请求</h3>
<img src="img_avatar3.png" alt="Avatar" style="width:80%">
<h5>John Doe</h5>
<button class="w3-button w3-green">接受</button>
<button class="w3-button w3-red">拒绝</button>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>约翰·杜</h3>
</header>
<div class="w3-container">
<p>1个新朋友请求</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>Mighty Schools的首席执行官。市场营销和广告学学者。寻求新工作和新机会。</p>
</div>
<button class="w3-button w3-block w3-dark-grey">+ 连接</button>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<div class="w3-card-4">
<div class="w3-display-container w3-text-white">
<img src="img_london.jpg" alt="Lights" style="width:100%">
<div class="w3-xlarge w3-display-bottomleft w3-padding">伦敦60°华氏度</div>
</div>
<div class="w3-row">
<div class="w3-third w3-center">
<h3>周一</h3>
<img src="img_weather_sun.jpg" alt="sun">
</div>
<div class="w3-third w3-center">
<h3>周二</h3>
<img src="img_weather_cloud.jpg" alt="cloud">
</div>
<div class="w3-third w3-center w3-margin-bottom">
<h3>周三</h3>
<img src="img_weather_clouds.jpg" alt="clouds">
</div>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例