开始使用 布局容器和栅格系统 文字样式 背景颜色 按钮 标签、角标、红点 图标 单选、多选、开关 进度条 顶部导航 底部工具栏 底部工具栏扩展 表单 列表 卡片列表 宫格布局 弹性布局 时间轴 聊天气泡 信息条 提示条 仿微信首页 仿微信朋友圈 仿今日头条 仿知乎首页 仿淘宝首页 会员中心首页一 会员中心首页二 订单列表首页 弹窗 Dialog 弹窗 Toast 弹出菜单 底部弹出框 底部分享盒子 下拉刷新 轮播组件 滚动监听 按钮组工具栏 搜索条 滑块 Tab切换栏 折叠面板 图片懒加载 自定义主题样式 列表左滑删除

仿今日头条

新闻、文章列表。

示例源码

<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>