[转]一个UL和LI写出来的简单的图片列表

转自http://goodboy5264.blog.163.com/blog/static/2538298201051935725392/?fromdm&fromSearch&isFromSearchEngine=yes

html代码:



css代码：



效果图：



全部代码：css代码：

1 /*产品展示列表Start*/
2 .cplist{
3 list-style: none;/*列表样式清除*/
4 margin:0 auto;
5 padding:5px 0px ;
6 line-height:1.8em!important;/*列表行火狐*/
7 line-height:2em;/*列表行ie*/
8 margin-bottom:20px;
9 }
.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;
}
html代码

1 <ul class="cplist">

2 <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
3 <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
4 <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
5 <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
6 <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
7 <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
8 <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
9 <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>
最后说明一点，请将ul外部使用div并设置宽度，这样整个的图片列表就做好了，大家只需要根据自己的图片大小和div的大小调整css代码中的数值就可以了。