标签：des cWeb style blog io ar os sp for
折腾了几天，终于终于终于解决了一个照片墙的问题哟！
先上效果图：
他会像百度图片库一样，鼠标移到哪张图，哪张图 就会放大显现。看下图：
哈哈，最得意的是知道了怎么把图片放在我想放的地方，显示的大小也可以，一开始的时候，图片放好，鼠标移到图片也会变大，只是其他的图片也会相应的移动位置，特别难看，
现在明白了“块级元素”，也知道了，为什么不直接防止图片，而是将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; }
/*这是最外层的块元素(div本来就是一个块级元素)，相当于挂照片的墙*/
.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; /*宽度和高度不宜过大，算好尺寸，这里是按照3张照片*3张照片的尺寸设计的*/
line-height:50px;
overflow:hidden;
position:relative;
z-index:1; }
/*列表的样式*/
.wall_a li{
float:left;
margin-right:2px;
border:1px solid #999;
padding:1px;
}
/*这个又是一个块级元素，display:block,相当于一个放照片的小相框，只是这个相框的大小比照片小哟，所以，存放照片时，照片是剪裁本的*/
.wall_a a {
display:block;
float:left;
width:200px;
height:100px;
overflow:hidden;
position:relative;
z-index:1; /*这个非常重要，设置的是堆叠的优先级*/
}
/*照片,不要设置尺寸，不然就不会有变大效果哟，设置了就相当于把照片裁剪了，就不存在原图了*/
.wall_a a img{
float:left;
position:absolute;
overflow:hidden;
}
/*当鼠标移动到a这个块级元素时，隐藏的照片的部分就会显现出来*/
.wall_a a:hover {
overflow:visible;
z-index:1000; //优先级设的巨高，就是为了它可以覆盖其他照片啦。。。
border:none; }
.wall_a a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
标签：des cWeb style blog io ar os sp for
原文地址：http://www.cnblogs.com/shixiaomiao/p/4151941.html
