首先來張效果圖：

這個模版中用了很簡短的代碼，結(jié)構(gòu)清晰，css屬性各自獨立，也能很好的繼承。


代碼如下： 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
body, p { margin:0; padding:0;}
* {font-family: Microsoft YaHei, Tahoma, sans-serif;}

.itemBox { width:840px; min-height:400px; background-color:#8c242d;}
	.item { width:180px; height:246px; overflow:hidden; background-color:#fff; padding:10px; float:left; margin:5px;}
	.item img { width:180px; height:180px;}
	.item h6 { padding:0; margin:4px 0; font-weight:normal; font-size:12px; color:#666; line-height:18px;}
	.item p {}
	.item p span { display:block; float:left; padding:3px 7px 3px 3px;background-color:#8c242d; font-size:12px; color:#fff;}
	.item p a { display:block; float:right; background-color:#e6e6e6; color:#666; font-size:12px; text-decoration:none; padding:3px 6px; text-align:center;}


.clear {content:".";display:block;clear:both;height:0;visibility:hidden;}
</style>
</head>

<body>

<div class="itemBox">
	
    <div class="item">
    	<img src="/uploads/allimg/130828/2022561960-0.jpg" width="180" height="180" />
        <h6>勝偉 床品家紡被芯 玉米單人春秋被子 150*200cm 粉色</h6>
        <p><span>￥59.00</span><a href="#">查看詳情</a></p>
    </div>
    
    <div class="item">
    	<img src="/uploads/allimg/130828/2022561960-0.jpg" width="180" height="180" />
        <h6>勝偉 床品家紡被芯 玉米單人春秋被子 150*200cm 粉色</h6>
        <p><span>￥59.00</span><a href="#">查看詳情</a></p>
    </div>
    
    <div class="item">
    	<img src="/uploads/allimg/130828/2022561960-0.jpg" width="180" height="180" />
        <h6>勝偉 床品家紡被芯 玉米單人春秋被子 150*200cm 粉色</h6>
        <p><span>￥59.00</span><a href="#">查看詳情</a></p>
    </div>
    
    <div class="item">
    	<img src="/uploads/allimg/130828/2022561960-0.jpg" width="180" height="180" />
        <h6>勝偉 床品家紡被芯 玉米單人春秋被子 150*200cm 粉色</h6>
        <p><span>￥59.00</span><a href="#">查看詳情</a></p>
    </div>
    
    <div class="item">
    	<img src="/uploads/allimg/130828/2022561960-0.jpg" width="180" height="180" />
        <h6>勝偉 床品家紡被芯 玉米單人春秋被子 150*200cm 粉色</h6>
        <p><span>￥59.00</span><a href="#">查看詳情</a></p>
    </div>
    
    <div class="item">
    	<img src="/uploads/allimg/130828/2022561960-0.jpg" width="180" height="180" />
        <h6>勝偉 床品家紡被芯 玉米單人春秋被子 150*200cm 粉色</h6>
        <p><span>￥59.00</span><a href="#">查看詳情</a></p>
    </div>
    
    <div class="clear"></div>
    
</div>

</body>
</html>


這是模版文件的下載地址：  下載模版 也可以直接打開，這是一個html文件。


　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設(shè)。