简介

学完列表，再来看看卡片有什么玄妙之处吧，有一点很明显，他和列表一样是要用item类

为了封面好看，先贴最后效果，就是这么耿直

卡片(card)默认样式带有box-shadow(阴影)，我们来看一下

<div class="bar bar-header">
      <div class="h1 title">卡片</div>
    </div>
    <div class="content has-header">
      <div class="card">
        <div class="item item-divider">
         卡片头部！
        </div>
        <div class="item item-text-wrap">
          基本卡片，包含了文本信息。
        </div>
        <div class="item item-divider">
          卡片底部！
        </div>
      </div>
   </div>

下面这一招叫卡片列表，写起来和列表没什么区别，随便看看吧

<div class="content has-header ionic-pseudo">
  <div class="list card">
    <a href="#" class="item item-icon-left">
      <i class="icon ion-home"></i>
      Enter home address
    </a>
    <a href="#" class="item item-icon-left">
      <i class="icon ion-ios-telephone"></i>
      Enter phone number
    </a>
    <a href="#" class="item item-icon-left">
      <i class="icon ion-wifi"></i>
      Enter wireless password
    </a>
    <a href="#" class="item item-icon-left">
      <i class="icon ion-card"></i>
      Enter card information
    </a>
  </div>
</div>

接下来慢慢的比上面的好看起来了，为什么呢，因为开始插入图片啦，不过电脑就这一张照片素材，再找怪麻烦的，将就着看看吧

<div class="content has-header ionic-pseudo">

  <div class="list card">

    <div class="item item-avatar">
      <img src="111.png">
       <h2>天下行走</h2>
       <p>浮生如梦，为欢几何，且乐今朝</p>
    </div>

    <div class="item item-image">
      <img src="111.png">
    </div>

    <a class="item item-icon-left assertive" href="#">
      <i class="icon ion-music-note"></i>
      Start listening
    </a>

  </div>

</div>

说了不找图，结果还是屁颠屁颠的翻出了一张

<div class="content has-header">
  <div class="list card">
    <div class="item item-avatar">
      <img src="111.png">
      <h2>邪人君子</h2>
      <p>潇潇这一场雨落人间惆怅</p>
    </div>

    <div class="item item-body">
      <img class="full-image" style="height:30%; width:100%" src="112.jpg">
      <p>
        侧径篮舁两眼明，出山犹带骨毛清。<br>白云笑我还多事，流水随人合有情。<br>
        不及鸟飞浑自在，羡他僧住便平生。<br>未能与世全无意，起为苍生试一鸣。
      </p>
      <p>
        <a href="#" class="subdued">13 喜欢</a>
        <a href="#" class="subdued">5 评论</a>
      </p>
    </div>

    <div class="item tabs tabs-secondary tabs-icon-left">
      <a class="tab-item" href="#">
        <i class="icon ion-thumbsup" style="color:red"></i>
        喜欢
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-chatbox"></i>
        评论
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-share"></i>
        分享
      </a>
    </div>
  </div>
</div>

  全文GG