學習了這么久的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;

?

轉載于:https://www.cnblogs.com/sparrow32/p/9488302.html

總結

以上是生活随笔為你收集整理的PHP全栈开发（八）：CSS Ⅹ 导航栏制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。