CSS实现电子相册小案例5

最新推荐文章于 2021-08-03 22:23:49 发布

小佬呀

最新推荐文章于 2021-08-03 22:23:49 发布

阅读量969

点赞数 2

分类专栏： HTML 文章标签：锚点定位 css实现电子相册

本文链接：https://blog.youkuaiyun.com/qq_36722545/article/details/96903038

版权

HTML 专栏收录该内容

8 篇文章

订阅专栏

效果图

在这里插入图片描述
利用锚点定位实现电子相册

 <img id="p1" src="img2/mn1.jpg">
 <a href="#p1"><img src="img1/c1.jpg"></a>

代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box{
			width: 525px;
			height: 403px;
			background-color: #666666; 
			border:2px solid #cccccc;
			text-align: center;
			margin: 50px auto;
			position: relative;
		}
		.box h1{
			font-size: 18px;
			color: white;
			line-height: 1em;
			margin:21px 0;
		}
		.box .box1{
			width: 400px;
	       	height: 298px;
	       	border:1px solid #fff;
	       	margin-left:24px;
	       	overflow: hidden;
		}
     
	       .photo img{
	       	width: 400px;
	       	height: 298px;
	       }
       .smphoto{
       	position: absolute;
       	height: 298px;
       	overflow-y: auto;
       	right: 0px;
       	top:58px;
       }
       a{
       	display: block;
       }
	</style>
</head>
<body>
   <div class="box">
   	    <h1>电子相册</h1>
   	    <div class="box1">
   	   <div class="photo">
   	   	  <img id="p1" src="img2/mn1.jpg">
   	   </div>
   	    <div class="photo">
   	   	  <img id="p2" src="img2/mn2.jpg">
   	   </div>
   	    <div class="photo">
   	   	  <img id="p3" src="img2/mn3.jpg">
   	   </div>
   	    <div class="photo">
   	   	  <img id="p4" src="img2/mn4.jpg">
   	   </div>
   	     <div class="photo">
   	   	  <img id="p5" src="img2/mn5.jpg">
   	   </div>
   	     <div class="photo">
   	   	  <img id="p6" src="img2/mn6.jpg">
   	   </div>
   	    <div class="photo">
   	   	  <img id="p7" src="img2/mn6.jpg">
   	   </div>
   	   </div>
   	   <div class="smphoto">
   	   	  <a href="#p1"><img src="img1/c1.jpg"></a>
   	   	  <a href="#p2"><img src="img1/c2.jpg"></a>
   	   	  <a href="#p3"><img src="img1/c3.jpg"></a>
   	   	  <a href="#p4"><img src="img1/c4.jpg"></a>
   	   	  <a href="#p5"><img src="img1/c5.jpg"></a>
   	   	  <a href="#p6"><img src="img1/c6.jpg"></a>
   	   	  <a href="#p7"><img src="img1/c7.jpg"></a>
   	   </div>
   </div>
</body>
</html>