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，實現點擊標籤跳轉到對應的文檔內容
<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>