一：列表视图
列表区用来以列表的风格来组织元素，级别上与内容区(Content Block)同级，因此不能将list-block包含在content-block中！
<div class="list-block"> <ul> <li> 列表元素。。。 </li> ...... </ul> <div class="list-block-label">List block label text</div> </div>
二：旧版列表视图
旧版列表视图功能比较少，使用 list-block 标签包含列表视图。
从功能上划分，主要有两种列表：简单陈列、链接列表。简单陈列只是用来显示数据，点击列表元素无反应；链接列表中的列表元素则是一个超链接，点击后跳转到元素详情。
从外观上划分，种类就更多了：简单文本型、图标+文本型、图片+文本型......
高阶功能：列表分隔、列表元素分组、列表视图内嵌风格。
1:简单陈列元素
<li class="item-content"> <div class="item-media"> <i class="icon my-icon"></i> </div> <div class="item-inner"> <div class="item-title"> List element title </div> <div class="item-after"> List element label </div> </div> </li>
2:链接列表元素
<li> <a href="#" class="item-link item-content"> <div class="item-media"><i class="icon icon-f7"></i></div> <div class="item-inner"> <div class="item-title">Item title</div> <div class="item-after">Label</div> </div> </a> </li>
3:列表分隔
<li class="item-divider">分隔行标题</li>
4:列表分组（其实就是两个列表）
<!-- 1:第一个分组--> <div class="list-group"> <ul> <li class="list-group-title">分组标题</li> <li class="item-content"> <div class="item-media"><i class="icon icon-f7"></i></div> <div class="item-inner"> <div class="item-title">元素标题</div> <div class="item-after">元素标签</div> </div> </li> <li class="item-content"> <div class="item-media"><i class="icon icon-f7"></i></div> <div class="item-inner"> <div class="item-title">元素标题</div> <div class="item-after"><span class="badge">角标</span></div> </div> </li> ... </ul> </div> <!-- 2:第二个分组--> <div class="list-group"> <ul> <li class="list-group-title">Second Group</li> <li class="item-content"> <div class="item-media"><i class="icon icon-f7"></i></div> <div class="item-inner"> <div class="item-title">Item title</div> <div class="item-after">Label</div> </div> </li> <li class="item-content"> <div class="item-media"><i class="icon icon-f7"></i></div> <div class="item-inner"> <div class="item-title">Item with badge</div> <div class="item-after"><span class="badge">5</span></div> </div> </li> ... </ul> </div>
5:视图内嵌
可以在列表视图的div中增加 inset、tablet-inset类来实现内嵌视图风格。
三：新版列表视图
