W3.CSS 牌

约翰

建筑师和工程师

标头

一些文字.. Lorem ipsum dolor sat amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.

W3.CSS 卡类

W3.CSS 提供了以下类来显示纸质卡片：

类	定义
w3卡	与 w3-card-2 相同
w3-卡-2	任何 HTML 内容的容器（2px 带边框的阴影）
w3-卡-4	任何 HTML 内容的容器（4px 带边框的阴影）

彩色卡

要显示彩色卡片，只需添加w3-颜色类：

w3卡

w3-卡-2

w3-卡-4

示例（白卡）

亲自试一试»

示例（黄牌）

亲自试一试»

卡片内容

标头

在卡片内添加容器以创建不同的部分：

示例

<div class="w3-card-4">

<header class="w3-container w3-blue">
<h1>Header</h1>
</header>

<div class="w3-container">
<p>Lorem ipsum...</p>
</div>

<footer class="w3-container w3-blue">
<h5>Footer</h5>
</footer>

</div>

亲自试一试»

照片卡

意大利/奥地利阿尔卑斯山

示例

<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>The Italian / Austrian Alps</p>
</div>
</div>

亲自试一试»

悬停效果

这个w3-悬停阴影类在悬停时添加阴影效果 - 这将使任何元素在鼠标悬停时看起来像卡片（与 w3-card-4 样式相同）。

悬停在我身上！

示例

<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over me!</p>
</div>

亲自试一试»

更多示例

好友请求

约翰·多伊

示例

<div class="w3-card-4 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-button w3-green">Accept</button>
<button class="w3-button 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-button w3-block w3-dark-grey">+ Connect</button>

</div>

亲自试一试»

天气小工具

伦敦 60°F

周一

治疗费用

星期三

示例

<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">LONDON 60° F</div>
</div>
<div class="w3-row">
    <div class="w3-third w3-center">
      <h3>MON</h3>
      <img src="img_weather_sun.jpg" alt="sun">
    </div>
    <div class="w3-third w3-center">
      <h3>TUE</h3>
      <img src="img_weather_cloud.jpg" alt="cloud">
    </div>
    <div class="w3-third w3-center w3-margin-bottom">
      <h3>WED</h3>
      <img src="img_weather_clouds.jpg" alt="clouds">
    </div>
</div>
</div>

亲自试一试»