W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 卡片



显示卡片

Avatar

John

Architect and engineer


Header

Some text.. 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.



Footer

定义
w3-card 任何HTML内容的容器(带边框)
w3-card-2 任何HTML内容的容器(2px边框阴影)
w3-card-4 任何HTML内容的容器(4px边框阴影)
w3-card-8 任何HTML内容的容器(8px边框阴影)
w3-card-12 任何HTML内容的容器(12px边框阴影)
w3-card-16 任何HTML内容的容器(16px边框阴影)
w3-card-24 任何HTML内容的容器(24px边框阴影)

彩色卡片

使用 w3-card 类创建类似纸张的卡片,并使用 w3-color 类添加颜色:

w3-card-2

w3-card-4

w3-card-8

Example (黄色卡片)

<div class="w3-card w3-yellow">
  <p>w3-card</p>
</div>
尝试一下 »

Example (白色卡片)

<div class="w3-card">
  <p>w3-card</p>
</div>
尝试一下 »

照片卡片

Trolltunga

The Troll's tongue in Hardanger, Norway


Example

<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>
尝试一下 »

卡片内容

Header

Some text.. 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.



Footer

Example

<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-hover-shadow 类可在悬停上添加阴影效果 - 这将使任何元素看起来像鼠标悬停的卡片(等同于w3-card-4样式)。

Hover over me!

Example

<div class="w3-green w3-hover-shadow w3-center">
  <p>Hover over me!</p>
</div>
尝试一下 »

更多实例

Friend Request

Avatar

John Doe




Example

<div class="w3-card-8 w3-dark-grey">

<div class="w3-container w3-center">
  <h3>Friend request</h3>
  <img src="http://cdn.w3schools.wang/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>
尝试一下 »

John Doe

1 new friend request


Avatar

CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.


Example

<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>
尝试一下 »