- [TOC] # 图文列表一  说明：导师咨询类APP。 源代码如下： ``` <style type="text/css"> img.aui-img-object {border-radius: 50%;} .laud {font-size: 14px;color: #999;} p {margin: 5px 0 !important;display: table;} .helper-tag {color: #666666;font-size: 12px;} </style> <section class="aui-content"> <ul class="aui-list-view"> <li class="aui-list-view-cell aui-img" tapmode onclick="openHelperShow(1)"> <img class="aui-img-object aui-pull-left" src="image/demo.png"> <div class="aui-img-body"> 流浪男 <div class="aui-pull-right laud"> <i class="aui-iconfont aui-icon-likefill"></i> 33 </div> <p class="helper-tag aui-text-warning"> AUI </p> <p class='aui-ellipsis-2'> 无论是大型企业还是初创企业甚至一个尚未启动的事业，如何进行品牌定位和设计，如何确定自己产品的品牌特性（Brand Identity），营销团队如何从0到1建立，传播和市场营销活动的设计策划逻辑是什么，企业在不同阶段应该选择什么样的传播策略，什么样的营销行动，有效性如何考量？ </p> </div> </li> </ul> </section> ``` # 图文列表二  ``` <style> .aui-content {background: #ffffff;overflow: hidden;} .aui-ask-header {width: 100%;padding: 10px 15px;color: #999;font-size: 14px;overflow: hidden;line-height: 32px;} .ask-avatar {float: left;width: 32px;height: 32px;border-radius: 50%;} .ask-nickname {float: left;font-size: 14px;line-height: 32px;margin-left: 10px;} .ask-time {font-size: 12px;} .aui-ask-body {width: 100%;padding: 10px 15px;} .aui-ask-title {font-size: 16px;color: #333;margin-bottom: 5px;} .aui-ask-footer {padding: 0 15px 15px 15px;overflow: hidden;line-height: 20px;} .aui-ask-footer, .comment {font-size: 12px;color: #999;} </style> <div class="aui-content" tapmode onclick=""> <div class="aui-ask-header"> <img src="image/demo.png" class="ask-avatar"/> <div class="aui-text-info ask-nickname">流浪男</div> <span class="aui-pull-right ask-time">今天 8:50</span> </div> <div class="aui-line-x"></div> <div class="aui-ask-body"> <div class="aui-ask-title aui-ellipsis-1">没有基础怎么开始系统地学习PPT开始系统地学习PPT?</div> <p class='aui-ellipsis-2'>学习ppt制作主要是2个方面:1.基础的制作技巧,比如如何插入动画,调整文字格式等,这方面市场上任意一本PPT学习ppt制作主要是2个方面</p> </div> <div class="aui-ask-footer"> <span class="aui-pull-left aui-text-warning"> <i class="aui-iconfont aui-icon-rechargefill"></i> <strong>88.88</strong>元 </span> <span class="aui-pull-right comment"> <i class="aui-iconfont aui-icon-commentfill"></i> 99 </span> </div> </div> ``` # 图文列表三  代码如下： ``` <div class="aui-content"> <ul class="aui-user-view"> <li class="aui-user-view-cell aui-img"> <img class="aui-img-object aui-pull-left" src="image/demo.png"> <div class="aui-img-body aui-arrow-right"> <span>流浪男</span> <p class='aui-ellipsis-1'>预约时间：2015年10月20日</p> </div> </li> <li class="aui-user-view-cell aui-img"> <img class="aui-img-object aui-pull-left" src="image/demo.png"> <div class="aui-img-body aui-arrow-right"> <span>张三</span> <p class='aui-ellipsis-1'>预约时间：2015年10月20日</p> </div> </li> </ul> </div> ``` # 图文列表四  相关代码如下： ``` <div class="aui-content-padded"> <ul> <li class="aui-list-view"> <div class="aui-col-xs-12 aui-padded-5">［花粉随拍］恬静的小溪</div> <div class="aui-col-xs-12 image"> <img src="../../../image/demo.png"> </div> <div class="aui-col-xs-12 aui-ellipsis-2 aui-padded-5 content"> 等到风景都看透，也许、你、会陪着我看细水长流倾听消息浅唱、丝绸般透着亮，泛着光。淡定从容，从大石两侧穿过 </div> <p class="aui-padded-5"> <span class="aui-pull-left">流浪男 2015/7/16 20:00</span> <span class="aui-pull-right">118</span> </p> </li> </ul> </div> ``` # 图文列表五  相关代码如下： ``` <div class="aui-content"> <ul class="aui-list-view"> <li class="aui-list-view-cell aui-img"> <img class="aui-img-object aui-pull-left" src="../../../image/demo.png"> <div class="aui-img-body"> <div class="aui-ellipsis-1">头条信息标题头条信息标题头条信息标题头条信息标题</div> <p class='aui-ellipsis-2'>头条信息描述头条信息描述头条信息描述头条信息描述头条信息描述</p> </div> <div class="aui-col-xs-12 aui-clearfix other-info"> <div class="aui-line-x"></div> <p>888条评论 10分钟前</p> </div> </li> </ul> </div> ``` # 图文列表六  ``` <div class="aui-content"> <ul class="aui-list-view"> <li class="aui-list-view-cell aui-img"> <div class="aui-img-body"> <div class="aui-ellipsis-1">头条信息标题头条信息标题头条信息标题头条信息标题</div> <p class='aui-ellipsis-2'>头条信息描述头条信息描述头条信息描述头条信息描述头条信息描述</p> </div> <div class="aui-col-xs-12 aui-clearfix image-list"> <div class="aui-col-xs-4"> <img src="../../../image/demo.png"> </div> <div class="aui-col-xs-4"> <img src="../../../image/demo.png"> </div> <div class="aui-col-xs-4"> <img src="../../../image/demo.png"> </div> </div> <div class="aui-col-xs-12 aui-clearfix other-info"> <div class="aui-line-x"></div> <p>888条评论 10分钟前</p> </div> </li> </ul> </div> ```