CSS 導航欄


實例: 導航欄


導航欄

熟練使用導航欄,對于任何網(wǎng)站都非常重要。

使用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>

嘗試一下 ?

現(xiàn)在,讓我們從列表中刪除邊距和填充:

實例

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

嘗試一下 ?

例子解析:

  • list-style-type:none - 移除列表前小標志。一個導航欄并不需要列表標記
  • 移除瀏覽器的默認設置將邊距和填充設置為0

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


垂直導航欄

上面的代碼,我們只需要 <a>元素的樣式,建立一個垂直的導航欄:

實例

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

嘗試一下 ?

示例說明:

  • display:block - 顯示塊元素的鏈接,讓整體變?yōu)榭牲c擊鏈接區(qū)域(不只是文本),它允許我們指定寬度
  • width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度

提示:查看 完全樣式的垂直導航欄的示例.

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


水平導航欄

有兩種方法創(chuàng)建橫向導航欄。使用內聯(lián)浮動的列表項。

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

內嵌列表項

建立一個橫向導航欄的方法之一是指定

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

    實例

    li
    {
    display:inline;
    }

    嘗試一下 ?

    實例解析:

    • display:inline; -默認情況下,<li>元素是塊元素。在這里,我們刪除換行符之前和之后每個列表項,以顯示一行 。

    提示: 查看 完全樣式的水平導航欄的示例.

    浮動列表項

    在上面的例子中鏈接有不同的寬度。

    對于所有的鏈接寬度相等,浮動 <li&gt元素,并指定為 <a>元素的寬度:

    實例

    li
    {
    float:left;
    }
    a
    {
    display:block;
    width:60px;
    }

    嘗試一下 ?

    實例解析:

    • float:left - 使用浮動塊元素的幻燈片彼此相鄰
    • display:block - 顯示塊元素的鏈接,讓整體變?yōu)榭牲c擊鏈接區(qū)域(不只是文本),它允許我們指定寬度
    • width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度

    Tip:查看 完全樣式的橫向導航欄的示例..