<!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=gbk" />
<title>图片排列</title>
<style>
.box{border:1px #999999 solid;width:600px;overflow:hidden;}
.box .title{border:0 #999999 solid; border-bottom-width:1px; padding:10px;height: 20px;line-height: 20px;}
.box .title h3{margin: 0;padding: 0;font-size: 15px;float: left;font-weight: bold;color: #000000;}
.box .title h5{margin: 0;padding: 0;float: left;font-size:12px;color:#666666;font-weight: normal;padding-left: 5px;}
.box .main {border:0 #999999 solid;padding:0;}
.box .main ul{list-style:none;margin:5px;padding:0px;}
.box .main ul li{float:left;display:inline;margin:2px;}
.box .main ul a{}
.box .main ul li img{padding:3px;border:1px #999 solid;}
.box .main ul li a:hover{zoom:1;} <!--不添加这个句子,当然大括号里面可以写人和内容。ie6下没有效果-->
.box .main ul li a:hover img{border:1px #f00 solid;}
.box .main br {clear:both;}
</style>
</head>
<body>
<div class="box">
<div class="title">
<h3>图片</h3>
<h5> (<a href="#">共<span class="red">7张</span></a>)</h5></div>
<div class="main">
<ul><li><a href="#"><img src="http://image-7.verycd.com/2064b6f2aba2ce4327af67f3f5c77e56126686%2875x75%29/thumb.jpg" alt=""></a></li>
<li><a href="#"><img src="http://image-7.verycd.com/8d181c0df47e897bd6396a62f73373df151311%2875x75%29/thumb.jpg" alt=""></a></li>
<li><a href="#" ><img src="http://image-7.verycd.com/25e959215219c3fc35c6112664a69c28105460%2875x75%29/thumb.jpg" alt=""></a></li>
<li><a href="#"><img src="http://image-7.verycd.com/3fc790907992e784226785bfa13e3a03106465%2875x75%29/thumb.jpg" alt=""></a></li>
<li><a href="#"><img src="http://image-7.verycd.com/49d290df0949ecdfd1f07626288fb8e8187591%2875x75%29/thumb.jpg" alt=""></a></li>
<li><a href="#"><img src="http://image-7.verycd.com/4394fd47180a3abe2048dab9cff1f752247870%2875x75%29/thumb.jpg" alt=""></a></li>
<li><a href="#"><img src="http://image-7.verycd.com/1d462fec26f336121d3bf1da1ba2dc3a75491%2875x75%29/thumb.jpg" alt=""></a></li> </ul>
<br>
</div>
</div>
</body>
</html>
浮动图片的css实现
最新推荐文章于 2023-08-03 00:01:39 发布