从列表样式开始，可以说是进入到了一个小高潮。任何一个app都会有列表类的布局，使用AUI基本可以满足大多数开发者的需求。AUI提供的默认布局样式有普通列表，图文列表，图片列表，类似通讯录效果，开发者可以结合栅格系统来布局出更丰富的样式。<Br />
学习这块，单凭看是没有多大效果的，建议大家多练习一下。
`.aui-list-view` 普通列表类的布局容器，`.aui-list-view-cell`列表项<Br/>
在`.aui-content`中结合`.aui-card`可以实现带有圆角效果的布局样式<Br />
对`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>
~~~
