ul和li弄的图片列表
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>选择器的应用</title> 6 <style type="text/css"> 7 8 /*产品展示列表Start*/ 9 .cplist{ 10 list-style: none;/*列表样式清除*/ 11 margin:0 auto; 12 padding:5px 0px ; 13 line-height:1.8em!important;/*列表行火狐*/ 14 line-height:2em;/*列表行ie*/ 15 margin-bottom:20px; 16 } 17 .cplist img{/*设置图片边框*/ 18 padding:2px 2px; 19 border:1px silver solid; 20 width:100px; 21 height:100px; 22 } 23 .cplist li{ 24 width:100px;/*图片宽度*/ 25 display:inline;/*所有图片一行显示，超出宽度后换行*/ 26 float:left;/*元素左浮动*/ 27 margin-left:17px!important; 28 margin-left:12px; 29 margin-top:10px; 30 } 31 .cplist li span{ 32 float:left; 33 width:100px;/*设置文字行的最大宽度*/ 34 overflow:hidden;/*超出内容隐藏*/ 35 text-align:center;/*文字居中*/ 36 height:25px; 37 } 38 </style> 39 </head> 40 <body> 41 42 <ul class="cplist"> 43 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 44 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 45 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 46 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 47 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 48 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 49 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 50 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 51 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 52 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 53 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 54 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 55 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 56 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 57 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 58 <li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li> 59 </ul> 60 </body> 61 </html>
效果
