網站導航是網站中最重要的元素，是網站提供給用戶的最直接最方便的訪問網站內容的工具。網站導航從形式上主要由橫向導航、縱向導航、下拉及多級菜單導航等3中常見形式.
1. 橫向導航
使用CSS佈局的形式製作導航與Tbale佈局有很大的區別，網站除了頁面佈局之外，最重要的就是導航部分，在這一步應該先製作出個簡單明快的導航系統，然後一步一步的完成具有設計效果的最終導航。
如下代碼所示例
|
<ul id="nav"> <li><a href="#">首頁</a></li> <li><a href="#">文章</a></li> <li><a href="#">參考</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">論壇</a></li> <li><a href="#">聯繫</a></li> </ul> |
元素ul是CSS佈局中使用得很廣泛的一種元素，主要用來描述列表內容，每一個<ul></ul>表示其中的內容爲一個列表塊，塊中的每一條列表數據用<li></li>來描述.
如上代碼運行後所示，ul默認樣式就加上了圓點狀序號，而且默認爲從上至下排列.
對於簡單的 只有文字導航來說，相對於DIV的複雜實現，ul更爲靈活.
加入如下樣式
|
#nav li{ float:left; } #nav li a{ color:#000000; text-decoration:none; padding-top:4px; display:block; width:97px; height:22px; text-align:center; background-color:#ececec; margin-left:2px; } |
可以看到顯示效果如下
在樣式代碼中，指定了float:left;屬性，使得下一個對象貼進該對象的右邊。
導航的關鍵在於a連接對象的樣式控制，在這裏使用#nav li a{} 給li下的每一個a鏈接對象編寫了樣式.
display:block 使得a鏈接對象的顯示方式由一段文本改爲一個塊狀對象，和div的特性相同，div默認狀態下就是一個塊狀對象，而默認狀態下a鏈接對象只是顯示爲一個普通文本，這樣就沒有辦法使得a鏈接對象能夠象一個方塊狀按鈕一樣去運作，使用display:block之後，就可以用CSS的外邊距，內邊距、邊框等屬性給a鏈接.
再給樣式表中加上
|
#nav li a:hover{ background-color:#bbbbbb; color:#FFFFFF; } |
可以看到，鼠標移的時候，就會出現響應而改變顏色了。
爲了讓某一個頻道成爲一個當前所屬的頻道，這個頻道必須有一個和其他頻道不一樣的背景顏色。
|
<li><a href="#" id="current">首頁</a></li>
#nav li a#current{ background-color:#2788da; color:#FFFFFF; } #nav { height:26px; border-bottom:2px solid #2788da; } |
修改後即可實現，每當切換一個頻道頁面時，只需將id=”current“移到當前頻道所在a元素即可。
感冒了 人都沒力氣了，頭也暈暈的，今天就先到這了。...
