仿今日头条
新闻、文章列表。
示例源码
<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>