導航條由放在一行表格單元內的圖形影像構成。由於人們不再推薦用表格來定位任何非表格的頁面內容，所以很多製作Web的人正在尋找（新的）方法，用結構化的
XHTML標記和CSS格式來建立導航條。
一個簡單的CSS導航條
創建CSS樣式文字導航條的最簡單解決方法也許就是把所有的連結都放在一行文字裡，就像例A裡的一樣。
這種方法看起來很合理也很直覺。但問題是，把所有的連結都放在一行文字裡就很難控制連結之間以及前後的空白。所以，為了避免所有的連結都擠在一起，你最
後通常都必須插入管道（垂直條）和非換行的空白字元作為分隔符號。
就如下面的程式碼所示，結果很難是我們所要的清晰、結構化的標示。
以下為引用的內容：
<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> |
如果為了套用建立按鈕背景和捲動效果所需的額外CSS樣式，你就要加入<span>標籤，這樣的話標示會變得更加混亂。
以清單為基礎的CSS導航條建立CSS導航條的另一種方法是使用<ul>和<li>標籤，把連結當作無序列表（unordered list）來標示。
一眼看上去，對導航條使用無序列表似乎是不符合直觀感受的，因為我們習慣於把無序列表作為一個豎著推起來的列表項目，每個前面都放著一個Bullet。這似乎不符合導航條水平方向的習慣。
但是，作為獨立列表項目集合的列表邏輯結構能夠適用於導航條裡的連結；而CSS的規則讓你能夠強制取代列表項目缺省的表現形式，以消除Bullet並安排列表項在頁面之上而不是之下浮動。
知道了這一點，現在讓我們來看看例B，根據無序列表建立CSS樣式和XHTML標示的導航條。
下面就是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> |
本專欄的固定讀者可能會認出這個例子是我用在另一個CSS按鈕上的同一個標示。這個技巧吸引人的一個地方是，這個標示對所有按鈕都是一樣的，無論它們是豎著堆成一列放在主體文字的一邊，還是水平放在頁面頂端的導航條裡。
下面是把文字連結清單轉換成導航條的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;
} |
