css3锚点实现相册
0
[待解决问题]
锚点相册方法：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
{padding: 0;margin: 0 ;}
/.box1{width:180px;height:50px;position: absolute;z-index: 2;top:300px;left:60px;}*/
.box1{width:80px;height:350px;position: absolute;z-index: 2;top:0px;left:300px;overflow-y: scroll;}
.box{width:300px;height:350px;overflow: hidden;position: relative;box-shadow:0 10px 10px red;}
#p img{height:350px;width:300px;}
#p1 img{height:350px;width:300px; }
#p2 img{height:350px;width:300px; }
a img{width:50px;height:50px;display: block;}
</style></head>
<body>
<div class="box1">
<a href="#p"><img src="images/qqq.jpg"></a>
<a href="#p1"><img src="images/l2.jpg"></a>
<a href="#p2"><img src="images/l8.jpg"></a>
<a href="#p"><img src="images/qqq.jpg"></a>
<a href="#p1"><img src="images/l2.jpg"></a>
<a href="#p2"><img src="images/l8.jpg"></a>
<a href="#p"><img src="images/qqq.jpg"></a>
<a href="#p1"><img src="images/l2.jpg"></a>
<a href="#p2"><img src="images/l8.jpg"></a>
</div>
<div class="box">
<div id="p"><img src="images/qqq.jpg"></div>
<div id="p1"><img src="images/l2.jpg"></div>
<div id="p2"><img src="images/l8.jpg"></div>
<div id="p"><img src="images/qqq.jpg"></div>
<div id="p1"><img src="images/l2.jpg"></div>
<div id="p2"><img src="images/l8.jpg"></div>
<div id="p"><img src="images/qqq.jpg"></div>
<div id="p1"><img src="images/l2.jpg"></div>
<div id="p2"><img src="images/l8.jpg"></div>
</div>
</body>
</html>
