CSS入門（二）：建立導覽列
CSS入門（二）：建立導覽列
文∕趙英傑
本文將說明如何透過CSS樣式，把清單（list）文字調整成底下的顯示外觀，當成導覽列使用。
清單文字採用<ul>標籤定義清單的範圍，並使用<li>標籤定義個別項目，例如：
<ul> <li>首頁</li> <li>改造遊樂器</li> <li>聯繫我們</li> </ul>
將產生如下的清單文字：
底下是替每個清單文字加上超連結（<a>標籤）的HTML原始碼：
<ul> <li><a href="#">首頁</a></li> <li><a href="#">改造遊樂器</a></li> <li><a href="#">聯繫我們</a></li> </ul>
設定網頁內容的CSS樣式之前，我們通常會採用 <div> 標籤定義網頁版面的區塊範圍，例如，把上述的清單元素定義成名叫“navi”區塊，其HTML語法如下：
<div id="navi"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">改造遊樂器</a></li> <li><a href="#">聯繫我們</a></li> </ul> </div>
如此，該清單文字區域將能被稱做“navi”。首先把 navi 區域的寬度（width）設定成 650 像素（如果導覽列的項目不多，可以設定成窄一點的數值）：
<style type="text/css">
#navi {
width:650px;
}
</style>
然後指定 navi 區域中，ul 區域裡的 li 元素的樣式。請注意底下的寫法，只有符合這種階層架構的 li 元素（navi > ul > li ）會套用此樣式，網頁其他部分的<li>標籤樣式將維持不變：
#navi ul li {
/* 設定清單文字範圍的寬度 */
width:150px;
/* 讓清單文字居中對齊 */
text-align:center;
/* 去除清單文字前面的小圓點*/
list-style-type:none;
/* 設定背景色 */
background-color:#FF9900;
}
接著定義 navi 區域中，ul 區域裡的 li 元素後面的超連結文字（<a>標籤）的一般連結（link）、已查閱（visited）、滑入（hover）和作用中（active）的樣式，將它們全都設定成白色、沒有底線：
#navi ul li a:link {
color:#FFFFFF;
text-decoration:none;
}
#navi ul li a:visited {
color:#FFFFFF;
text-decoration:none;
}
#navi ul li a:hover {
/* 文字為白色 */
color:#FFFFFF;
/* 文字沒有裝飾（底線） */
text-decoration:none;
/* 背景為橙紅色 */
background-color:#FF6600;
}
#navi ul li a:active {
color:#FFFFFF;
text-decoration:none;
}
到此，navi 區域的清單文字將呈現下圖的外觀，如您所見，滑入超連結時產生的背景色變換效果，僅限於超連結文字本身：
為了讓navi > ul > ui > a超連結元素的背景色的顯示（display）模式能充滿整個區域，並且增加超連結文字與邊框的間隔（padding），請加入底下的CSS定義：
#navi ul li a {
/* 充滿整個區塊 */
display:block;
/* 擴大區域內部空間 */
padding:5px;
}
目前所設定的清單樣式將在 IE 6.0 瀏覽器顯示成：
最後透過float（浮動，請參閱《Dreamweaver 2004中文版網頁設計寶典》書本 9-29 頁「文字的環繞排式效果」）樣式，讓各個清單元素靠左對齊，並且使用border-bottom（邊框底部）樣式在每個清單元素底下加上灰色的裝飾線條，以及採用margin-right（右邊留白）樣式，讓每個清單元素的右邊都餘留1個像素寬。
#navi ul li{
width:150px;
text-align:center;
list-style-type:none;
background-color:#FF9900;
/* 讓各個清單元素靠左對齊 */
float:left;
/* 設定邊框底部的樣式 */
border-bottom:#CCCCCC solid 3px;
/* 右邊留白1像素 */
margin-right:1px;
}
最後的結果如下：
下載完成的範例檔
