仿今日头条
新闻、文章列表。
示例源码
<style>
.aui-list .aui-list-item-media {
width: 6rem;
}
</style>
<div class="aui-content">
<ul class="aui-list aui-media-list">
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-18">谁在用苹果手机？赶紧看，央视已报道</div>
</div>
<div class="aui-info aui-padded-b-0">
<div class="aui-info-item aui-font-size-12">
<img src="/static/auicss/img/liulangnan.png" style="width:1rem" class="aui-img-round" /><span class="aui-margin-l-5">AUI</span>
</div>
<div class="aui-info-item aui-font-size-12">2015-07-14 10:31</div>
</div>
</div>
<div class="aui-list-item-media">
<img src="/static/auicss/img/demo/1.jpeg">
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-18">网吧电脑看到它 你的游戏账号网银就丢了一般了</div>
</div>
<div class="aui-info aui-padded-b-0">
<div class="aui-info-item aui-font-size-12">
<img src="/static/auicss/img/demo2.png" style="width:1rem" class="aui-img-round" /><span class="aui-margin-l-5">今日头条</span>
</div>
<div class="aui-info-item aui-font-size-12">2015-07-14 10:31</div>
</div>
</div>
<div class="aui-list-item-media">
<img src="/static/auicss/img/demo/2.jpeg">
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-18">QQ音乐与酷狗酷我在一起了！三个品牌继续独立发展</div>
</div>
<div class="aui-info aui-padded-b-0">
<div class="aui-info-item aui-font-size-12">
<img src="/static/auicss/img/demo1.png" style="width:1rem" class="aui-img-round" />
<span class="aui-margin-l-5">中关村在线</span>
<span class="aui-margin-l-5">26条评论</span>
<span class="aui-label aui-label-danger aui-label-outlined aui-margin-l-5">热</span>
</div>
</div>
</div>
<div class="aui-list-item-media">
<img src="/static/auicss/img/demo/3.jpeg">
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-font-size-18">小米手机的质量到底有多差？</div>
<div class="aui-list-item-text">
<p class="aui-ellipsis-2">我买了小米手机五台，还有三台小米平板第一台是跟前女友一起买的小米 2s，用了三年，到现在没出现卡顿，后来给妈妈买了一台红米1s，老妈到现在还在用着，我因为工作需要要用电信联通两张卡</p>
</div>
</div>
</div>
<div class="aui-info">
<div class="aui-info-item aui-font-size-12">
<img src="/static/auicss/img/demo1.png" style="width:1rem" class="aui-img-round" />
<span class="aui-margin-l-5">中关村在线</span>
</div>
<div class="aui-info-item aui-font-size-12">26条评论</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title aui-font-size-18">中国拥有世界顶级航天芯片产品：俄罗斯造不出来了只能求中国分享</div>
<p class="aui-ellipsis-2">如果谈及中国在技术领域的短板，那么大家可能想到的是发动机，其实还有一样：高级电子芯片！人们通常所说的CPU，所谓CPU即中央处理器，就是其代表产品，它可是为电子信息产品的心脏,是集成电路产品的终端级产品。</p>
<div class="aui-row aui-row-padded aui-margin-t-5">
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo/1.jpeg"/>
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo/2.jpeg" />
</div>
<div class="aui-col-xs-4">
<img src="/static/auicss/img/demo/3.jpeg" />
</div>
</div>
</div>
<div class="aui-info aui-padded-t-0 aui-padded-r-15">
<div class="aui-info-item aui-font-size-12">
<img src="/static/auicss/img/demo1.png" style="width:1rem" class="aui-img-round" />
<span class="aui-margin-l-5">中关村在线</span>
</div>
<div class="aui-info-item aui-font-size-12">26条评论</div>
</div>
</li>
</ul>
</div>