css定義一個導覽列

導覽列是網頁中常用的模組，有很多方法可以實現，下面是用css實現的方法：　

     <div id="menu">
　　　<ul>
　　　　<li><a href="#">首頁</a></li>
　　　　<li class="menuDiv"></li>
　　　　<li><a href="#">部落格</a></li>
　　　　<li class="menuDiv"></li>
　　　　<li><a href="#">設計</a></li>
　　　　<li class="menuDiv"></li>
　　　　<li><a href="#">相簿</a></li>
　　　　<li class="menuDiv"></li>
　　　　<li><a href="#">論壇</a></li>
　　　　<li class="menuDiv"></li>
　　　　<li><a href="#">關於</a></li>
　　　</ul>
　　</div>

css代碼如下：
        #menu {padding:20px 20px 0 0}
　　/*利用padding:20px 20px 0 0來固定菜單位置*/
　　#menu ul {float:right;list-style:none;margin:0px;}
　　/*添加了float:right使得菜單位於頁面右側*/
　　#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
        /*加菜單間的豎線*/
        .menuDiv {width:1px;height:28px;background:#999}
        /*定義菜單連結的樣式*/
　　#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
　　#menu ul li a:hover{}

解釋一下：

  <ul></ul>、<li></li>這兩個HTML元素它們最主要的作用就是在HTML中以列表的形式來顯示一些資訊。

   當在HTML中定義為id="divID"時，在CSS對應的設定文法則是#divID{} ，如果在HTML中定義為class="divID"時，則在CSS中對應的設定文法是.divID

        #menu ul {list-style:none;margin:0px;}
　　list-style:none，這一句是取消列表前點，因為我們不需要這些點。
　　margin:0px，這一句是刪除UL的縮排，這樣做可以使所有的列表內容都不縮排。

　　#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
　　這裡的 float:left 的左右是讓內容都在同一行顯示，因此使用了浮動屬性(float)。
        margin:0 10px的作用就是讓列表內容之間產生一個20像素的距離(左：10px，右：10px)
        display:block;line-height:28px的作用是讓文字垂直置中

最終效果如：