CSS完成一個帶跳轉功能的導航欄頁面(修改之前程式碼出現亂碼的情況)
阿新 • • 發佈：2019-02-02
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" 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>