折腾了几天，终于终于终于解决了一个照片墙的问题哟！
先上效果图：
他会像百度图片库一样，鼠标移到哪张图，哪张图 就会放大显现。看下图：
哈哈，最得意的是知道了怎么把图片放在我想放的地方，显示的大小也可以，一开始的时候，图片放好，鼠标移到图片也会变大，只是其他的图片也会相应的移动位置，特别难看，
现在明白了“块级元素”，也知道了，为什么不直接防止图片，而是将img放在a里面，a 又放在li里面，因为这样可以实现更多的效果啦。
不多说，上代码，再注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>回忆-情侣博客模板</title>
<meta name="Keywords" content="博客模板,情侣博客模板" >
<meta name="Description" content="情侣博客模板" >
<link href="css/shi_test.css" rel="stylesheet">
</head>
<body>
<div class = "thumbs">
<ul class="wall_a" >
<li><a href="/"><img src="images/p01.jpg">
</a></li>
<li><a href="/"><img src="images/p02.jpg">
</a></li>
<li><a href="/"><img src="images/p03.jpg">
</a></li>
<li><a href="/"><img src="images/p04.jpg">
</a></li>
<li><a href="/"><img src="images/p05.jpg">
</a></li>
<li><a href="/"><img src="images/p06.jpg">
</a></li>
<li><a href="/"><img src="images/t01.jpg">
</a></li>
<li><a href="/"><img src="images/t02.jpg">
</a></li>
<li><a href="/"><img src="images/t03.jpg">
</a></li>
</ul>
</div>
</body>
</html>
css样式：
@charset "gb2312";
/* CSS Document */
* { margin: 0; padding: 0 }
a:link, a:visited { text-decoration: none; }
ul, li { list-style-type: none }
img { border: 0; }
#thumbs { width: 100%;
background: #559664; padding: 30px 0; overflow: hidden; border-bottom: #226039 1px solid }
.wall_a {
display:block;
float:left;
width:750px;
height:450px;
line-height:50px;
overflow:hidden;
position:relative;
}
.wall_a li{
float:left;
margin-right:2px;
border:1px solid #999;
padding:1px;
position:relative;
}
.wall_a a {
display:block;
float:left;
width:200px;
height:100px;
overflow:hidden;
position:relative;
z-index:1;
opacity:0.8;
}
.wall_a a:hover {
overflow:visible;
z-index:1000;
border:none;
opacity:1;
}
.wall_a a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
opacity:1;
}
浙公网安备 33010602011771号