CSS 導航欄
導航欄
熟練使用導航欄,對於任何網站都非常重要。
使用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>
<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>
嘗試一下»
現在,讓我們從列表中刪除邊距和填充:
例子解析:
- list-style-type:none - 移除列表前小標誌。 一個導航欄並不需要列表標記
- 移除瀏覽器的默認設置將邊距和填充設置為0
上面的例子中的代碼是垂直和水平導航欄使用的標準代碼。
垂直導航欄
上面的代碼,我們只需要<a>元素的樣式,建立一個垂直的導航欄:
示例說明:
- display:block - 顯示塊元素的鏈接,讓整體變為可點擊鏈接區域(不只是文本),它允許我們指定寬度
- width:60px - 塊元素默認情況下是最大寬度。 我們要指定一個60像素的寬度
提示:查看完全樣式的垂直導航欄的示例 .
注意:請務必指定<a>元素在垂直導航欄的的寬度。如果省略寬度,IE6可能產生意想不到的效果。
水平導航欄
有兩種方法創建橫嚮導航欄。 使用內聯或浮動的列表項。
這兩種方法都很好,但如果你想鏈接到具有相同的大小,你必須使用浮動的方法。
內嵌列表項
建立一個橫嚮導航欄的方法之一是指定
實例解析:
- display:inline; -默認情況下,<li>元素是塊元素。 在這裡,我們刪除換行符之前和之後每個列表項,以顯示一行。
提示:查看完全樣式的水平導航欄的示例 .
浮動列表項
在上面的例子中鏈接有不同的寬度。
對於所有的鏈接寬度相等,浮動<li>元素,並指定為<a>元素的寬度:
實例解析:
- float:left - 使用浮動塊元素的幻燈片彼此相鄰
- display:block - 顯示塊元素的鏈接,讓整體變為可點擊鏈接區域(不只是文本),它允許我們指定寬度
- width:60px - 塊元素默認情況下是最大寬度。 我們要指定一個60像素的寬度
提示:查看完全樣式的橫嚮導航欄的示例. .