上次我們把導(dǎo)航條寫了一個(gè)雛形，就是看起來還行（這么難看居然說還行……我眼瞎）。我們的計(jì)劃是現(xiàn)在給它加上鏈接，讓他成為一個(gè)能干活的導(dǎo)航。
加鏈接這種事情對(duì)于現(xiàn)在的我們來說沒什么難度了吧。如果你堅(jiān)持做練習(xí)的話一定覺得小事一樁了。但是我們現(xiàn)在遇到一個(gè)問題：我們要給誰加鏈接？
這還有疑問嗎？有！我要不說肯定會(huì)有人這么寫：
<a href="#"><li>這是錯(cuò)誤的寫法</li></a>為啥錯(cuò)啦，因?yàn)槟闩栌延玫?IE6 瀏覽器不支持，這個(gè)理由夠用吧～
可是你不依不饒啊，那為啥錯(cuò)了？你先記著，a 標(biāo)簽里面的元素只能是文字和圖片哦，后面我們?cè)偃ヂ芯克?/p>
現(xiàn)在我們把這個(gè)修改一下，于是我們的導(dǎo)航代碼變成了：
<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">特點(diǎn)</a></li>
<li class="nav-item"><a href="#about">關(guān)于</a></li>
</ul>大家說，你這鏈接地址好奇特，咋不是個(gè)網(wǎng)址啊，咱說了，這個(gè)問題留到后面處理，先別著急。咱們先來看看視覺效果。
你說你開始懷疑人生，至少是懷疑我的教程。你等等，你究竟覺得有啥不好的？文字的顏色和下劃線的問題我們講過怎么解決了吧？
看看前邊的這部分 CSS ：
#logo a {
color:#333;
text-decoration: none;
font-size:24px;
font-weight: 700;
line-height: 50px;
}把它復(fù)制一下，修改成：
#nav-items .nav-item a {
color:#333;
text-decoration: none;
font-size:16px;
line-height: 50px;
}注意選擇器，現(xiàn)在是三層選擇器了，下邊的屬性都看得懂了，因?yàn)榍斑呎f過了，那么來看看效果哦：
文字樣式終于看的過去了，但是這位置……現(xiàn)在我們開始正式研究這個(gè)問題了哦～～強(qiáng)迫癥的同學(xué)已經(jīng)期待已久了吧？（嘿，別拍我，尊師重道?。?/p>
右鍵“審查元素”（Firefox 里是“查看元素”，以后我不說了），來看看 #nav-items 這個(gè)元素哦～
看到啦，他左側(cè)有個(gè) 40px 的內(nèi)補(bǔ)（圖中藍(lán)紫色的位置），上下各有 16px 的外補(bǔ)（圖中黃色位置）。你望著左上角問我：“哪有數(shù)值？”來，轉(zhuǎn)頭，看看右下角的盒模型。
這些屬性是我們?cè)O(shè)置的嗎？我們查了一下 CSS 文件，發(fā)現(xiàn)不是，那么他又是瀏覽器給的默認(rèn)屬性。這些默認(rèn)屬性是我們想要的嗎？內(nèi)補(bǔ)好像有用，因?yàn)槲覀兊膶?dǎo)航項(xiàng)要與 logo 拉開一些距離。但是上下的外補(bǔ)明顯不是我們想要的。所以去掉他。
#nav-items {
margin:0;
}看看 CSS 里已經(jīng)定義過 #nav-items 了，所以給他的大括號(hào)里追加上 margin:0; 就好了。然后來看下一個(gè)問題：
現(xiàn)在位置沒問題了，但是你看每個(gè)導(dǎo)航項(xiàng)的可點(diǎn)擊區(qū)域（就是你可以點(diǎn)擊到這個(gè)鏈接的范圍）才這么大（上圖藍(lán)色的區(qū)域），你覺得體驗(yàn)會(huì)好么？請(qǐng)各位讀者瞄準(zhǔn)了點(diǎn)擊，否則后果自負(fù)～～
這肯定是不行的，你說，好辦，給 a 加上寬高，你可以試試看，我猜他不行啊，為啥不行？在這里我們要引入一個(gè)新的屬性了。display，顯示，這個(gè)元素怎么顯示呢？
先說一下他的常用屬性值：
none 此元素不會(huì)被顯示。
block 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
inline 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。
果然除了第一句，剩下的我也沒看懂呢，還是用我的話來說吧，block 是個(gè)塊，就像 div ，是個(gè)已經(jīng)打包好了的箱子，很乖，說什么聽什么，好處理；inline，字面是在行里邊，就是跟文字一樣的特性，沒打包的一堆東西，跑來跑去的，不很聽話，你跟他說寬高內(nèi)補(bǔ)外補(bǔ)的他跟你假裝沒聽懂。剩下的問題咱們?cè)谑褂弥新w會(huì)就好。
我們想想啊，一段文字加上鏈接，如果一行沒顯示下，是不是會(huì)分成兩行顯示？這個(gè)憑經(jīng)驗(yàn)我們也知道——是的。于是鏈接跟文字特性很像，那他就是內(nèi)聯(lián)元素（inline），所以就解釋了為啥給他寬高他不聽話了?？墒遣宦犜挷恍邪?，咱們要讓他聽話的，所以要把他設(shè)置為 block，所以給 a 填上相應(yīng)的屬性：
#nav-items .nav-item a {
color:#333;
text-decoration: none;
font-size:16px;
line-height: 50px;
display: block;
height: 50px;
}順便高度 50px 也沒有異議，那么寬度……你想過沒有，要是出來一個(gè)導(dǎo)航項(xiàng)是五個(gè)字，你把它和兩個(gè)字的導(dǎo)航項(xiàng)設(shè)置一樣的寬度，他能好看嗎？所以實(shí)際上我們要設(shè)置的是什么？是文字之間的間隔，對(duì)不對(duì)？只要兩個(gè)導(dǎo)航項(xiàng)之間的文字間隔是一致的，就會(huì)顯得很協(xié)調(diào)。這肯定就是內(nèi)補(bǔ)或者外補(bǔ)了，現(xiàn)在的問題就是：加給誰？加什么？
告訴你啊，還加給 a ，加內(nèi)補(bǔ)，為啥呢？無論是內(nèi)補(bǔ)還是外補(bǔ)，無論是加給 a 還是加給 li 在外觀上都是沒啥區(qū)別的。但是 a 的可點(diǎn)擊范圍有區(qū)別。你說對(duì)對(duì)，還有這一茬呢，那加給 a 就對(duì)了，為啥是內(nèi)補(bǔ)？簡(jiǎn)言之對(duì)我們點(diǎn)擊進(jìn)行反應(yīng)的是箱子，而與箱子外面的泡泡紙無關(guān)，外補(bǔ)不算箱子的范圍，但是內(nèi)補(bǔ)算。所以我們給一個(gè)巧克力豆周邊加上大量的填充物，然后弄個(gè)大箱子裝就可以說是一大箱巧克力豆了。但是要是一個(gè)小盒子，裝上巧克力豆再裹上半米泡泡紙，你說是一大箱就說不過去?，F(xiàn)在需要箱子有一定的體積就往里塞嘍～
#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ù)……寫導(dǎo)航。
特別補(bǔ)充說明：本教程目前的 CSS 書寫并不十分復(fù)合規(guī)范。
不是本人不知道規(guī)范，而是為了便于理解循序漸進(jìn)，
現(xiàn)在是根據(jù)需求直接追加，只求達(dá)到效果，暫時(shí)不考慮細(xì)節(jié)。
等后面講的差不多了再作規(guī)范，要不然都沒認(rèn)識(shí)幾個(gè) CSS 屬性，我說誰先誰后你們也搞不明白。
本章學(xué)習(xí)卡片：卡片 21
本章代碼下載：本章代碼
本書是收費(fèi)的，不過交費(fèi)憑自覺。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：
alay9999@163.com （劉源）
為了讓大家閱讀方便，本書將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：
未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多