leoyi520

移动端简单的列表页

CSS

.clear{

*zoom:1;

z-index:100;

}

.conBox .intro_box{
width: 150px;
height: 30px;
padding:5px;
text-align: center;
background: #ED4D4D;
color: #fff;
margin-bottom: 10px;
font-weight: bold;
font-size: 14px;
}
.conBox ul{
margin-bottom: 10px;
}
.conBox ul li{
width: 48%;
float: left;
}
.conBox ul li:nth-child(1){
margin-right: 10px;
}

<div class="conBox clear">
<!-- 一个框开始 -->
<div class="intro_box">
小区服务
</div>
<ul class="clear">
<li><a href="#"><img src="images/l_05.jpg" class="img-responsive"></a></li>
<li><a href="#"><img src="images/l_07.jpg" class="img-responsive"></a></li>
</ul>
<!-- 一个框结束 -->
<div class="intro_box">
公寓服务
</div>
<ul class="clear">
<li><a href="#"><img src="images/l_11.jpg" class="img-responsive"></a></li>
<li><a href="#"><img src="images/l_13.jpg" class="img-responsive"></a></li>
</ul>
<div class="intro_box">
维修服务
</div>
<ul class="clear">
<li><a href="#"><img src="images/l_16.jpg" class="img-responsive"></a></li>
<li><a href="#"><img src="images/l_17.jpg" class="img-responsive"></a></li>
</ul>
</div>