一個導航欄怎麼做

　　我們在做網站前端頁面的時候，導航欄是必不可少的，我們如何才能用CSS做出漂亮的導航欄呢?接下來小編就教教你怎麼做一個導航欄!

　　工具/原料

　　記事本或者DW等等自己常用的編輯器。

　　具體的步驟

　　先碼好導航欄所需要的基本的HTML程式碼

　　這個就不必多說具體的程式碼如下：

　　下面我們通過CSS 來改變他的樣式。

　　首先我們先讓導航在瀏覽器的中間。不過在讓他居中前得先設定一個寬度，沒有寬度就沒法居中，這個的原因我就不用贅述了吧!

　　現在常用的網站寬度為960或980當然也有其他的，一些網站會根據訪客的顯示器大小有不同寬度的樣式，原因我就不在這多廢話了我們在這就用980吧。

　　方法是在之間加入如下程式碼來改變他的寬度。為了讓結果明顯，我們給它又加了一個邊框。

　　接下來我們讓他居中。我們在樣式中加入以下程式碼。

　　.nav ul{

　　

　　 solid #000;/*設定一個顏色為#000，寬度為1px的邊框*/

　　 auto 0px auto;/*也可以簡寫為margin:0 auto*/

　　}

　　因為我們要做的是橫向的導航欄，所以現在我們要把它變成橫向排列。我們在樣式中加入以下程式碼。

　　.nav ul li{

　　

　　}

　　邊框之所以擠到一起了是因為浮動以後 li就變成了聯級元素，就沒有寬和高了，所以也就沒法把邊框撐起來了啊。具體的原因想知道可以百度當然稍後我們可以給ul或.nav加上高度。

　　接下來，我們通過給元素新增樣式，讓他更美觀。加入以下程式碼。

　　.nav ul li a{

　　

　　

　　

　　

　　color:#FFF;/*文字顏色是白色*/

　　 10px;

　　

　　

　　

　　; /*去掉下劃線*/

　　}

　　我們再加入點互動，當訪客滑鼠放到某個元素上的時候，這個元素要有別於其他元素。要實現這個我們就要用到:hover這個偽類。在樣式中加入以下程式碼。

　　.nav ul li a:hover{ /*這個大概的意思就是當滑鼠放到這個a元素的上面時，這個a元素的樣式就按下面的程式碼執行*/

　　;

　　;

　　;

　　 solid red;

　　;

　　background:#FFF;

　　}

　　最後稍微整理一下程式碼

　　.nav ul{

　　;

　　 auto;

　　;

　　padding:0;

　　}

　　.nav ul li{

　　;

　　}

　　.nav ul li a{

　　;

　　;

　　;

　　;

　　color:#FFF;

　　 10px;

　　;

　　;

　　;

　　;

　　}

　　.nav ul li a:hover{

　　;

　　;

　　;

　　 solid red;

　　;

　　background:#FFF;

　　}

　　思路就是這樣的，其中還可以再加一些自己的元素，比如背景圖片之類，效果就更好了。