leoyi520

移动端订单列表系列-样式

CSS:

/*我的订单部分css*/
.ico-nav-d{
background: url("../images/w_18.jpg")no-repeat;
}
.hotelBox{
width: 100%;
}
.hotelBox li{
background: #fff;
margin-bottom: 10px;
*zoom:1;
z-index: 100;
overflow: hidden;
padding: 10px 0;
}
.hotelBox .leftHotel{
width: 50%;
}
.hotelBox .leftHotel img{
border:1px solid #ccc;
box-shadow: 0 0 3px #ccc;
}
.hotelBox .rightIntro{
width: 50%;
}
.hotelBox .rightIntro h4{
color: #555;
font-weight: bold;
font-size: 15px;
margin-left: 25px;
}
.hotelBox .rightIntro p{
padding: 0;
font-size: 12px;
margin:7px 0;
}
.hotelBox .rightIntro p span{
margin-left: -5px;
}
.hotelBox .rightIntro p a{
text-align: center;
padding: 3px;
}
.hotelBox .rightIntro .leftBar{
color: #ccc;
}
.hotelBox .rightIntro .rightPrice{
color:#FF4806;
}
.hotelBox .rightIntro .rightTime{
color:#F871A6;
}
.delDingdan{
border:1px solid #ccc;
color:#ccc;
}
.seeDingdan{
border:1px solid #5892F1;
color:#5892F1;
}

<div class="hotelBox clear">
<ul>
<li>
<a href="#">
<div class="col-xs-12">
<div class="leftHotel fl">
<img src="images/w_07.jpg" class="img-responsive img-thumbnail">
</div>
<div class="rightIntro fr">
<h4>标准双人房</h4>
<p><span class="leftBar">订单总价：</span><span class="rightPrice">￥888元</span></p>
<p>
<span class="leftBar">入住日期：</span><span class="rightTime">2017/04/20</span>
</p>
<p style="margin:20px 0 0 -5px;">
<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="leftHotel fl">
<img src="images/w_10.jpg" class="img-responsive img-thumbnail">
</div>
<div class="rightIntro fr">
<h4>商务景观房</h4>
<p><span class="leftBar">订单总价：</span><span class="rightPrice">￥888元</span></p>
<p>
<span class="leftBar">入住日期：</span><span class="rightTime">2017/04/20</span>
</p>
<p style="margin:20px 0 0 -5px;">
<a href="#" class="delDingdan">删除订单</a>
<a href="#" class="seeDingdan">查看订单</a>
</p>
</div>
</div>
</a>
</li>
<li>
<div class="col-xs-12">
<a href="#">
<div class="leftHotel fl">
<img src="images/w_12.jpg" class="img-responsive img-thumbnail">
</div>
<div class="rightIntro fr">
<h4>情侣景观房</h4>
<p><span class="leftBar">订单总价：</span><span class="rightPrice">￥888元</span></p>
<p>
<span class="leftBar">入住日期：</span><span class="rightTime">2017/04/20</span>
</p>
<p style="margin:20px 0 0 -5px;">
<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="leftHotel fl">
<img src="images/w_14.jpg" class="img-responsive img-thumbnail">
</div>
<div class="rightIntro fr">
<h4>豪华商务房</h4>
<p><span class="leftBar">订单总价：</span><span class="rightPrice">￥888元</span></p>
<p>
<span class="leftBar">入住日期：</span><span class="rightTime">2017/04/20</span>
</p>
<p style="margin:20px 0 0 -5px;">
<a href="#" class="delDingdan">删除订单</a>
<a href="#" class="seeDingdan">查看订单</a>
</p>
</div>
</div>
</a>
</li>

</ul>
</div>