CSS網頁布局入門教程9：用CSS設計網站導航——橫嚮導航

網站導航是網站中最重要的元素，是網站提供給使用者的最直接最方便的訪問網站內容的工具。網站導航從形式上主要由橫嚮導航、縱嚮導航、下拉及多級菜單導航第三種形式。
　　橫嚮導航　作為門戶網站的設計而言，主導航一般採用橫嚮導航。由於門戶網站下方文字較多，且每個頻道均有一同的樣式區分，因此在頂部固定一個地區設計統一風格且不佔用過多空間的導航是最理想的選擇，國內大部分門戶均採用這種形式。
　　縱嚮導航　目前在門戶網站的設計中已經不再流行，縱嚮導航更傾向於表達產品分類。
　　下拉導航　主要用於功能複雜的網站。在有些網站上也常見的。

　　總的來說導航的核心目標是設計一個簡便快捷的操作入口，協助使用者快速到達網站中的相應內容，設計上應當根據網站類型及內容的需求設計合理的導航形式。這裡我們將使用css對常用的三種導航形式進行設計，看看css是如何?這些樣式的。

　　橫嚮導航

　　使用css布局的形式製作導航與table布局有很大的區別，網站除了頁面配置之外，最重要的就是導航部分，在這一步應該先製作出一個簡單明快的導航系統，然後一步一步的完成具有設計效果的最終導航。在這裡我們先構想出了頂部的初級設計樣式，導航為一種橫嚮導航形式。在開始css的導航製作之前，先讓我們回想一下傳統的表格式而已的導航製作。如果表格式而已實現的導航形式，需要設計一個表格table。導航目前共有7個欄目組成，需要設計一個1行7列的表格，並在每一個單元<td></td>標籤中插入導航文字，然後　讓每個儲存格的文本置中,可以看一下實現代碼：

程式碼---[WWW.AA25.CN]
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><a href="http://:www.aa25.cn/index.asp">首頁</a></td>
<td align="center"><a href="http://:www.aa25.cn/Sort/List_4.html">DIV+CSS教程</a></td>
<td align="center"><a href="http://:www.aa25.cn/Sort/List_5.html">常用代碼</a></td>
<td align="center"><a href="http://:www.aa25.cn/Sort/List_6.html">水晶表徵圖</a></td>
<td align="center"><a href="http://:www.aa25.cn/Sort/List_7.html">幻燈圖片</a></td>
<td align="center"><a href="http://:www.aa25.cn/Sort/List_10.html">軟體下載</a></td>
<td align="center"><a href="http://:www.aa25.cn/css2/">CSS2.0實用手冊</a></td>
</tr>
</table>
</body>

　　通過代碼可以看到，設定了表格的寬高，並把邊框邊距設為0以便於隱藏表格線，然後讓第個儲存格的文本對齊為置中，就實現了簡單導航，這裡的要點在於設計了一個與導航形式類似的資料表，將導航交往每一格資料中。再來看一下如何用css來設計同樣的導航系統。
　　DIV+CSS布局的核心是實現了表現和內容的分離，先來認識一下內容部分的代碼編寫方式：

程式碼---[WWW.AA25.CN]
<ul id="nav">
<li><a href="http://:www.aa25.cn/index.asp">首頁</a></li>
<li><a href="http://:www.aa25.cn/Sort/List_4.html">DIV+CSS教程</a></li>
<li><a href="http://:www.aa25.cn/Sort/List_5.html">常用代碼</a></li>
<li><a href="http://:www.aa25.cn/Sort/List_6.html">水晶表徵圖</a></li>
<li><a href="http://:www.aa25.cn/Sort/List_7.html">幻燈圖片</a></li>
<li><a href="http://:www.aa25.cn/Sort/List_10.html">軟體下載</a></li>
<li><a href="http://:www.aa25.cn/css2/">CSS2.0實用手冊</a></li>
</ul>

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

　　，作為一種列表型內容，ul預設樣式就中上了圓點狀序號，而且預設為從上至下排列。為什麼我們的導航系統要使用ul元素？實際上導航也是種列表，可以理解為導航列表，每一個列表資料就是導航中的一個導航頻道，同樣也可以使用二層嵌套的div來實現一個導航的代碼結構，但相對於ul列表來說，div顯得過於複雜，ul的使用還是應當重點放在塊狀型地區，而對於簡單的只有文字的導航來說，ul就更為輕巧靈活。
　　在代碼中我們也為ul定義了一個id叫nav，接下來為這個ul及其下面的對象編寫代碼讓它實現需要的導航效果。

　　把第一段樣式編寫給了ul下的li對象，我們希望列表中的每一個一清單項目不再遵行其預設的從上至下的排列，因此給#nav li指定了foat:left;的屬性，如同div的foat:left;一樣，也是通過浮動定位的原理使得自身向左浮動，從而使下一個對象貼緊該對象的右邊，最終所有的li都具有了向左浮動的我，從而形式了橫向的排列形式。
　　導航的關鍵在於a連結化物件的樣式控制，在這裡使用#nav li a{}給li下的每一個a連結化物件編寫了樣式：
　　display:block是這裡的重點，它使得a連結化物件的顯示方式由一段文本改為一個塊狀對象，和idv的特性相同，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還有眾多使用方式將在以後逐步瞭解到。 <br /><style> #nav li { float:left;} #nav li a { color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;} </style><ul id="nav"><li>首頁</li><li>DIV+CSS教程</li><li>常用代碼</li><li>水晶表徵圖</li><li>幻燈圖片</li><li>軟體下載</li><li>CSS2.0實用手冊</li></ul><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

　預覽一下效果，已經像個導航的模樣了，不過滑鼠移上去沒有任何響應，這樣對於使用者體驗來說是非常不友好的，因此需要通過一些帶有互動反饋的操作來提示使用者物件是可以點擊的：
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
　　這次預覽效果，用滑鼠移上一個頻道，響應出現了，這樣我們的導航已經變得友好多了。 <br /><style> #nav li { float:left;} #nav li a { color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;} #nav li a:hover { background-color:#bbbbbb; color:#ffffff;} </style><ul id="nav"><li>首頁</li><li>DIV+CSS教程</li><li>常用代碼</li><li>水晶表徵圖</li><li>幻燈圖片</li><li>軟體下載</li><li>CSS2.0實用手冊</li></ul><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

初級導航模組完成，不妨對比一下使用表格式布局和css而已在這方面的優劣，你會發現，css的優勢是顯而易見的。
　　註：從本節開始不再寫出具體詳細的製作步驟，如果你對其中的部分不明白，可以在本節留言；對css掌握不熟練的朋友，建議再溫習前幾節，平時多用dreamweaver做一些執行個體，慢慢會逐步掌握的。