<ul>
    <li></li>
    <li></li>
</ul>

這是項(xiàng)目列表的一個(gè)格式！

---------------------------------------

<ul id="nav">    |項(xiàng)目列表調(diào)用#nav的樣式|
   <li><a href="#">本站首頁</a></li>  |項(xiàng)目列表里邊的列表項(xiàng)|
   <li><a href="#">本站首頁</a></li>  |項(xiàng)目列表里邊的列表項(xiàng)|
   <li><a href="#">本站首頁</a></li>  |項(xiàng)目列表里邊的列表項(xiàng)|
   <li><a href="#">本站首頁</a></li>  |項(xiàng)目列表里邊的列表項(xiàng)|
   <li><a href="#">本站首頁</a></li>  |項(xiàng)目列表里邊的列表項(xiàng)|
</ul>

#nav li{ float:left;} |調(diào)用ID為nav樣式的容器里邊Li的樣式|
#nav li a{ display:block;  text-align:center; text-decoration:none;}
|調(diào)用ID為nav樣式的容器里邊，列表項(xiàng)Li超鏈接的樣式|

 

　　或許你并不能完全理解這些代碼都是什么意義，都用來控制什么，達(dá)到什么效果。
　　下面我們來解析上面的代碼：

　　xhtml代碼首先定義了一個(gè)容器div id="nav"。這個(gè)容器用來放置這個(gè)無序列表橫向?qū)Ш讲藛蔚膬?nèi)容，但也有人認(rèn)為這個(gè)容器是多余的，直接定義ul id="nav"就可以了。我們不建議你這樣做，要知道我們的站點(diǎn)是可擴(kuò)展的，我們要為將來的擴(kuò)展留有足夠的余地，如果我們的導(dǎo)航樣式設(shè)計(jì)的更加復(fù)雜，僅有的ul是不能滿足需要的。我們定義這樣的容器也更符合我們編寫代碼的習(xí)慣。

　　#nav定義了窗口的寬高及背景顏色。#nav ul包含有margin和padding聲明，字體及顏色聲明。line-height: 30px;是非常重要的定義，如果取消掉行高的定義，我們的鏈接文字垂直居中就可能受到影響。white-space: nowrap;或許大家并不能理解有什么作用，它定義了強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br對象。關(guān)于white-space屬性可以參考這里。
　　#nav li中的list-style-type: none;去除了列表項(xiàng)所使用的預(yù)設(shè)標(biāo)記。使其更象是純文本，而沒有列表標(biāo)記。display: inline;聲明則能夠讓列表項(xiàng)目在頁面上從左向右浮動(dòng)，而不會讓每個(gè)項(xiàng)目顯示在單獨(dú)的行里而從上至下的排列。這兩項(xiàng)聲明是我們實(shí)現(xiàn)無序列表橫向?qū)Ш讲藛蔚年P(guān)鍵。
　　#nav li a和#nav li a:hover定義了鏈接的樣式。其中的內(nèi)容就不作深入了，唯一要講的就是：padding: 7px 10px;它是用來控制鏈接文字之間的空白間隔的，你可以試著改變數(shù)值試試看。