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

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

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

　　橫嚮導航

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

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

