从列表样式开始，可以说是进入到了一个小高潮。任何一个app都会有列表类的布局，使用AUI基本可以满足大多数开发者的需求。AUI提供的默认布局样式有普通列表，图文列表，图片列表，类似通讯录效果，开发者可以结合栅格系统来布局出更丰富的样式。

学习这块，单凭看是没有多大效果的，建议大家多练习一下。

.aui-list-view 普通列表类的布局容器，.aui-list-view-cell列表项

在.aui-content中结合.aui-card可以实现带有圆角效果的布局样式

对li标签都有下划线的处理，并且默认做了15px的缩进，如果想去掉的需要自定义一下(使用了.aui-card效果除外)

.aui-list-view .aui-list-view-cell:after {left: 0;}

      <div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            列表栏目一
        </li>
        ......
    </ul>
</div>
    

      <div class="aui-content aui-card">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            列表栏目一
        </li>
        ......
    </ul>
</div>
    

可以使用.aui-arrow-right给列表项加上右侧的箭头。

      <div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <a class="aui-arrow-right">列表栏目一</a>
        </li>
        ......
    </ul>
</div>
    

使用.aui-badge给列表增加右侧的角标效果，.aui-badge-*来选择使用样式，角标和右侧箭头可以共存，也可以单独使用

      <div class="aui-content">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">
            <a class="aui-arrow-right">
            列表栏目一
            <span class="aui-badge aui-badge-info">12</span>
            </a>
        </li>
        ......
    </ul>
</div>