leoyi520

28
04

列表样式2

这个是用bootstrap一起搭建使用的移动端列表。比较常用的布局！其实都是千变万化不离其中的。

列表样式2 - qq330168885 - 琉忆光年的博客

 

CSS

.clear{

z-index:100;

*zoom:1;

overflow:hidden;

}

/*公益项目列表css*/
.searchBox{
width: 220px;
margin:5px;
float: left;
height: 30px;
line-height: 30px;
background: rgba(200,200,200,0.8);
margin-left: 50px;
border-radius: 5px;
}
.searchBox .searchIco{
display: inline-block;
width: 20px;
height: 20px;
float: left;
margin-top: 5px;
margin-left: 3px;
background: url("../images/l_03.png")no-repeat;
}
.searchBox input{
height: 25px;
line-height: 25px;
font-weight: bold;
color:#000;
outline: none;
border:none;
float: left;
width: 165px;
margin-top: 3px;
background: none;
margin-left: 5px;
}
.searchPhone{
display: inline-block;
width: 20px;
height: 20px;
float: left;
margin-top: 5px;
background: url("../images/l_05.png")no-repeat;
margin-left: 3px;
}
.shaixuan{
font-size: 16px;
font-weight: bold;
margin:10px;
}
.shaixuan:hover{
color:#fff;
text-decoration: none;
}
.choiceFood{
width: 100%;
background: rgba(100,100,100,0.8);
}
.choiceFood li {
width:25%;
float: left;
padding-left: 15px;
line-height: 35px;
border-right: 1px solid #fff;
}
.choiceFood li:nth-child(4){
border-right: none;
}
.choiceFood li a{
color:#fff;
font-weight: bold;
font-size: 14px;
}
.ico-nav-d{
background: url("../images/w_18.jpg")no-repeat;
}
.divBox{
width: 100%;
}
.divBox li{
background: #fff;
*zoom:1;
z-index: 100;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
.divBox .rightIntro h4{
font-weight: bold;
font-size: 15px;
}
.divBox .rightIntro p{
padding: 0;
font-size: 12px;
margin:7px 0;
}
.divBox .rightIntro p span{
margin-left: -5px;
}
.divBox .rightIntro p a{
text-align: center;
padding: 3px;
padding:3px 5px;
}
.divBox .rightIntro .leftBar{
color: #ccc;
}
.divBox .rightIntro .rightPrice{
color:#FF4806;
}
.divBox .rightIntro .rightTime{
color:#F871A6;
}
.delDingdan{
border-radius: 4px;
background: #999999;
color:#fff;
font-size: 12px;
padding:3px;
}
.grayColor{
color:#888;
font-size: 11px;
}
.introColor{
color:#333;
font-size: 11px;
}
.priceColor{
color:#CC3333;
font-weight: bold;
padding-left: 4px;
}
.expre{
width: 100%;
height: 5px;
background: #ccc;
margin:5px 0;
}
.expre .exLong{
width:20%;
height: 5px;
background: #E7322F;
}
/*兼容iphone5*/
@media screen and (max-width: 320px){
.divBox .leftdiv{
width: 40%;
}
.divBox .rightIntro{
width: 57%;
}
.orderList li{
float: left;
width: 33.33%;
background: #7A3635;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.topChoice{
margin-left: 96px;
}
}
/*兼容iphone6*/
@media screen and (min-width: 350px) and (max-width: 400px){
.divBox .leftdiv{
width: 35%;
}
.divBox .rightIntro{
width: 62%;
}
.orderList li{
float: left;
width: 33.33%;
background: #7A3635;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.topChoice{
margin-left: 120px;
}
}

HTML

<div class="container" id="returnTop">
<!-- 头部 -->
<div class="row">
<div class="topBox clear">
<a href="javascript:window.history.back(-1);" class="ico-return"></a>
<h4 class="text-center white" style="line-height: 40px;">公益项目</h4>
<a href="javascript:void(0);" id="showNav" is='0' class="setBox"></a>
</div>
</div>

<!-- 公益项目列表 -->
<div class="row">
<div class="divBox clear">
<ul>
<!-- 一个列表 -->
<li>
<a href="detail.html">
<div class="col-xs-12">
<div class="leftdiv fl">
<img src="images/x_03.jpg" class="img-responsive">
</div>
<div class="rightIntro clear fr">
<h4 class="clear"><span class="fl">春蕾计划一对一</span> <a href="#" class="delDingdan" style="float: right;">进行中</a></h4>
<!-- 经验条 -->
<div class="expre">
<div class="exLong">
</div>
</div>
<p class="grayColor"><span class="priceColor">已有88人捐助</span> 还差9875632元</p>
<p class="introColor">
春蕾计划一对一在全国1700家门店开通了电子捐款箱，携手爱心网友体验支付新公益……
</p>
</div>
</div>
</a>
</li>
<!-- 一个结束 -->
<li>
<a href="detail.html">
<div class="col-xs-12">
<div class="leftdiv fl">
<img src="images/x_03.jpg" class="img-responsive">
</div>
<div class="rightIntro clear fr">
<h4 class="clear"><span class="fl">春蕾计划一对一</span> <a href="#" class="delDingdan" style="float: right;">进行中</a></h4>
<!-- 经验条 -->
<div class="expre">
<div class="exLong">
</div>
</div>
<p class="grayColor"><span class="priceColor">已有88人捐助</span> 还差9875632元</p>
<p class="introColor">
春蕾计划一对一在全国1700家门店开通了电子捐款箱，携手爱心网友体验支付新公益……
</p>
</div>
</div>
</a>
</li>
<li>
<a href="detail.html">
<div class="col-xs-12">
<div class="leftdiv fl">
<img src="images/x_03.jpg" class="img-responsive">
</div>
<div class="rightIntro clear fr">
<h4 class="clear"><span class="fl">春蕾计划一对一</span> <a href="#" class="delDingdan" style="float: right;">进行中</a></h4>
<!-- 经验条 -->
<div class="expre">
<div class="exLong">
</div>
</div>
<p class="grayColor"><span class="priceColor">已有88人捐助</span> 还差9875632元</p>
<p class="introColor">
春蕾计划一对一在全国1700家门店开通了电子捐款箱，携手爱心网友体验支付新公益……
</p>
</div>
</div>
</a>
</li>
</div>
</div><!-- container结束 -->


评论

© leoyi520 | Powered by LOFTER