您的位置：首页 > 其它

ul和li弄的图片列表

2013-11-03 20:02 239 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择器的应用</title>
<style type="text/css">

/*产品展示列表Start*/
.cplist{
list-style: none;/*列表样式清除*/
margin:0 auto;
padding:5px 0px ;
line-height:1.8em!important;/*列表行火狐*/
line-height:2em;/*列表行ie*/
margin-bottom:20px;
}
.cplist img{/*设置图片边框*/
padding:2px 2px;
border:1px silver solid;
width:100px;
height:100px;
}
.cplist li{
width:100px;/*图片宽度*/
display:inline;/*所有图片一行显示，超出宽度后换行*/
float:left;/*元素左浮动*/
margin-left:17px!important;
margin-left:12px;
margin-top:10px;
}
.cplist li span{
float:left;
width:100px;/*设置文字行的最大宽度*/
overflow:hidden;/*超出内容隐藏*/
text-align:center;/*文字居中*/
height:25px;
}
</style>
</head>
<body>

<ul class="cplist">
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
<li><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="" /><span>图片标题</span></li>
</ul>
</body>
</html>


效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航