如果本章演示效果無法正常展示，請至主站查看 http://coffee.zji.me/

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

那么先來說說列表哦：

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

效果如下：

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

如上叫做無序列表。

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

效果如下：

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

如上叫做有序列表。

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

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

這個樣子沒有問題，挺容易看懂的，我們把他加在 #loge 的 div 后面來看看效果。

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

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

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

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

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

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

就是列表的樣式：無。再看效果。

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

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

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

/* 這是我寫的第一個 CSS 文件，內(nèi)心十分的激動，在這心潮澎湃之余，我想到了一個真理 —— 稻米鼠真帥！ */
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;
}

再來看看效果：

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

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

本章代碼下載：本章代碼

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

alay9999@163.com （劉源）

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

• 主站首發(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

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