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>
效果
转载于:https://www.cnblogs.com/LYunF/p/3405355.html
