W3.CSS 卡片
John
建筑师和工程师
W3.CSS 卡片类
W3.CSS 提供以下类用于显示纸质卡片
| 类 | 定义 |
|---|---|
| w3-card | 与 w3-card-2 相同 |
| w3-card-2 | 任何 HTML 内容的容器（2px 边框阴影） |
| w3-card-4 | 任何 HTML 内容的容器（4px 边框阴影） |
彩色卡片
要显示彩色卡片，只需添加 **w3-color** 类
w3-card
w3-card-2
w3-card-4
卡片内容
页眉
一些文本…Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
在卡片中添加容器以创建不同的部分
示例
<div class="w3-card-4">
<header class="w3-container w3-blue">
<h1>页眉</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</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 相同风格）。
将鼠标悬停在我上面！
更多示例
好友请求
John Doe
示例
<div class="w3-card-4 w3-dark-grey">
<div class="w3-container w3-center">
<h3>好友请求</h3>
<img src="img_avatar3.png" alt="头像" style="width:80%">
<h5>John Doe</h5>
<button class="w3-button w3-green">接受</button>
<button class="w3-button w3-red">拒绝</button>
</div>
</div>
尝试一下 »
John Doe
1 个新的好友请求
Mighty Schools 的 CEO。营销和广告。正在寻找新工作和新机会。
示例
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div class="w3-container">
<p>1 个新的好友请求</p>
<hr>
<img src="img_avatar3.png" alt="头像" class="w3-left w3-circle">
<p>Mighty Schools 的总裁/CEO...</p>
</div>
<button class="w3-button w3-block w3-dark-grey">+ 联系</button>
</div>
尝试一下 »
天气小部件
伦敦 60°F
周一
周二
周三
示例
<div class="w3-card-4">
<div class="w3-display-container w3-text-white">
<img src="img_london.jpg" alt="灯光" style="width:100%">
<div class="w3-xlarge w3-display-bottomleft w3-padding">伦敦 60° F</div>
</div>
<div class="w3-row">
<div class="w3-third w3-center">
<h3>周一</h3>
<img src="img_weather_sun.jpg" alt="太阳">
</div>
<div class="w3-third w3-center">
<h3>周二</h3>
<img src="img_weather_cloud.jpg" alt="云">
</div>
<div class="w3-third w3-center w3-margin-bottom">
<h3>周三</h3>
<img src="img_weather_clouds.jpg" alt="云">
</div>
</div>
</div>
尝试一下 »
