仅用a标签实现点击导航栏跳转到页面对应位置

点击导航栏跳转到页面对应位置

a标签是最便捷的方式,不过没有下滑或者上滑的动画,是直接切换到指定位置的

html代码:

<body>
	<div>  <!-- 导航栏 -->
		<a href="#first">首页</a>   <!-- href="#" 或者 href="#top" 也可以转到顶部 -->
		<a href="second">第二页</a>
		<a href="third">第三页</a>
	</div>
	
	<!-- 不同页面 -->
	<div id="first">首页</div>
	<div id="second">第二页</div>
	<div id="third">第三页</div>     <!-- <a href="#bot">第三页</a> 也可以转到顶部 -->
</body>

修改a标签样式css代码:

a {
    
    
	text-decoration: none;    /* 去掉下划线 */
	color: white;   /* 去掉默认字体颜色:紫色 */
}

a标签其他功能:

mailto: 点击发送邮箱
在这里插入图片描述
tel: 点击拨打电话
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/amercury0818/article/details/128418142