列表式布局,是移动端布局的常见布局。其内容从上往下排列,导航之间的跳转要回到初始点。层次展示清晰,视觉效果好,体验方便快捷。常用应用于各种设置页面。非常的美观。接下来由我给大家讲解一下MUI列表式布局的代码。
普通列表
.mui-table-view类,然后在li标签中加入.mui-table-view-cell类,非常的简单。
代码如下
<ul>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ul>
效果图:
自定义列表高亮颜色
值得我们注意的一点是,我们重写css样式,一定要写在MUI.css的下方。不然我们的代码是不会生效的。
代码如下:
<style type="text/css">
.mui-table-view-cell.mui-active{
background-color: #2AC845;
}
</style>
效果图:
右侧添加导航箭头
代码如下:
<ul>
<li>
<a>列表 1</a>
</li>
<li>
<a>列表 2</a>
</li>
<li>
<a>列表 3</a>
</li>
</ul>
效果图:
图文列表
.mui-media:媒体类
.mui-media-object:媒体对象
.mui-media-body:媒体主体
.mui-pull-left/right:该类的作用是使图片左/右浮动。
代码如下:
ul>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/333.jpg">
<div>
这里是主标题
<p>这里是内容</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/222.jpg">
<div>
这里是主标题
<p>这里是内容</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="img/111.jpg">
<div>
这里是主标题
<p>这里是内容</p>
</div>
</a>
</li>
</ul>
效果图:
总结
列表式布局的代码简单易懂,我们需要知道是如何按照我们的需求来更改样式。即使代码简单,我们也不能忽视。只有明白了代码,我们才能将其利用。
END主 编 | 张祯悦
责 编 | 王 宇
where2go 团队
微信号:算法与编程之美
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。