leoyi520

移动端列表图文列表样式

用了bootstrap搭建的图文列表样式。

CSS

.clear{
overflow: hidden;
*zoom:1;
z-index: 100;
}

.detail-hot-list{
margin-bottom: 30px;
}
.detail-hot-list li{
float: left;
border:1px solid #ccc;
width:48%;
margin-bottom: 10px;
}
.detail-hot-list li:nth-child(odd){
margin-right: 10px;
}
.detail-hot-list li p{
overflow: hidden;
*zoom:1;
z-index: 1000;
margin-bottom: 0;
}
.detail-hot-list li h4{
padding:5px;
}
.bottomIntro{
padding:10px;
background: #ED4D4D;
}
.bottomIntro .leftBtn .btn{
width: 55px;
height: 30px;
color:#333;
border:1px solid #ccc;
}
.rightBtn {
margin-top: 5px;
}
.bottomIntro .rightBtn a{
color:#fff;
background: #A80B0B;
padding:5px;
margin:10px 10px 0 0;
}

HTML

<div class="col-xs-12">
<!-- 热销菜品 -->
<div class="detail-title clear ">
<h4 class="fl">热销菜品</h4>
</div>
<ul class="detail-hot-list clear">
<li><a href="#">
<img src="images/x_21.jpg" class="img-responsive">
<p>
<h4 class="fl">美味鸡排</h4>
<h4 class="fr colorRed">￥99</h4>
</p>
</a></li>
<li><a href="#">
<img src="images/x_22.jpg" class="img-responsive">
<p>
<h4 class="fl">美味鸡排</h4>
<h4 class="fr colorRed">￥99</h4>
</p>
</a></li>
<li><a href="#">
<img src="images/x_21.jpg" class="img-responsive">
<p>
<h4 class="fl">美味鸡排</h4>
<h4 class="fr colorRed">￥99</h4>
</p>
</a></li>
<li><a href="#">
<img src="images/x_22.jpg" class="img-responsive">
<p>
<h4 class="fl">美味鸡排</h4>
<h4 class="fr colorRed">￥99</h4>
</p>
</a></li>
</ul>
</div>