jqMobi中的页面布局不多,目前主要有Styled Lists,和Grid System两种布局。
Styled Lists是列表时布局,每一行只显示一条数据。
基本结构式使用ul并设置类属性为list,每一行一个标签<li>
例如:
<ul class="list"> <li> 需要显示的内容</li> <li> 需要显示的内容</li> <li>需要显示的内容</li> </ul>
显示效果
再例如:
<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>
显示效果
可以使用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://blog.ytso.com/5278.html