導(dǎo)航條由放在一行表格單元里的圖形圖像構(gòu)成。由于人們不再推薦用表格來定位任何非表格的頁面內(nèi)容，所以很多制作Web的人正在尋找（新的）方法，用結(jié)構(gòu)化的

XHTML標記和CSS格式來創(chuàng)建導(dǎo)航條。

一個簡單的CSS導(dǎo)航條
 
創(chuàng)建CSS樣式文本導(dǎo)航條的最簡單解決方法也許就是把所有的鏈接都放在一行文本里，就像例A里的一樣。

這種方法看起來很合理也很直觀。但問題是，把所有的鏈接都放在一行文本里就很難控制鏈接之間以及前后的空白。所以，為了避免所有的鏈接都擠在一起，你最

后通常都不得不插入管道（垂直條）和非換行的空白字符作為分隔符。

就如下面的代碼所示，結(jié)果很難是我們所要的清晰、結(jié)構(gòu)化的標示。

以下為引用的內(nèi)容：
<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>
如果為了應(yīng)用創(chuàng)建按鈕背景和滾動效果所需要的額外CSS樣式，你就要加入<span>標簽，這樣的話標示會變得更加混亂。

基于列表的CSS導(dǎo)航條
創(chuàng)建CSS導(dǎo)航條的另一種方法是使用<ul>和<li>標簽，把鏈接作為無序列表（unordered list）來標示。

一眼看上去，對導(dǎo)航條使用無序列表似乎是不符合直觀感受的，因為我們習(xí)慣于把無序列表作為一個豎著推起來的列表項目，每個前面都放著一個Bullet。這似乎不符合導(dǎo)航條水平方向的習(xí)慣。

但是，作為獨立列表項目集合的列表邏輯結(jié)構(gòu)能夠適用于導(dǎo)航條里的鏈接；而CSS的規(guī)則讓你能夠強制取代列表項目缺省的表現(xiàn)形式，以消除Bullet并安排列表項在頁面之上而不是之下浮動。

知道了這一點，現(xiàn)在讓我們來看看例B，根據(jù)無序列表創(chuàng)建CSS樣式和XHTML標示的導(dǎo)航條。

下面就是XHTML標示：

以下為引用的內(nèi)容：

<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按鈕上的同一個標示。這個技巧吸引人的一個地方是，這個標示對所有按鈕都是一樣的，無論它們是豎著堆成一列放在主體文本的一邊，還是水平放在頁面頂端的導(dǎo)航條里。

下面是把文字鏈接列表轉(zhuǎn)換成導(dǎo)航條的CSS代碼：

以下為引用的內(nèi)容：

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