[TOC] # 文字列表 ### 样式一：普通文字列表  相关代码如下： ``` <div class="aui-content"> <ul class="aui-list-view"> <li class="aui-list-view-cell"> 单行列表标题效果 </li> <li class="aui-list-view-cell"> 单行列表标题效果 </li> <li class="aui-list-view-cell"> 单行列表标题效果 </li> <li class="aui-list-view-cell"> 单行列表标题效果 </li> <li class="aui-list-view-cell"> 单行列表标题效果 </li> </ul> </div> ``` ### 样式二：文字列表 + 下划线缩进  相关代码如下： ``` <div class="aui-content"> <ul class="aui-list-view aui-in"> <li class="aui-list-view-cell"> 单行列表标题效果 </li> <li class="aui-list-view-cell"> 单行列表标题效果 </li> </ul> </div> ``` ### 样式三：文字列表 + 左侧图标  相关代码如下： ``` <div class="aui-content"> <ul class="aui-list-view aui-in"> <li class="aui-list-view-cell"> <i class="aui-iconfont aui-icon-edit aui-bg-info"></i>单行列表标题效果 </li> <li class="aui-list-view-cell"> <i class="aui-iconfont aui-icon-emoji aui-bg-success"></i>单行列表标题效果 </li> <li class="aui-list-view-cell"> <i class="aui-iconfont aui-icon-favor aui-bg-danger"></i>单行列表标题效果 </li> <li class="aui-list-view-cell"> <i class="aui-iconfont aui-icon-like aui-bg-warning"></i>单行列表标题效果 </li> <li class="aui-list-view-cell"> <i class="aui-iconfont aui-icon-shop aui-bg-success"></i>单行列表标题效果 </li> </ul> </div> ``` ### 样式四：卡片式文字列表  相关代码如下： ``` <div class="aui-content-padded"> <ul class="aui-list-view"> <li class="aui-list-view-cell" data-win="list_arrow"> 卡片式单行列表标题效果 </li> <li class="aui-list-view-cell" data-win="list_thumb"> 卡片式单行列表标题效果 </li> <li class="aui-list-view-cell" data-win="list-image"> 卡片式单行列表标题效果 </li> </ul> </div> ``` ### 样式五：卡片式文字列表 + 边框 + 圆角  相关代码如下： ``` <div class="aui-card"> <ul class="aui-list-view"> <li class="aui-list-view-cell" data-win="list_arrow"> 卡片式单行列表标题效果 </li> <li class="aui-list-view-cell" data-win="list_thumb"> 卡片式单行列表标题效果 </li> <li class="aui-list-view-cell" data-win="list-image"> 卡片式单行列表标题效果 </li> </ul> </div> ``` ### 样式六：卡片式文字列表 + 无边框 + 圆角  相关代码如下： ``` <div class="aui-card aui-noborder"> <ul class="aui-list-view"> <li class="aui-list-view-cell" data-win="list_arrow"> 卡片式单行列表标题效果 </li> <li class="aui-list-view-cell" data-win="list_thumb"> 卡片式单行列表标题效果 </li> <li class="aui-list-view-cell" data-win="list-image"> 卡片式单行列表标题效果 </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 other-info"> <div class="aui-line-x"></div> <p>888条评论 10分钟前</p> </div> </li> </ul> </div> ```