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

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

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

就如下麵的代碼所示，結果很（hěn）難是我們所（suǒ）要的清晰、結構化（huà）的標示。

<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>

如（rú）果為了應用創建按鈕背景和滾動效果所需（xū）要的額外CSS樣式，你就要加入<span>標簽，這（zhè）樣的話（huà）標示會變得更加混（hún）亂。

基（jī）於（yú）列表（biǎo）的CSS導航條
創建CSS導航（háng）條的另一種方法是使用<ul>和<li>標簽，把鏈接作為（wéi）無序列表（unordered list）來（lái）標（biāo）示（shì）。

一眼（yǎn）看上（shàng）去，對導航（háng）條使用（yòng）無序列表（biǎo）似乎是不符合（hé）直觀感受的，因為我們習慣（guàn）於把（bǎ）無（wú）序列表作（zuò）為一個豎著推起來的（de）列表項目，每個前麵都放（fàng）著一個Bullet。這似乎不符合導航（háng）條（tiáo）水（shuǐ）平方向的習慣。

但是，作為獨（dú）立列表項目集合的列表邏輯（jí）結構能夠適用於導航條裏的鏈接；而CSS的（de）規則讓你能（néng）夠（gòu）強製取代列（liè）表項目（mù）缺省的表現形式，以消除（chú）Bullet並安排列表項在頁麵之（zhī）上而不是之下浮動。

知道了這一點，現（xiàn）在讓我們來看看例B，根據無序列（liè）表創建（jiàn）CSS樣式和XHTML標示的導航條（tiáo）。

下（xià）麵就是XHTML標（biāo）示：

<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>

本專欄的（de）固定讀者可能會（huì）認出這（zhè）個例子是我用在另一個CSS按（àn）鈕上的（de）同一個標示。這個（gè）技巧吸引（yǐn）人的一個地（dì）方是（shì），這個標示對所（suǒ）有按鈕都是一樣的，無（wú）論它們（men）是豎著堆成一（yī）列放在主（zhǔ）體文本（běn）的一邊（biān），還是水平放在頁麵頂端（duān）的導（dǎo）航（háng）條裏。

下麵（miàn）是把文字鏈（liàn）接列表轉換（huàn）成導航條的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樣（yàng）式會設（shè）置包含有導航條鏈接的div的尺寸（cùn）和（hé）背景。

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

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

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

最後（hòu），:link, :visited和:hover偽類（pseudoclasse）的規則會設置用於滾動效（xiào）果的顏色（sè）變化。

你（nǐ）可（kě）以改變這個基本的（de）技巧（qiǎo），以創（chuàng）建很多不同的導航條（tiáo）效果，包括流行的（de）“目錄選項卡”樣式。