使用jqMobi开发app基础:Styled Lists布局详解手机开发

   jqMobi中的页面布局不多,目前主要有Styled Lists,和Grid System两种布局。

    Styled Lists是列表时布局,每一行只显示一条数据。

     基本结构式使用ul并设置类属性为list,每一行一个标签<li>

例如:

 <ul class="list"> 
         <li>  需要显示的内容</li> 
         <li> 需要显示的内容</li> 
         <li>需要显示的内容</li> 
        </ul> 

显示效果

使用jqMobi开发app基础:Styled Lists布局详解手机开发

     

再例如:

 <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>  

显示效果

使用jqMobi开发app基础:Styled Lists布局详解手机开发


可以使用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> 

效果:

使用jqMobi开发app基础:Styled Lists布局详解手机开发

可以看到边角变成了圆形。

官网参考

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/5278.html

(0)
上一篇 2021年7月16日
下一篇 2021年7月16日

相关推荐

发表回复

登录后才能评论