码迷,mamicode.com
首页 > 其他好文 > 详细

List

时间:2015-01-06 00:42:37      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

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>        

  

List

标签:

原文地址:http://www.cnblogs.com/qingxinliwu/p/4204845.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!