a标签定位锚点小案例

 实现效果如图:

a标签定位锚点小案例

代码实现

<body>
		<div class="box">
			<h3>电子相册</h3>
			<div class="big">
				<img src="img/img2/mn1.jpg" alt="" id="a">
				<img src="img/img2/mn2.jpg" alt="" id="b">
				<img src="img/img2/mn3.jpg" alt="" id="c">
				<img src="img/img2/mn4.jpg" alt="" id="d">
				<img src="img/img2/mn5.jpg" alt="" id="e">
				<img src="img/img2/mn6.jpg" alt="" id="f">
				<img src="img/img2/mn7.jpg" alt="" id="g">
				<img src="img/img2/mn8.jpg" alt="" id="h">
			</div>
			<div class="small">
				<a href="#a"><img src="img/img1/c1.jpg"></a>
				<a href="#b"><img src="img/img1/c2.jpg"></a>
				<a href="#c"><img src="img/img1/c3.jpg"></a>
				<a href="#d"><img src="img/img1/c4.jpg"></a>
				<a href="#e"><img src="img/img1/c5.jpg"></a>
				<a href="#f"><img src="img/img1/c6.jpg"></a>
				<a href="#g"><img src="img/img1/c7.jpg"></a>
				<a href="#h"><img src="img/img1/c8.jpg"></a>
			</div>
		</div>
		
	</body>

 

<style type="text/css">
		.box{
			width: 525px;
			height: 403px;
			color: #fff;
			text-align: center;
			background: #666666;
			border: 2px solid #ccc;
		}
		.big,.big img{
			width: 400px;
			height:300px;
		}
		.big{
			float: left;
			border:1px solid #fff;
			margin-left: 25px;
			overflow: hidden;
		}
		.small{
			float: left;
			height: 300px;
			overflow-y: scroll;
		}
		.small a{
			display: block;
		}

	</style>

 

上一篇:angular插件合集


下一篇:博客模板更新CSS