記錄一下網站中常見的豎直導航欄怎麼做。開發軟件是Dreamweaver2019。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>csdn_nav_test1</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
首先新建一個html文件，title名稱爲csdn_nav_test1。同時導入CSS。
<ul class="navbar1">
<li><a class="active" href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯繫</a></li>
<li><a href="#about">關於</a></li>
</ul>
在body中添加如上的內容。導航欄中的內容的整體形式爲無序列表ul。列表成員li當然是超鏈接文本，在這裏超鏈接指向無效地址，僅僅做展示用。
文本內容添加後如上所示。
在CSS區域添加如下內容，修飾ul（導航欄）；
.navbar1{
list-style-type:none;/*把每列前面的列表默認原點元素去掉*/
margin:0;/*填充都去掉*/
padding:0;/*填充都去掉*/
width: 200px;/*定義整個導航欄的寬度*/
background-color: gray;/*導航欄的背景顏色設置成灰色*/
border-style: solid;/*給導航欄加個外圍邊框，默認黑色*/
}
效果如下圖所示
在CSS區域添加如下內容，修飾列表ul中列表項li裏的超鏈接文本：
.navbar1 li a{
text-decoration: none;/*把文本自帶的下劃線去掉*/
color:black;/*字體顏色設置爲黑色*/
padding: 8px 0px;/*適當增加一些填充空間，使各列表項適當分開*/
display: block;/*各項以block形式顯示*/
text-align: center;/*文本位於block中央區域*/
}
目前的效果就如上圖所示了。
在CSS代碼段中添加如下內容：
.navbar1 li a:hover{/*如果鼠標放在欄目上，執行的變化*/
background-color: black;/*背景變爲黑色*/
color: white;/*字體變爲白色*/
}
.active{
background-color: antiquewhite;/*默認的情況下，高亮第一個項目欄*/
color: white;/*高亮的時候字體爲白色*/
}
效果如上圖所示，一個簡易的豎直導航欄已經完成了。整體代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>csdn_nav_test1</title>
<style type="text/css">
.navbar1{
list-style-type:none;
margin:0;
padding:0;
width: 200px;
background-color: gray;
border-style: solid;
}
.navbar1 li a{
text-decoration: none;
color:black;
padding: 8px 0px;
display: block;
text-align: center;
}
.navbar1 li a:hover{
background-color: black;
color: white;
}
.active{
background-color: antiquewhite;
color: white;
}
</style>
</head>
<body>
<ul class="navbar1">
<li><a class="active" href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯繫</a></li>
<li><a href="#about">關於</a></li>
</ul>
</body>
</html>
提出一個新問題嗷。大多數的網頁邊欄，都是豎直在一側佔據整個屏幕的，那怎麼改呢？
好學，很好學。只需要在.navbar1類的CSS代碼段添加以下兩行代碼：
height: 100%;/*導航欄長度佔據整個屏幕*/
position: fixed;/*導航欄相對屏幕的位置固定*/
效果如上圖所示。全部代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>csdn_nav_test1</title>
<style type="text/css">
.navbar1{
list-style-type:none;
margin:0;
padding:0;
width: 200px;
background-color: gray;
border-style: solid;
height: 100%;
position: fixed;
}
.navbar1 li a{
text-decoration: none;
color:black;
padding: 8px 0px;
display: block;
text-align: center;
}
.navbar1 li a:hover{
background-color: black;
color: white;
}
.active{
background-color: antiquewhite;
color: white;
}
</style>
</head>
<body>
<ul class="navbar1">
<li><a class="active" href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯繫</a></li>
<li><a href="#about">關於</a></li>
</ul>
</body>
</html>