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
我們的導航菜單基本完成了，看下效果，還是不錯的。
（如果配色更合理點，就更完美了，這個配色需要有美工功底了：）
End