首页 > 代码库 > List

List

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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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