學習了這麽久的CSS，我們現在也可以小試牛刀一下了，我們使用我們學會的CSS知識來制作一個導航欄。

我們都知道，在現代的導航欄裏面，最普遍的就是使用無序列表來制作導航欄。

我們可以使用如下代碼來制作一個橫向的導航欄

    <ul>
        <li><a href="#home">主頁</a></li>
        <li><a href="#news">通知</a></li>
        <li><a href="#things">訂單</a></
 
li>
        <li><a href="#contact">聯系方式</a></li>
        <li><a href="#gen">個人</a></li>
        <li><a href="#about">關於</a></li>
    </ul>

這就是一個典型的用UL制作的導航欄了。這個原裝的貨色就是這樣子的。

然後現在我們使用CSS來給導航欄加上樣式。

看會變成什麽樣子。我們首先去掉它的列表樣式，然後把內外邊距全部設置為0.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

這樣一來它就會貼緊瀏覽器的邊緣。並去掉了列表的標誌。

上面的例子中的CSS代碼是垂直和水平導航欄使用的標準代碼。

為了讓列表和周圍的樣式區別開來，我們給列表加上背景顏色，並設定寬度。

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

設置完成之後這個導航欄的效果是這樣的。

但是我們感覺這個鏈接之間還是太擠了。給鏈接加一些高度間隙。

在增加間距的時候我們首先要做的是就是把<a>變成一個塊元素，不然是不能給內聯元素增加內外邊距的。

所以我們使用以下代碼來給鏈接增加邊距。

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:200px;
    background-color: #f1f1f1;
    
}
li a{
    display:block;
    padding:8px 8px;
    text-decoration: none;
}
li a:hover {
    background-color: #555;
    color: white;
}

這樣一個簡單的垂直導航欄就做完了。

如果需要做一個橫向的導航欄，只需要把li的float屬性設置為left即可。

我們看一個橫向導航欄的例子：

 ul{
     list-style-type:none;
     margin:0;
     padding:0;
     background-color: #333;
     overflow: hidden;
 }
 li {
    float: left;
}
 li a{
     display:block;
     text-decoration: none;
     color:white;
     padding:14px 16px;
 }
 li a:hover {
    background-color: #111;
}

這裏使用float:left來實現了display:inline;同樣的效果，但值得註意的是。

在使用float:left;來進行橫向顯示的時候，必須要設置overflow: hidden;

PHP全棧開發（八）：CSS Ⅹ 導航欄制作