菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS 卡片


Avatar

John

建筑师和工程师


Header

一些文本.. 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.

页脚

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

一些文本.. 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>
自己试试 »

照片卡片

Alps

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

示例

<div class="w3-card-4">
  <img src="img_snowtops.jpg" alt="Alps">
  <div class="w3-container w3-center">
    <p>意大利/奥地利阿尔卑斯山</p>
  </div>
</div>
自己试试 »

悬停效果

w3-hover-shadow 类会在悬停时添加阴影效果——这会让任何元素在鼠标悬停时看起来都像卡片(与 w3-card-4 风格相同)。

将鼠标悬停在我身上!

示例

<div class="w3-green w3-hover-shadow w3-center">
  <p>悬停在我上面!</p>
</div>
自己试试 »

更多示例

好友请求

Avatar

John Doe




示例

<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>
自己试试 »

John Doe

1 条新好友请求


Avatar

Mighty Schools 首席执行官。市场营销和广告。寻求新工作和新机会。


示例

<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="Avatar" class="w3-left w3-circle">
  <p>Mighty Schools 总裁/首席执行官...</p>
</div>

<button class="w3-button w3-block w3-dark-grey">+ 连接</button>

</div>
自己试试 »

天气小部件

Lights
伦敦 60° F

周一

sun

周二

sun cloud

周三

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>周一</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>
自己试试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持