本文向大家介紹一下CSS橫向導航的實現方法，首先讓我們來看一下網站導航的概念，網站導航是網站中最重要的元素，是網站提供給用戶的最直接最方便的訪問網站內容的工具。網站導航從形式上主要由橫向導航、縱向導航、下拉及多級菜單導航等三種形式。

CSS設計網站導航——CSS橫向導航

網站導航是網站中最重要的元素，是網站提供給用戶的最直接最方便的訪問網站內容的工具。網站導航從形式上主要由橫向導航、縱向導航、下拉及多級菜單導航等三種形式。

◆橫向導航　作為門戶網站的設計而言，主導航一般采用橫向導航。由于門戶網站下方文字較多，且每個頻道均有一同的樣式區分，因此在頂部固定一個區域設計統一風格且不占用過多空間的導航是最理想的選擇，國內大部分門戶均采用這種形式。

◆縱向導航　目前在門戶網站的設計中已經不再流行，縱向導航更傾向于表達產品分類。

◆下拉導航　主要用于功能復雜的網站。在有些網站上也常見的。

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

CSS橫向導航

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

<tablewidthtablewidth="100%"border="0"cellpadding="0"cellspacing="0"> 
<tr> 
<tdaligntdalign="center">
<ahrefahref="http://:www.aa25.cn/index.asp">主頁</a></td> 
<tdaligntdalign="center"> 
<ahrefahref="http://:www.aa25.cn/Sort/List_4.html">DIV+CSS教程</a></td> 
<tdaligntdalign="center"> 
<ahrefahref="http://:www.aa25.cn/Sort/List_5.html">常用代碼</a></td> 
<tdaligntdalign="center"> 
<ahrefahref="http://:www.aa25.cn/Sort/List_6.html">水晶圖標</a></td> 
<tdaligntdalign="center"> 
<ahrefahref="http://:www.aa25.cn/Sort/List_7.html">幻燈圖片</a></td> 
<tdaligntdalign="center"> 
<ahrefahref="http://:www.aa25.cn/Sort/List_10.html">軟件下載</a></td> 
<tdaligntdalign="center"> 
<ahrefahref="http://:www.aa25.cn/css2/">CSS2.0實用手冊</a></td> 
</tr> 
</table> 
</body> 
 

 通過代碼可以看到，設定了表格的寬高，并把邊框邊距設為0以便于隱藏表格線，然后讓第個單元格的文本對齊方式為居中，就實現了簡單導航，這里的要點在于設計了一個與導航形式類似的數據表，將導航裝入每一格數據中。

◆再來看一下如何設計CSS橫向導航系統。

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

<ulidulid="nav"> 
<li><ahrefahref="http://:www.aa25.cn/">主頁</a></li> 
<li><ahrefahref="http://:www.aa25.cn/">DIV+CSS教程</a></li> 
<li><ahrefahref="http://:www.aa25.cn">常用代碼</a></li> 
<li><ahrefahref="http://:www.aa25.cn/">水晶圖標</a></li> 
<li><ahrefahref="http://:www.aa25.cn/">幻燈圖片</a></li> 
<li><ahrefahref="http://:www.aa25.cn/">軟件下載</a></li> 
<li><ahrefahref="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就更為輕巧靈活。#p#

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

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

CSS橫向導航的關鍵在于a鏈接對象的樣式控制，在這里使用#navlia{}給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還有眾多使用方式將在以后逐步了解到。

 
<style> 
#navli{float:left;}  
#navlia{color:#000000;text-decoration:none;  
padding-top:4px;display:block;width:120px;  
height:22px;text-align:center;  
background-color:#ececec;margin-left:2px;}  
</style> 
 
<ulidulid="nav"> 
<li><ahrefahref="/index.asp">主頁</a></li> 
<li><ahrefahref="/Sort/List_4.html">DIV+CSS教程</a></li> 
<li><ahrefahref="/Sort/List_5.html">常用代碼</a></li> 
<li><ahrefahref="/Sort/List_6.html">水晶圖標</a></li> 
<li><ahrefahref="/Sort/List_7.html">幻燈圖片</a></li> 
<li><ahrefahref="/Sort/List_10.html">軟件下載</a></li> 
<li><ahrefahref="/css2/">CSS2.0實用手冊</a></li> 
</ul> 
 

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

#navlia:hover{background-color:#bbbbbb;color:#ffffff;}  
 

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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<style> 
#nav{width:860px;margin:0auto;background:#ccc}  
#navli{float:left;}  
#navlia{color:#000000;text-decoration:none;  
padding-top:4px;display:block;width:120px;height:22px;  
text-align:center;background-color:#ececec;margin-left:2px;}  
#navlia:hover{background-color:#bbbbbb;color:#ffffff;}  
</style> 
</head> 
<body> 
<ulidulid="nav"> 
<li><ahrefahref="/index.asp">主頁</a></li> 
<li><ahrefahref="/Sort/List_4.html">DIV+CSS教程</a></li> 
<li><ahrefahref="/Sort/List_5.html">常用代碼</a></li> 
<li><ahrefahref="/Sort/List_6.html">水晶圖標</a></li> 
<li><ahrefahref="/Sort/List_7.html">幻燈圖片</a></li> 
<li><ahrefahref="/Sort/List_10.html">軟件下載</a></li> 
<li><ahrefahref="/css2/">CSS2.0實用手冊</a></li> 
</ul> 
</body> 
</html> 
 

 注：許多朋友不知道怎么居中，所以特意改成居中的形式，初級導航模塊完成，不妨對比一下使用表格式布局和css而已在這方面的優劣，你會發現，css的優勢是顯而易見的。

【編輯推薦】

1. 編碼過程中靈活使用CSS注釋
2. CSS布局浮動(float)和定位(position)屬性的區別
3. 設置CSS表格與CSS表單的樣式
4. 深入剖析CSS排版思想及其用法
5. 鼠標經過時改變DIV背景顏色的三種途徑