上次我們把導航條寫了一個雛形，就是看起來還行（這么難看居然說還行……我眼瞎）。我們的計劃是現在給它加上鏈接，讓他成為一個能干活的導航。

加鏈接這種事情對于現在的我們來說沒什么難度了吧。如果你堅持做練習的話一定覺得小事一樁了。但是我們現在遇到一個問題：我們要給誰加鏈接？

這還有疑問嗎？有！我要不說肯定會有人這么寫：

<a href="#"><li>這是錯誤的寫法</li></a>

為啥錯啦，因為你女盆友用的 IE6 瀏覽器不支持，這個理由夠用吧～

可是你不依不饒啊，那為啥錯了？你先記著，a 標簽里面的元素只能是文字和圖片哦，后面我們再去慢慢研究他。

現在我們把這個修改一下，于是我們的導航代碼變成了：

<ul id="nav-items">
    <li class="nav-item"><a href="#">首頁</a></li>
    <li class="nav-item"><a href="#download">下載</a></li>
    <li class="nav-item"><a href="#feature">特點</a></li>
    <li class="nav-item"><a href="#about">關于</a></li>
</ul>

大家說，你這鏈接地址好奇特，咋不是個網址啊，咱說了，這個問題留到后面處理，先別著急。咱們先來看看視覺效果。

你說你開始懷疑人生，至少是懷疑我的教程。你等等，你究竟覺得有啥不好的？文字的顏色和下劃線的問題我們講過怎么解決了吧？

看看前邊的這部分 CSS ：

#logo a {
    color:#333;
    text-decoration: none;
    font-size:24px;
    font-weight: 700;
    line-height: 50px;
}

把它復制一下，修改成：

#nav-items .nav-item a {
    color:#333;
    text-decoration: none;
    font-size:16px;
    line-height: 50px;
}

注意選擇器，現在是三層選擇器了，下邊的屬性都看得懂了，因為前邊說過了，那么來看看效果哦：

文字樣式終于看的過去了，但是這位置……現在我們開始正式研究這個問題了哦～～強迫癥的同學已經期待已久了吧？（嘿，別拍我，尊師重道?。?/p>

右鍵“審查元素”（Firefox 里是“查看元素”，以后我不說了），來看看 #nav-items 這個元素哦～

看到啦，他左側有個 40px 的內補（圖中藍紫色的位置），上下各有 16px 的外補（圖中黃色位置）。你望著左上角問我：“哪有數值？”來，轉頭，看看右下角的盒模型。

這些屬性是我們設置的嗎？我們查了一下 CSS 文件，發(fā)現不是，那么他又是瀏覽器給的默認屬性。這些默認屬性是我們想要的嗎？內補好像有用，因為我們的導航項要與 logo 拉開一些距離。但是上下的外補明顯不是我們想要的。所以去掉他。

#nav-items {
    margin:0;
}

看看 CSS 里已經定義過 #nav-items 了，所以給他的大括號里追加上 margin:0; 就好了。然后來看下一個問題：

現在位置沒問題了，但是你看每個導航項的可點擊區(qū)域（就是你可以點擊到這個鏈接的范圍）才這么大（上圖藍色的區(qū)域），你覺得體驗會好么？請各位讀者瞄準了點擊，否則后果自負～～

這肯定是不行的，你說，好辦，給 a 加上寬高，你可以試試看，我猜他不行啊，為啥不行？在這里我們要引入一個新的屬性了。display，顯示，這個元素怎么顯示呢？

先說一下他的常用屬性值：

none 此元素不會被顯示。

block 此元素將顯示為塊級元素，此元素前后會帶有換行符。

inline 默認。此元素會被顯示為內聯元素，元素前后沒有換行符。

果然除了第一句，剩下的我也沒看懂呢，還是用我的話來說吧，block 是個塊，就像 div ，是個已經打包好了的箱子，很乖，說什么聽什么，好處理；inline，字面是在行里邊，就是跟文字一樣的特性，沒打包的一堆東西，跑來跑去的，不很聽話，你跟他說寬高內補外補的他跟你假裝沒聽懂。剩下的問題咱們在使用中慢慢體會就好。

我們想想啊，一段文字加上鏈接，如果一行沒顯示下，是不是會分成兩行顯示？這個憑經驗我們也知道——是的。于是鏈接跟文字特性很像，那他就是內聯元素（inline），所以就解釋了為啥給他寬高他不聽話了。可是不聽話不行啊，咱們要讓他聽話的，所以要把他設置為 block，所以給 a 填上相應的屬性：

#nav-items .nav-item a {
    color:#333;
    text-decoration: none;
    font-size:16px;
    line-height: 50px;
    display: block;
    height: 50px;
}

順便高度 50px 也沒有異議，那么寬度……你想過沒有，要是出來一個導航項是五個字，你把它和兩個字的導航項設置一樣的寬度，他能好看嗎？所以實際上我們要設置的是什么？是文字之間的間隔，對不對？只要兩個導航項之間的文字間隔是一致的，就會顯得很協調。這肯定就是內補或者外補了，現在的問題就是：加給誰？加什么？

告訴你啊，還加給 a ，加內補，為啥呢？無論是內補還是外補，無論是加給 a 還是加給 li 在外觀上都是沒啥區(qū)別的。但是 a 的可點擊范圍有區(qū)別。你說對對，還有這一茬呢，那加給 a 就對了，為啥是內補？簡言之對我們點擊進行反應的是箱子，而與箱子外面的泡泡紙無關，外補不算箱子的范圍，但是內補算。所以我們給一個巧克力豆周邊加上大量的填充物，然后弄個大箱子裝就可以說是一大箱巧克力豆了。但是要是一個小盒子，裝上巧克力豆再裹上半米泡泡紙，你說是一大箱就說不過去?，F在需要箱子有一定的體積就往里塞嘍～

#nav-items .nav-item a {
    color:#333;
    text-decoration: none;
    font-size:16px;
    line-height: 50px;
    display: block;
    height: 50px;
    padding: 0 20px;
}

再來看看效果：

是不是看起來舒服多了？下一節(jié)我們繼續(xù)……寫導航。

特別補充說明：本教程目前的 CSS 書寫并不十分復合規(guī)范。

不是本人不知道規(guī)范，而是為了便于理解循序漸進，

現在是根據需求直接追加，只求達到效果，暫時不考慮細節(jié)。

等后面講的差不多了再作規(guī)范，要不然都沒認識幾個 CSS 屬性，我說誰先誰后你們也搞不明白。

本章學習卡片：卡片 21

本章代碼下載：本章代碼

本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質的咖啡隨意），支付寶賬號：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點發(fā)布，但最終內容以主站為準：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經本人許可，禁止任何形式轉載。相關事宜請聯系： dms@zji.me