導航（háng）條由放在一行表格單元裏的圖形圖像構成。由於（yú）人們不再（zài）推薦用表格來定位任何非表格（gé）的頁麵內容，所（suǒ）以很多製作Web的人正在尋找（新的）方法（fǎ），用結構化的XHTML標記（jì）和（hé）CSS格式來創建導航條。

一（yī）個簡單的CSS導航條
 
創建CSS樣式文本導航條的最簡（jiǎn）單解決（jué）方法也許就是把所有的鏈接都放（fàng）在一行（háng）文本裏，就像例A裏的一（yī）樣。

這種（zhǒng）方法看（kàn）起來（lái）很（hěn）合理也很直觀。但問題是，把所有的鏈接都放在一（yī）行文本裏（lǐ）就很難控製鏈接之（zhī）間以及前後的空白。所以，為了避免所有的鏈接都擠在一起，你最後通常（cháng）都不得不插入管（guǎn）道（垂直條）和非換行的空白（bái）字符作為分隔符。

就如下麵的代碼所示，結果（guǒ）很難是我們所要的清（qīng）晰、結構化的標示（shì）。

<div id="navbar1">
  <a href="link1a.html">Button 1</a>  |  <a
href="link2a.html ">Button 2</a>  |  <a href="link3a.html ">
Button 3</a>
</div>

如果為了（le）應用創建（jiàn）按（àn）鈕背景和滾動效果所需要的額外CSS樣式，你就（jiù）要加入<span>標簽，這樣的話標示（shì）會變得更加混亂。

基於列表的CSS導航條
創（chuàng）建（jiàn）CSS導航條的（de）另（lìng）一種方法（fǎ）是使用<ul>和<li>標簽，把鏈接作為無序（xù）列表（unordered list）來標示（shì）。

一眼（yǎn）看上去，對導航條使用無序列（liè）表似乎是不符合直觀感受的，因為我們習慣於把無序列（liè）表作為一個豎著（zhe）推起來的列表項目，每個前麵都放著一個Bullet。這似乎不（bú）符合導航條水平方（fāng）向的習慣。

但是，作為獨立列（liè）表項目集合的列表邏輯結構能夠適用（yòng）於導航條（tiáo）裏的（de）鏈接；而CSS的規則讓你能夠強製取代列表（biǎo）項（xiàng）目缺（quē）省的表現形式（shì），以消除Bullet並（bìng）安排（pái）列（liè）表項在頁麵之上而不是之下浮動。

知道了這一點，現在讓我們來看看例B，根據無（wú）序列表創建CSS樣式和XHTML標示（shì）的導航（háng）條。

下麵就是XHTML標示：

<div id="navbar2">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li><a href="link2.html ">Button 2</a></li>
<li><a href="link3.html ">Button 3</a></li>
</ul>
</div>

本專欄的固定讀者可能會認出（chū）這個（gè）例子是我用在另（lìng）一個CSS按鈕上的（de）同一個（gè）標示。這個技巧吸引人的一個地方是（shì），這個標（biāo）示對所有按鈕都是一樣的，無論它們是豎著堆成一列放在主體（tǐ）文本的一邊，還是水平放在頁麵（miàn）頂端的導航條（tiáo）裏。

下麵是把文字鏈接列表轉換成導航條的CSS代碼：

div#navbar2 {
    height: 30px;
    width: 100%;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color: #336699;
}
div#navbar2 ul {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
}
div#navbar2 li {
    list-style-type: none;
    display: inline;
}
div#navbar2 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}
div#navbar2 lia:link {
    color: #FFF:
}
div#navbar2 lia:visited {
    color: #CCC;
}
div#navbar2 lia:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #3366FF;
}

Div#navbar2樣式會（huì）設置包含有導航條鏈接的div的尺寸（cùn）和背景。

Div#navbar2 ul樣式包含（hán）有margin和padding聲明，以強製取代被分配給無序列表的缺省空（kōng）白（bái），並（bìng）設置文（wén）字（zì）的整體格式。White-space: nowrap聲（shēng）明會保證列表顯示在一個水平的行裏，即使瀏覽器的窗口太窄而無法顯示整個行。

這個技巧真正的秘密就在div#navbar2 li樣式裏（lǐ）。List-style-type: none聲明會刪除通常用來標記每個列表項目的Bullet；而display: inline聲明則能夠讓列表項（xiàng）目在頁麵上從左向（xiàng）右浮動，而不會讓每個項目顯示在單獨的行裏。

這個技巧的另外一個關鍵元素是div#navbar2 li a規則。Text-decoration: none聲（shēng）明會刪除鏈接常用的下劃線，而padding: 7px 10px聲明（míng）則（zé）用來控製導（dǎo）航條裏鏈接（之間）的空白。左側和右側間隙用來控製水（shuǐ）平間隔，而我們需要頂部和底（dǐ）部（bù）間隙（xì），讓（ràng）它們把滾（gǔn）動效果（以及按鈕的可點擊區域）的彩（cǎi）色背景充滿整個（gè）導（dǎo）航（háng）條。你還可以加（jiā）入（rù）左側和右側空白值，如果你想要在按鈕之間加入更多空白的話。

最後，:link, :visited和:hover偽類（pseudoclasse）的（de）規（guī）則會設置用於滾動效果的顏色變化。

你可以（yǐ）改（gǎi）變這（zhè）個基本的技巧，以創建很多不（bú）同的導航（háng）條效果，包括流行的“目錄選項卡”樣式（shì）。