HTML，如何製作導航欄？

在用html做一個網頁時，首先需要處理的是導航欄了。怎樣製作一個導航欄？以前的做法基本都是用table來做，現在我們用無序列表ul來做，下面一起來看下。

操作方法

（01）首先我們寫html程式碼，就是用 ul，li無序列表來放置我們的選單項，程式碼如圖。

（02）執行目前的程式碼，可以看到是一個比較醜陋的導航條。

（03）新增樣式，讓導航欄的每一欄橫向排列，而不是豎向排列。要橫向排列，只需要為li新增樣式：display: inline-block;就行了，然後用padding樣式為每一項新增一些間距，程式碼如圖。

（04）繼續美化導航項，為連結a新增樣式，主要是新增背景色background-color，和加一些間距padding，程式碼如圖

（05）先執行頁面，看下現在的效果。

（06）接著為當前選單的頁面新增樣式，

（07）再為滑鼠經過選單項時新增hover樣式。程式碼如圖，在滑鼠經過選單項時，為選單項添加了投影效果，並改變了字型顏色。

（08）我們的導航選單基本完成了，看下效果，還是不錯的。（如果配色更合理點，就更完美了，這個配色需要有美工功底了：）