leoyi520

个人中心的订单列表样式

个人中心中的订单列表样式

个人中心的订单列表样式 - qq330168885 - 琉忆光年的博客

 CSS

/*订单状态列表*/
.orderList{
margin-bottom: 20px;
}
.orderList li{
float: left;
width: 65px;
height: 65px;
border-radius: 50%;
background: #FF6666;
text-align: center;
font-weight: bold;
font-size: 15px;
}
.orderList li a{
display: block;
width: 100%;
height: 100%;
color:#fff;
}
.orderList li:nth-child(odd){
margin-right: 10px;
}
.orderList li:nth-child(2){
margin-right: 10px;
}
.ico-order{
display: inline-block;
width: 35px;
height: 35px;
margin-top: 5px;
}
.orderList li p{
margin-top: -5px;
margin-bottom: 0;
}
.ico-order-1{
background: url('../images/g_10.jpg')no-repeat;
}
.ico-order-2{
background: url('../images/g_12.jpg')no-repeat;
}
.ico-order-3{
background: url('../images/g_14.jpg')no-repeat;
}
.ico-order-4{
background: url('../images/g_16.jpg')no-repeat;
}

HTML

<div class="orderList clear">
<ul class="clear">
<li><a href="">
<span class="ico-order ico-order-1">
</span>
<p>待付款</p>
</a></li>
<li><a href="">
<span class="ico-order ico-order-2">
</span>
<p>待发货</p>
</a></li>
<li><a href="">
<span class="ico-order ico-order-3">
</span>
<p>待收货</p>
</a></li>
<li><a href="">
<span class="ico-order ico-order-4">
</span>
<p>退款</p>
</a></li>
</ul>
</div>


评论