商品图片列表html,用html制作一个商品图片列表

图片列表

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

.box{

width:958px;

border: 1px solid #ddd;

margin: 50px auto 0;

overflow: hidden;

}

.title{

width: 918px;

height: 50px;

border-bottom: 1px solid #ddd;

margin: 0 auto;

}

.title span{

display: inline-block;

height: 50px;

border-bottom: 2px solid red;

font:18px '微软雅黑';

color: #000;

line-height: 50px;

padding: 0 15px;

}

.box ul{

width:950px;

margin: 20px 0 13px 20px;

}

.box ul li{

width: 160px;

height: 68px;

float:left;

margin: 0 29px 25px 0;

}

图片展示

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

效果如下图：

pic-list.png