W3.CSS Cards (卡片)

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

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