[转]一个UL和LI写出来的简单的图片列表
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 }
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>
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代码中的数值就可以了。