html锚点链接小案例

最新推荐文章于 2022-09-06 15:13:10 发布

棉马咪

最新推荐文章于 2022-09-06 15:13:10 发布

阅读量1.1k

点赞数

分类专栏： web前端文章标签： html css html5

本文链接：https://blog.csdn.net/mianmami/article/details/116059037

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

案例1：回到首页

<html >
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">		
			*{border: 0;margin: 0; padding: 0;}
			.box1, .box2{
				height: 3000px; width: 200px;
				background-color: green;
			}
			
			
		</style>
	</head>
	<body>	
		<p id="content1">目录1</p>
		<div class="box1"></div>
		<p id="content2">目录2</p>
		<div class="box2"></div>
		<a href="#content1">点击此处可以跳转到目录1</a>
		<a href="#content2">点击此处可以跳转到目录2</a>
		
	</body>
</html>

案例2 图片翻滚
如下图所示，依次点击1,2,3,4进行图片的切换(这里用矩形框进行了替代)
其实图片是很长的。只是存放图片的容器设定了大小，并且将overflow设定了hidden，因此导致其他图片看不见。
在这里插入图片描述

<html >
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">		
			*{border: 0;margin: 0; padding: 0;}
			.box{
				height: 500px; width: 500px;
				border: 1px black solid;
				margin: 20px auto;
				position: relative;
			}
			.botton{
				position : absolute; right: 5px; bottom:5px;
				
			}
			a{
				height: 30px; width: 20px;
				text-decoration: none; text-align: center; line-height: 30px;
				background-color: rgba(0, 0, 0, 0.3); color:red; /*rgba的第四个参数是透明度*/
				margin: 2px;
				padding: 2px;
				float: left;
				
			}
			a:hover{background-color: rgba(0, 0, 0, 0.8);}
			.image_list div{
				height: 500px; width: 500px;
			}
			.image_list{
				height: 500px; width: 500px;
				overflow: hidden;
			}
			
			
		</style>
	</head>
	<body>	
		<div class='box'>
			<div class='botton'>
				<a href="#image1">1</a>
				<a href="#image2">2</a>
				<a href="#image3">3</a>
				<a href="#image4">4</a>
			</div>
			<div class="image_list">
				<div id = "image1" style="background-color: red";></div>
				<div id = "image2" style="background-color: blue";></div>
				<div id = "image3" style="background-color: yellow";></div>
				<div id = "image4" style="background-color: green";></div>	
			</div>
		</div>
		
	</body>
</html>

棉马咪

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html锚点链接小案例

案例1：回到首页<html > <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{border: 0;margin: 0; padding: 0;} .box1, .box2{ height: 3000px; width: 200px; background-color: green; }
复制链接

扫一扫