CSS完成一个带跳转功能的导航栏页面_导航栏跳转页面htmlcss实现-优快云博客

1.右侧的内容，设置每个标题的id

<div class="right">
	<h2 id="section-1">Html介绍</h2>
	<h2 id="section-2">文件标签</h2>
	<h2 id="section-3">排版标签</h2>
	<h2 id="section-4">块标签</h2> 
	<h2 id="section-5">字体标签</h2> 
</div>

2.左侧导航栏

让每个<a>标签链接到对应的文档id，实现点击标签跳转到对应的文档内容

<ul class="tab">
<li><a href="#section-1">Html介绍</a></li>
<li><a href="#section-2">文件标签</a></li>
<li><a href="#section-3">排版标签</a></li>
<li><a href="#section-4">块标签</a></li>
<li><a href="#section-5">字体标签</a></li>
<li><a href="#section-6">清单标签</a></li>
<li><a href="#section-7">图形标签</a></li>
<li><a href="#section-8">连接标签</a></li>
<li><a href="#section-9">表格标签</a></li>
</ul>

3.CSS实现导航栏相对浏览器固定

<script type="text/css">

.left{
	width: 15%;
	position: fixed;/*设置左侧导航栏相对于浏览器窗口固定*/
	left: 8%;
}

</script>

4.效果图展示

5.全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html学习笔记</title>
		<style type="text/css">
			body{
				background-color: #FFFAFA;
			}
			.top{
				width: 80%;
				height: 200px;
				text-align: center;/*设置文本居中*/
				line-height: 200px;/*将文本高度设置为和容器一样的高度，使文本垂直居中*/
				margin: 0 auto;/*设置div容器居中*/
				background-color: #E6E6FA;
			}
			.left{
				width: 15%;
				position: fixed;/*设置左侧导航栏相对于浏览器窗口固定*/
				left: 8%;
			}
			.right{
				width: 65%;
				float: right;
				margin-right: 10%;
			}
			ul li{
				/*ul是块级元素，可以设置宽度和高度*/
				width: 150px;/*设置li的宽度*/
				height: 25px;
				line-height: 25px;/*将文本高度设置为和容器一样的高度，使文本上下距离一样*/
				padding: 5px;
				text-align: center;/*文字居中*/
				list-style: none;/*去掉列表项前面的圆黑点*/
				border:1px solid #DCDCDC;/*设置边框宽度为1px,实线,颜色为darkgray*/
			}
			a{
				text-decoration: none;/*去除a标签内容的下划线*/
				color: #1E90FF;
			}
			li:hover{
				background-color: #F5F5F5;
			}
			a:active{
				color: #AFEEEE;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<h1>HTML学习笔记</h1>
		</div>
		<div id="content">
			<div class="left">
				<ul class="tab">
		            <li><a href="#section-1">Html介绍</a></li>
		            <li><a href="#section-2">文件标签</a></li>
		            <li><a href="#section-3">排版标签</a></li>
		            <li><a href="#section-4">块标签</a></li>
		            <li><a href="#section-5">字体标签</a></li>
		            <li><a href="#section-6">清单标签</a></li>
		            <li><a href="#section-7">图形标签</a></li>
		            <li><a href="#section-8">连接标签</a></li>
		            <li><a href="#section-9">表格标签</a></li>
		       </ul>
			</div>
			<div class="right">
			 	<h2 id="section-1">Html介绍</h2>
	          	<br />
	            <br />
	            <br />
	            <br />
	            <br />
	            <br />
	          	<hr>
	            <h2 id="section-2">文件标签</h2>
	            <br />
	            <br />
	            <br />
	            <br />
	            <br />
	            <br />
	            <hr>
	            <h2 id="section-3">排版标签</h2>
	            <br />
	            <br />
	            <br />
	            <br />
	            <hr>
	            <h2 id="section-4">块标签</h2>
	            <br />
	            <br />
	            <br />
	            <br />
	            <hr>
	            <h2 id="section-5">字体标签</h2>
	            <br />
	            <br />
	            <br />
	            <br />
	            <hr>
	            <h2 id="section-6">清单标签</h2>
	          	<br />
	          	<br />
	          	<br />
	          	<br />
	          	<hr>
	            <h2 id="section-7">图形标签</h2>
	            <br />
	            <br />
	            <br />
	            <br />
	            <hr>
	            <h2 id="section-8">连接标签</h2>
	            <br />
	            <br />
	            <br />
	            <br />
	            <hr>
	            <h2 id="section-9">表格标签</h2>
	            <br />
	            <br />
	            <br />
	            <br />
	            <hr>	
			</div>
        </div> 
	</body>
</html>