CSS完成一个带跳转功能的导航栏页面(修改之前代码出现乱码的情况)

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>