DIV+CSS 用UL和LI 构建的产品图片列表_MAXWO.COM

首先说明一点，请将ul外部使用div并设置宽度，这样整个的图片列表就做好了，大家只需要根据自己的图片大小和div的大小调整css代码中的数值就可以了。不明白的给我留言吧/

第一步：

先写html

html代码

<ul class=”cplist”>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
<li><img src=”images/chanpin.jpg” alt=”” /><span>产品图片标题</span></li>
</ul>
第二步：
css代码：
/*产品列表展示Start*/
.cplist{
list-style: none;/*列表样式清除*/
margin:0 auto;
padding:5px 0px ;
line-height:1.8em!important;/*列表行火狐*/
line-height:2em;/*列表行ie*/
margin-bottom:20px;
}
.cplist img{/*设置图片边框*/
padding:2px 2px;
border:1px silver solid;
}
.cplist li{
width:151px;/*图片宽度*/
display:inline;/*所有图片一行显示，超出宽度后换行*/
float:left;/*元素左浮动*/
margin-left:17px!important;
margin-left:12px;
margin-top:10px;
}
.cplist li span{
float:left;
width:151px;/*设置文字行的最大宽度*/
overflow:hidden;/*超出内容隐藏*/
text-align:center;/*文字居中*/
height:20px;
}
/*产品列表展示End*/
最终效果图
DIV_UL_LI图文列表

DIV_UL_LI图文列表