这个帖子是关于做一个卡片的，带有头像，图片，文字和功能按键的；
效果图：
而我电脑的效果图是这样的：
源码：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1",maximum-scale=1,user-scalable=no,width=device-width>
<title>菜鸟教程</title>
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
</head>
<body>
<div class="bar bar-header">
<div class="h1 title">卡片</div>
</div>
<div class="content has-header">
<div class="list card">
<div class="item item-avatar">
<img src="http://www.runoob.com/try/demo_source/mcfly.jpg">
<h2>Jack Sparrow</h2>
<p>November 05,2117</p>
</div>
<div class="item item-body">
<img class="full-image" style="height:20%;width:100%" src="http://www.runoob.com/try/demo_source/delorean.jpg">
<p>
白日依山尽，<br>
黄河入海流；<br>
欲穷千里目，<br>
更上一层楼。
</p>
<a href="#" class="subdued">1 喜欢</a>
<a href="#" class="subdued">5 评论</a>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></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>
</body>
</html>
注意：
1.这里用了一个bar-header开头，item-avatar一个头像装饰；图片引用基本和普通的引用没有什么区别；
2.item-avatar如果去掉就会：
对比下之前的：
还是很好的；
742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
