ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
 jqMobi中的页面布局不多,目前主要有Styled Lists,和Grid System两种布局。   Styled Lists是列表时布局,每一行只显示一条数据。    基本结构式使用ul并设置类属性为list,每一行一个标签<li> 例如: ~~~ <ul class="list"> <li> 需要显示的内容</li> <li> 需要显示的内容</li> <li>需要显示的内容</li> </ul> ~~~ 显示效果 ![](https://box.kancloud.cn/2016-02-23_56cbb4b85d54e.jpg)     再例如: ~~~ <ul class="list"> <li> <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 1</a></li> <li> <a href="detailitem.html" data-refresh-ajax="true" class='icon picture big'>账户new 2</a></li> <li> <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 3</a></li> </ul> ~~~ 显示效果 ![](https://box.kancloud.cn/2016-02-23_56cbb4b86e1f7.jpg) 可以使用inset增加一定的效果 例如: ~~~ <ul class="list inset"> <li> <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 1</a></li> <li> <a href="detailitem.html" data-refresh-ajax="true" class='icon picture big'>账户new 2</a></li> <li> <a href="detailitem.html" data-refresh-ajax="true" class='icon home big'>账户new 3</a></li> </ul> ~~~ 效果: ![](https://box.kancloud.cn/2016-02-23_56cbb4b87cc11.jpg) 可以看到边角变成了圆形。 # [官网参考](http://app-framework-software.intel.com/documentation.php#afui/afui_lists)