圖文列表 · APP模塊

- [TOC] # 圖文列表一 ![](https://box.kancloud.cn/2016-08-25_57be8e311b30f.png) 說明：導師咨詢類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> ``` # 圖文列表二 ![](https://box.kancloud.cn/2016-08-25_57be8e3137695.png) ``` <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> ``` # 圖文列表三 ![](https://box.kancloud.cn/2016-08-25_57beacf155d1d.png) 代碼如下： ``` <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> ``` # 圖文列表四 ![](https://box.kancloud.cn/2016-08-25_57beba4f7833b.png) 相關代碼如下： ``` <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> ``` # 圖文列表五 ![](https://box.kancloud.cn/2016-08-25_57beba4f9f0e1.png) 相關代碼如下： ``` <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> ``` # 圖文列表六 ![](https://box.kancloud.cn/2016-08-25_57beba4fb7f71.png) ``` <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> ```