.item : 嵌入缩略图回到今日头条的新闻列表，我们给它加上两张新闻图片： 
在ionic中，缩略图被定义为80px大小，比头像大，适合新闻图片。 和插入头像类似，向.item中插入缩略图需要满足两个条件： 在.item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧， 分别使用.item-thumbnail-left和.item-thumbnail-right声明 在.item元素内使用img标签插入头像。
注意：将img标签放到.item内容的开头！
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
<div class="bar bar-header bar-assertive">
<h1 class="title">今日头条 <i class="icon ion-load-c"></i></h1>
<a class="button button-clear icon ion-person-stalker"></a>
</div>
<div class="scroll-content has-header">
<ul class="list">
<li class="item">
<h2>国务院常务会议部署推进公司注册资本登记制度改革</h2>
<p>中国青年报</p>
</li>
<li class="item item-thumbnail-right">
<img src="img/g-1.jpg">
<h2>大黄鸭在北京两个月创收超两亿元 今日离京</h2>
<p>中国经营报</p>
</li>
<li class="item">
<h2>LinkedIn创始人：在见风投之前，我希望自己当时懂得这七件事...</h2>
<p>虎嗅网</p>
</li>
<li class="item item-thumbnail-right">
<img src="img/g-12.jpg">
<h2>美国男子为防妻分家产 将价值50万美元黄金扔垃圾桶</h2>
<p>新浪新闻</p>
</li>
</ul>
</div>
</body>
</html>
|