W3.CSS Cards (卡片)

2020-11-30 10:57 更新

W3.CSS提供了以下用于显示纸质卡的类:

定义
w3-card
与 w3-card-2 相同
w3-card-2 任何 HTM L内容的容器(2px带阴影的阴影)
w3-card-4
任何 HTML 内容的容器(4px带边框的阴影)

彩色卡片

要显示彩色卡片,只需添加 w3-color 类:

实例(白卡)

<div class="w3-card">

  <p>w3-card</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例(黄卡)

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

  <p>w3-card</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

卡内容

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

实例

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

<header class="w3-container w3-blue">

  <h1>标头</h1>

</header>

<div class="w3-container">

  <p>一些文字.. </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)的卡片。

实例

<div class="w3-green w3-hover-shadow w3-center">
  <p>将鼠标悬停在我身上!</p>
</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

更多例子

实例

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


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

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

<header class="w3-container w3-light-grey">

  <h3>约翰·杜</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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

<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">伦敦60°华氏度</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>


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号