導航欄
熟練使用導航欄，對于任何網站都非常重要。

使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML菜單。

導航欄=鏈接列表
作為標準的HTML基礎一個導航欄是必須的。

在我們的例子中我們將建立一個標準的HTML列表導航欄。

導航條基本上是一個鏈接列表，所以使用 <ul> 和 <li> 元素非常有意義：

實例
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>


現在，讓我們從列表中刪除邊距和填充：

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

例子解析：

list-style-type:none - 移除列表前小標志。一個導航欄并不需要列表標記
移除瀏覽器的默認設置將邊距和填充設置為0
上面的例子中的代碼是垂直和水平導航欄使用的標準代碼。

垂直導航欄
上面的代碼，我們只需要 元素的樣式，建立一個垂直的導航欄：

實例
a
{
display:block;
width:60px;
}

示例說明：

display:block - 顯示塊元素的鏈接，讓整體變為可點擊鏈接區域（不只是文本），它允許我們指定寬度
width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度
提示：查看完全樣式的垂直導航欄的示例.

注意： 請務必指定 元素在垂直導航欄的的寬度。如果省略寬度，IE6可能產生意想不到的效果。

水平導航欄
有兩種方法創建橫向導航欄。使用內聯或浮動的列表項。

這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法。

內嵌列表項
建立一個橫向導航欄的方法之一是指定

元素， 上述代碼是標準的內嵌:

實例
li
{
display:inline;
}

實例解析：

display:inline - 默認情況下，<li>元素是塊元素。在這里，我們刪除換行符之前和之后每個列表項，以顯示一行。
提示: 查看完全樣式的水平導航欄的示例.

浮動列表項
在上面的例子中鏈接有不同的寬度。

對于所有的鏈接寬度相等，浮動

元素，并指定為 元素的寬度：
實例
li
{
float:left;
}
a
{
display:block;
width:60px;
}

實例解析：

float:left - 使用浮動塊元素的幻燈片彼此相鄰
display:block - 顯示塊元素的鏈接，讓整體變為可點擊鏈接區域（不只是文本），它允許我們指定寬度
width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度
display:inline; -默認情況下，
元素是塊元素。在這里，我們刪除換行符之前和之后每個列表項，以顯示一行 。