[转]一个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 }
10 .cplist img{/*设置图片边框*/
11  padding:2px 2px;
12  border:1px silver solid;
13 }
14 .cplist li{
15  width:151px;/*图片宽度*/
16  display:inline;/*所有图片一行显示，超出宽度后换行*/
17  float:left;/*元素左浮动*/
18  margin-left:17px!important;
19  margin-left:12px;
20  margin-top:10px;
21 }
22 .cplist li span{
23  float:left;
24  width:151px;/*设置文字行的最大宽度*/
25  overflow:hidden;/*超出内容隐藏*/
26  text-align:center;/*文字居中*/
27  height:20px;
28 }

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>
10     <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
11     <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
12     <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
13     <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
14     <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
15     <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
16     <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
17     <li><img src="images/chanpin.jpg" alt="" /><span>图片标题</span></li>
18    </ul>

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