從列表樣式開始，可以說是進入到了一個小高潮。任何一個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>
~~~
