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

示例(白卡片)

<div class="w3-card">
  <p>w3-card</p>
</div>
亲自试一试 »

示例(黄卡片)

<div class="w3-card w3-yellow">
  <p>w3-card</p>
</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

在卡片中添加容器以创建不同的部分:

实例

<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>
亲自试一试 »

照片卡片

Alps

The Italian / Austrian Alps

实例

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

Hover over me!

实例

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

更多实例

Friend Request

Avatar

John Doe




实例

<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>
亲自试一试 »

John Doe

1 new friend request


Avatar

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


实例

<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>
亲自试一试 »

Weather 天气插件

Lights
LONDON 60° F

MON

sun

TUE

sun cloud

WED

cloud

实例

<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&deg; 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>
亲自试一试 »