如果本章演示效果無(wú)法正常展示，請(qǐng)至主站查看 http://coffee.zji.me/

現(xiàn)在來(lái)寫導(dǎo)航項(xiàng)。其實(shí)導(dǎo)航是有專門的標(biāo)簽的 <nav> </nav> 但是這個(gè)特性比較新，IE9 才開始支持，所以很多人還是習(xí)慣用列表來(lái)寫導(dǎo)航，這里我們也使用列表，為的是你以后看到各種代碼都能看得懂，因?yàn)?nav 標(biāo)簽相對(duì)于列表還是比較簡(jiǎn)單的。

那么先來(lái)說(shuō)說(shuō)列表哦：

<ul>
    <li>列表內(nèi)容</li>
    <li>列表內(nèi)容</li>
    <li>列表內(nèi)容</li>
</ul>

效果如下：

• 列表內(nèi)容
• 列表內(nèi)容
• 列表內(nèi)容

如上叫做無(wú)序列表。

<ol>
    <li>列表內(nèi)容</li>
    <li>列表內(nèi)容</li>
    <li>列表內(nèi)容</li>
</ol>

效果如下：

1. 列表內(nèi)容
2. 列表內(nèi)容
3. 列表內(nèi)容

如上叫做有序列表。

你說(shuō)這跟導(dǎo)航項(xiàng)一點(diǎn)都不像啊，但是在邏輯上還是很像的，都是列出來(lái)一些內(nèi)容。既然我們對(duì)于前邊的編號(hào)圓點(diǎn)什么的完全不在乎，那么我們就選擇無(wú)序列表好了，那么 html 代碼很簡(jiǎn)單的，幾乎跟上面一樣

<ul id="nav-items">
    <li class="nav-item">首頁(yè)</li>
    <li class="nav-item">下載</li>
    <li class="nav-item">特點(diǎn)</li>
    <li class="nav-item">關(guān)于</li>
</ul>

這個(gè)樣子沒有問(wèn)題，挺容易看懂的，我們把他加在 #loge 的 div 后面來(lái)看看效果。

你說(shuō)，哼，幸虧我已經(jīng)不再相信你了，否則又得失望。本來(lái)想要跟 logo 在一排的效果（要不那背景留著干嘛用？？）結(jié)果又做出來(lái)一個(gè)奇葩的造型。

我跟你說(shuō)?。?strong>想橫排，加浮動(dòng)！你看我一步步把它搞上去哦！在 CSS 里加上

#nav-items .nav-item {
    float:left;
}

就是給我們的每一個(gè)導(dǎo)航項(xiàng)加上了一個(gè)向左浮動(dòng)的屬性，我們只做了這一點(diǎn)，來(lái)看看什么變化哦

這個(gè)……好像是到一行了，但是有點(diǎn)亂，看不好效果，主要是那個(gè)圓點(diǎn)的影響，那我們?nèi)サ魣A點(diǎn)，把剛才那部分 CSS 再加上一個(gè)屬性：

#nav-items .nav-item {
    float:left;
    list-style: none;
}

就是列表的樣式：無(wú)。再看效果。

呀，果然是一排相鄰的元素，一加上浮動(dòng)就從豎著排列變到橫著排了。那么眼下呢，到這里你只要記住把想要橫排的東西都加上浮動(dòng)就好。如果你想知道為什么，那我們需要繼續(xù)一下我們快遞箱的故事，有些繞，這個(gè)故事晚些時(shí)候我會(huì)發(fā)布在我們交流平臺(tái)的“咖啡俱樂部”頻道內(nèi)（就是我們的 VIP 頻道）。

現(xiàn)在我們就先記住這個(gè)結(jié)論，然后再實(shí)踐中去慢慢體驗(yàn)他的用途。然后我們做個(gè)練習(xí)，你看 logo 和導(dǎo)航項(xiàng)這兩部分還是縱向排列的呢，那我們來(lái)給他倆也加上浮動(dòng)試試看。

為了防止你搞亂了，我在這貼一下完整的 CSS 代碼：

/* 這是我寫的第一個(gè) CSS 文件，內(nèi)心十分的激動(dòng)，在這心潮澎湃之余，我想到了一個(gè)真理 —— 稻米鼠真帥！ */
html, body {
    margin:0;
    padding:0;
}
#nav {
    width:100%;
    height:50px;
    background:#F3F3F3;
    padding:0 30px;
}
#logo {
    float: left;
}
#logo a {
    color:#333;
    text-decoration: none;
    font-size:24px;
    font-weight: 700;
    line-height: 50px;
}
#nav-items {
    float: left;
}
#nav-items .nav-item {
    float:left;
    list-style: none;
}

再來(lái)看看效果：

那么到了這里貌似雖然難看些，但是我們把位置都搞對(duì)了。下節(jié)課我們來(lái)試著給導(dǎo)航項(xiàng)加鏈接哦～～

本章學(xué)習(xí)卡片：卡片 20

本章代碼下載：本章代碼

本書是收費(fèi)的，不過(guò)交費(fèi)憑自覺。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

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

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

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me