标签:
1.块状list
.list_box
{
padding:0px; 15px 30px;
width:970px;
margin:0 auto;
overflow:hidden;
}
.list_items{
list-style:none;
width:1020px;
}
.list_items li{
width:248px;
float:left;
margin-right:50px;
border:1px solid #d8d8d8;
margin-bottom:20px;
padding:20px;
}
<div class="list_box">
<ul class="list_items">
<li>
<img src="/home/widgets/category_list/images/goods.jpg">
<h2 class="goods-title">超强瞬吸 双重透气</h2>
<p class="goods-description">妙而舒,双重透气,随意动</p>
<div class="goods-info">
<span class="goods-price">¥150</span>
<span class="goods-jion-cart">加入购物车</span>
</div>
</li>
<li>
<img src="/home/widgets/category_list/images/goods.jpg">
<h2 class="goods-title">超强瞬吸 双重透气</h2>
<p class="goods-description">妙而舒,双重透气,随意动</p>
<div class="goods-info">
<span class="goods-price">¥150</span>
<span class="goods-jion-cart">加入购物车</span>
</div>
</li>
<li>
<img src="/home/widgets/category_list/images/goods.jpg">
<h2 class="goods-title">超强瞬吸 双重透气</h2>
<p class="goods-description">妙而舒,双重透气,随意动</p>
<div class="goods-info">
<span class="goods-price">¥150</span>
<span class="goods-jion-cart">加入购物车</span>
</div>
</li>
<li>
<img src="/home/widgets/category_list/images/goods.jpg">
<h2 class="goods-title">超强瞬吸 双重透气</h2>
<p class="goods-description">妙而舒,双重透气,随意动</p>
<div class="goods-info">
<span class="goods-price">¥150</span>
<span class="goods-jion-cart">加入购物车</span>
</div>
</li>
</ul>
</div>
标签:
原文地址:http://www.cnblogs.com/qingxinliwu/p/4204845.html