CSS網頁版面入門教學9：用CSS設計網站導航－橫向導航_基礎教學

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

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

　　橫向導航

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


    

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