導航欄是網頁必備。但是很多童鞋總是做不出來。其實基本的導航欄只需要三步。一起圍觀學習一下吧。

分析

開始之前，一定要先分析導航欄基本組成和樣式。

如圖所示導航欄有百度三部分構成：

1. 導航欄

• 高度：37px
• 背景色：#f8f8f8

2. 超鏈接

• 字體大小：16px
• 字體顏色：#666
• 內邊距：左右14px
  注意：每個超鏈接文字間隔28px，所以把它分成左右14px內間距是極好的

3. 激活狀態超鏈接

• 字體顏色：#000
• 字體粗細：加粗
• 下邊框顏色：#3388ff

編碼

HTML

首先，我們先完成導航欄的HTML代碼。通常，大家習慣使用無序列表實現導航欄。下面是導航欄的HTML代碼，簡單吧！只需要把導航超鏈接放到li就好了。

<nav>
    <ul>
        <li><a href="#">網頁</a></li>
        <li><a href="#">新聞</a></li>
        <li><a href="#">貼吧</a></li>
        <li><a href="#">知道</a></li>
        <li><a href="#">音樂</a></li>
        <li><a href="#">圖片</a></li>
        <li><a href="#">視頻</a></li>
        <li><a href="#">地圖</a></li>
        <li><a href="#">文庫</a></li>
        <li><a href="#">更多?</a></li>
    </ul>
</nav>

CSS

初始化

接著我們的CSS代碼，先來個初始化。通常，大家會把標簽自帶的內外邊距初始化為0;把超鏈接默認的下劃線也去掉;經常也會把列表的項目符號清除。

* {
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
ul{
     list-style: none;
 }

順便加上清除浮動的clearfix類

.clearfix{
        overflow: auto;
        zoom: 1;
 }

效果圖如下：

導航欄

下面進入正題，先讓導航欄的超鏈接在一排上。只需要給li加上浮動即可。

 li{
     float: left;
 }

使用浮動，必須清除浮動，給li的父元素加上清除浮動clearfix類。

<nav>
    <ul class="clearfix">
        <li><a href="#">網頁</a></li>
        <li><a href="#">新聞</a></li>
        <li><a href="#">貼吧</a></li>
        <li><a href="#">知道</a></li>
        <li><a href="#">音樂</a></li>
        <li><a href="#">圖片</a></li>
        <li><a href="#">視頻</a></li>
        <li><a href="#">地圖</a></li>
        <li><a href="#">文庫</a></li>
        <li><a href="#">更多?</a></li>
    </ul>
</nav>

效果如圖，導航欄的超鏈接排在一行上了。

詳細樣式

接下來，我們根據分析的結果給導航欄的各部分加上字體、顏色和邊距等樣式吧。

• 導航欄樣式

nav{
 background-color: #f8f8f8;
 height: 37px;
 line-height: 37px;
}

• 超鏈接樣式

 li a{
     font-size: 16px;
     color: #666;
     padding: 0 14px;
 }

• 激活狀態下邊框

 li a.active{
    font-weight: bold;
    color: #000;
    padding-bottom: 9px;
    border-bottom: 2px solid #3388ff;
 }

把ative類加到首頁超鏈接上。

<nav>
    <ul class="clearfix">
        <li><a class="active" href="#">網頁</a></li>
        <li><a href="#">新聞</a></li>
        <li><a href="#">貼吧</a></li>
        <li><a href="#">知道</a></li>
        <li><a href="#">音樂</a></li>
        <li><a href="#">圖片</a></li>
        <li><a href="#">視頻</a></li>
        <li><a href="#">地圖</a></li>
        <li><a href="#">文庫</a></li>
        <li><a href="#">更多?</a></li>
    </ul>
</nav>

注意：藍色邊框的默認緊貼文字下面，需要調整內下邊距。

大功告成，效果如下：

• 點擊查看完整代碼

進階

大家是否看到藍色邊框其實不是在導航欄上的，而是緊貼著導航欄底部。下次我們來處理一下。