一篇文章教會你如何制作精美導覽列

【一、項目背景】

讓更多的人去學習html，以廣東科技學院的導航欄為例， 教大家怎麼去做一個橫向的導航欄。

【二、項目準備】

準備一個程式設計的軟體Dreamweaver，打開軟體點選檔案建立一個叫導航欄的項目，如下圖所示。

點選确定之後，會彈出下圖。

【三、項目實施】

1. 在

标簽裡面寫下一個架構：

注：标簽定義導航連結的部分。

• 标簽定義無序清單，
• 标簽定義清單項目。

标簽可用在有序清單 (

1. ) 和無序清單 (

• ) 中。

2. 寫完運作（運作：右下角點選f12運作）看到效果，如下圖所示：

3. 加入css樣式表（這裡采用内部樣式表）。

3.1 CSS樣式表有兩種加入的方式 如圖：

3.2 去除li帶來的小黑點:

li{   list-style: none;   }           

4. 基于上述步驟，運作一下 如下圖所示：

5. 設定一下導航欄的樣式。

1) 設定一下清單ul 的寬度 ，高度，背景顔色,文字位置居中（margin：0 auto）。

Li 同樣的設定高度 。

2) 去掉小黑點 ，再設定文字的顔色 ，高度 ，内邊距 ，（個人喜好 看着舒服就行）

3) 設定文字的大小，去掉下劃線（text-decoration:none;）。

下面是詳細備注

ul li{float: left; # 把内容左浮動，這樣可以橫向排列  
width: 100px;  # 設定每個li的寬  
height: 30px;  # 設定每個li的高  
background-color:pink  # 設定li的背景顔色為粉色  
border: 1px solid 6495ED; # 設定li的邊框顔色以及邊框大小  
text-align: center;  # 設定li中的文字樣式為居中  
line-height: 30px;  # 設定li中文字舉例上邊框的高度
}
ulli:hover{background-color: aqua;}  # 設定将滑鼠放到li時的背景顔色
ul li:hover a{color: black;}  # 設定将滑鼠放到li中的a标簽的内容時的文字顔色           

6. 完整代碼，如下圖所示。

7. 運作之後，效果圖如下圖所示。

【四、總結】

1. Html能做的效果非常多，希望你耐心的去學習，同時希望碰到問題主動搜尋，嘗試一下總會有解決方法。

2. 如果需要本文源碼，請在公衆号背景回複“導航欄”三個字擷取。

看完本文有收獲？請轉發分享給更多的人

IT共享之家