使用display:block制作橫向導航菜單

DIV+css布局的核心是實作了表現和内容的分離，先來認識一下内容部分的代碼編寫方式：

<ul id="nav">

<li><a href="http://:www.aa25.cn/index.asp" target="_blank" rel="external nofollow" >首頁</a></li>

<li><a href="http://:www.aa25.cn/Sort/List_4.html" target="_blank" rel="external nofollow" >DIV+CSS教程</a></li>

<li><a href="http://:www.aa25.cn/Sort/List_5.html" target="_blank" rel="external nofollow" >常用代碼</a></li>

<li><a href="http://:www.aa25.cn/Sort/List_6.html" target="_blank" rel="external nofollow" >水晶圖示</a></li>

<li><a href="http://:www.aa25.cn/Sort/List_7.html" target="_blank" rel="external nofollow" >幻燈圖檔</a></li>

<li><a href="http://:www.aa25.cn/Sort/List_10.html" target="_blank" rel="external nofollow" >軟體下載下傳</a></li>

<li><a href="http://:www.aa25.cn/css2/" target="_blank" rel="external nofollow" >CSS2.0實用手冊</a></li>

</ul>

　　這段代碼使用了一個新的元素ul，在導航之前，先簡要了解一下ul元素。ul是css而已中使用得很廣泛的一種元素主要用來描述清單型内容，每一個<ul></ul>表示其中的内容為一個清單塊，塊中的每一條清單資料用<li></li>來描述，可以看一下不加任何樣式的ul的實作顯示效果。

http://www.aa25.cn/content.asp?id=269

　　如圖所示，作為一種清單型内容，ul預設樣式就加上了圓點狀序号，而且預設為從上至下排列。為什麼我們的導航系統要使用ul元素？實際上導航也是種清單，可以了解為導航清單，每一個清單資料就是導航中的一個導航頻道，同樣也可以使用二層嵌套的div來實作一個導航的代碼結構，但相對于ul清單來說，div顯得過于複雜，ul的使用還是應當重點放在塊狀型區域，而對于簡單的隻有文字的導航來說，ul就更為輕巧靈活。

　　在代碼中我們也為ul定義了一個id叫nav，接下來為這個ul及其下面的對象編寫代碼讓它實作需要的導航效果。

　　把第一段樣式編寫給了ul下的li對象，我們希望清單中的每一個一清單項不再遵行其預設的從上至下的排列，是以給#nav li指定了float:left;的屬性，如同div的float:left;一樣，也是通過浮動定位的原理使得自身向左浮動，進而使下一個對象貼緊該對象的右邊，最終所有的li都具有了向左浮動的特性，進而形式了橫向的排列形式。

　　導航的關鍵在于a連結對象的樣式控制，在這裡使用#nav li a{}給li下的每一個a連結對象編寫了樣式：

　　display:block是這裡的重點，它使得a連結對象的顯示方式由一段文本改為一個塊狀對象，和div的特性相同，div預設狀态下是一個塊狀對象，a連結對象預設狀态下是一個普通文本——内聯對象，這樣就沒有辦法使得a連結對象能夠像一個方塊狀按鈕一樣去運作，使用display:block之後，a連結對象将能夠像div和其它元素一樣成為一個塊狀對象（block），就可以使用css外邊距、内邊距等屬性給a連結标簽加上一系列的樣式了。

　　通過display:block的應用，我們讓a标簽元素有了寬度width:97px，高度height:22px，并在每一個a之間使用margin-left:2px;形式了左側的外邊距為2px。

　　display屬性是css中對對象顯示模式操作的一個屬性，主要用于改變對象的顯示方式。在css中，所有對象都有自己預設的顯示方式，如a與span等對象，它們預設為一種行間内聯對象，顯示時它們不會影響其它任何對象的顯示，如當應用span之後，span之後的内容會自動排在span的右邊，像一段文本一樣，而div這類對象的預設顯示為塊狀對象，它們預設狀态下便占據了一行的空間，并像一個方塊一樣顯示在頁面中，通過display:block，将a也變成了塊狀對象。此外，display還有衆多使用方式将在以後逐漸了解到。

　預覽一下效果，已經像個導航的模樣了，不過滑鼠移上去沒有任何響應，這樣對于使用者體驗來說是非常不友好的，是以需要通過一些帶有互動響應的操作來提示使用者對象是可以點選的：

#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}

　　這次預覽效果，用滑鼠移上一個頻道，響應出現了，這樣我們的導航已經變得友好多了。