leoyi520

移动端食物列表样式

顺便说下，这里面都是要用到bootstrap的，记得做移动端的话要引用这个！！

另外提示下 做移动端的兼容iphone5和6真的很麻烦，要用下面这两个css来写:

/*兼容iphone5*/
@media screen and (max-width: 320px){
.foodBox .leftfood{
width: 40%;
}
.foodBox .rightIntro{
width: 57%;
}
}
/*兼容iphone6*/
@media screen and (min-width: 350px) and (max-width: 400px){
.foodBox .leftfood{
width: 35%;
}
.foodBox .rightIntro{
width: 64%;
}
}

CSS

/*食物列表css*/
.ico-nav-d{
background: url("../images/w_18.jpg")no-repeat;
}
.foodBox{
width: 100%;
}
.foodBox li{
background: #fff;
margin-bottom: 10px;
*zoom:1;
z-index: 100;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
.foodBox .rightIntro h4{
color: #FF6969;
font-weight: bold;
font-size: 15px;
/*margin-left: 5px;*/
}
.foodBox .rightIntro p{
padding: 0;
font-size: 12px;
margin:7px 0;
}
.foodBox .rightIntro p span{
margin-left: -5px;
}
.foodBox .rightIntro p a{
text-align: center;
padding: 3px;
padding:3px 5px;
}
.foodBox .rightIntro .leftBar{
color: #ccc;
}
.foodBox .rightIntro .rightPrice{
color:#FF4806;
}
.foodBox .rightIntro .rightTime{
color:#F871A6;
}
.delDingdan{
border-radius: 4px;
background: #999999;
color:#fff;
}
.seeDingdan{
border-radius: 4px;
background: #CC3333;
color:#fff;
}
.introColor{
color:#333;
font-size: 11px;
}
.priceColor{
color:#CC3333;
font-weight: bold;
}
.slider-more{
color:#ccc;
padding-bottom: 60px;
}
/*兼容iphone5*/
@media screen and (max-width: 320px){
.foodBox .leftfood{
width: 40%;
}
.foodBox .rightIntro{
width: 57%;
}
}
/*兼容iphone6*/
@media screen and (min-width: 350px) and (max-width: 400px){
.foodBox .leftfood{
width: 35%;
}
.foodBox .rightIntro{
width: 64%;
}
}

<div class="row">
<div class="foodBox clear">
<ul>
<li>
<a href="#">
<div class="col-xs-12">
<div class="leftfood fl">
<img src="images/l_14.jpg" class="img-responsive">
</div>
<div class="rightIntro fr">
<h4>小葱拌豆腐</h4>
<p class="introColor">色泽素雅淡洁,清香飘逸,鲜嫩爽口。</p>
<p class="priceColor">
￥28.00
</p>
<p style="margin:10px 0;">
<a href="#" class="delDingdan">加入购物车</a>
<a href="#" class="seeDingdan">立即下单</a>
</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="col-xs-12">
<div class="leftfood fl">
<img src="images/l_17.jpg" class="img-responsive">
</div>
<div class="rightIntro fr">
<h4>红烧大排骨</h4>
<p class="introColor">味道香咸，排骨酥烂，色泽金红。</p>
<p class="priceColor">
￥28.00
</p>
<p style="margin:10px 0;">
<a href="#" class="delDingdan">加入购物车</a>
<a href="#" class="seeDingdan">立即下单</a>
</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="col-xs-12">
<div class="leftfood fl">
<img src="images/l_19.jpg" class="img-responsive">
</div>
<div class="rightIntro fr">
<h4>红烧猪大肠</h4>
<p class="introColor">色泽棕红，鲜美可口，肥而不腻。</p>
<p class="priceColor">
￥28.00
</p>
<p style="margin:10px 0;">
<a href="#" class="delDingdan">加入购物车</a>
<a href="#" class="seeDingdan">立即下单</a>
</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="col-xs-12">
<div class="leftfood fl">
<img src="images/l_21.jpg" class="img-responsive">
</div>
<div class="rightIntro fr">
<h4>可乐鸡翅</h4>
<p class="introColor">色泽艳丽、鸡翅嫩滑，咸甜适中。</p>
<p class="priceColor">
￥28.00
</p>
<p style="margin:10px 0;">
<a href="#" class="delDingdan">加入购物车</a>
<a href="#" class="seeDingdan">立即下单</a>
</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="col-xs-12">
<div class="leftfood fl">
<img src="images/l_23.jpg" class="img-responsive">
</div>
<div class="rightIntro fr">
<h4>宫保鸡丁</h4>
<p class="introColor">味道鲜美，闻名中外的特色传统名菜。</p>
<p class="priceColor">
￥28.00
</p>
<p style="margin:10px 0;">
<a href="#" class="delDingdan">加入购物车</a>
<a href="#" class="seeDingdan">立即下单</a>
</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="col-xs-12">
<div class="leftfood fl">
<img src="images/l_25.jpg" class="img-responsive">
</div>
<div class="rightIntro fr">
<h4>麻辣香锅</h4>
<p class="introColor">麻辣酱五香，吃货都疯狂。</p>
<p class="priceColor">
￥28.00
</p>
<p style="margin:10px 0;">
<a href="#" class="delDingdan">加入购物车</a>
<a href="#" class="seeDingdan">立即下单</a>
</p>
</div>
</div>
</a>
</li>
</ul>

</div>
<div class="text-center slider-more">
上滑查看更多
</div>
</div>