按照傳統(tǒng)的方法，導(dǎo)航條由放在一行表格單元里的圖形圖像構(gòu)成。由于人們不再推薦用表格來定位任何非表格的頁面內(nèi)容，所以很多制作Web的人正在尋找（新的）方法，用結(jié)構(gòu)化的XHTML標(biāo)記和CSS格式來創(chuàng)建導(dǎo)航條。
一個簡單的CSS導(dǎo)航條創(chuàng)建CSS樣式文本導(dǎo)航條的最簡單解決方法也許是把所有的鏈接都放在一行文本里，像例A里的一樣。
這種方法看起來很合理也很直觀。但問題是，把所有的鏈接都放在一行文本里很難控制鏈接之間以及前后的空白。所以，為了避免所有的鏈接都擠在一起，你通常都不得不插入管道（垂直條）和非換行的空白字符作為分隔符。
如下面的代碼所示，結(jié)果很難是我們所要的清晰、結(jié)構(gòu)化的標(biāo)示。
Button 1 | Button 2 | Button 3
如果為了應(yīng)用創(chuàng)建按鈕背景和滾動效果所需要的額外CSS樣式，你要加入標(biāo)簽，這樣的話標(biāo)示會變得更加混亂。
基于列表的CSS導(dǎo)航條創(chuàng)建CSS導(dǎo)航條的另一種方法是使用和標(biāo)簽，把鏈接作為無序列表（unordered list）來標(biāo)示。
一眼看上去，對導(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標(biāo)示的導(dǎo)航條。
下面是XHTML標(biāo)示：
Button 1Button 2Button 3
本專欄的固定讀者可能會認(rèn)出這個例子是我用在另一個CSS按鈕上的同一個標(biāo)示。這個技巧吸引人的一個地方是，這個標(biāo)示對所有按鈕都是一樣的，無論它們是豎著堆成一列放在主體文本的一邊，還是水平放在頁面頂端的導(dǎo)航條里。
下面是把文字鏈接列表轉(zhuǎn)換成導(dǎo)航條的CSS代碼：
div#navbar2 { height: 30px; width: ; 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樣式會設(shè)置包含有導(dǎo)航條鏈接的div的尺寸和背景。
Div#navbar2 ul樣式包含有margin和padding聲明，以強制取代被分配給無序列表的缺省空白，并設(shè)置文字的整體格式。White-space: nowrap聲明會保證列表顯示在一個水平的行里，即使瀏覽器的窗口太窄而無法顯示整個行。
這個技巧真正的秘密在div#navbar2 li樣式里。List-style-type: none聲明會刪除通常用來標(biāo)記每個列表項目的Bullet；而display: inline聲明則能夠讓列表項目在頁面上從左向右浮動，而不會讓每個項目顯示在單獨的行里。
這個技巧的另外一個關(guān)鍵元素是div#navbar2 li a規(guī)則。Text-decoration: none聲明會刪除鏈接常用的下劃線，而padding: 7px 10px聲明則用來控制導(dǎo)航條里鏈接（之間）的空白。左側(cè)和右側(cè)間隙用來控制水平間隔，而我們需要頂部和底部間隙，讓它們把滾動效果（以及按鈕的可點擊區(qū)域）的彩色背景充滿整個導(dǎo)航條。你還可以加入左側(cè)和右側(cè)空白值，如果你想要在按鈕之間加入更多空白的話。
，:link, :visited和:hover偽類（pseudoclasse）的規(guī)則會設(shè)置用于滾動效果的顏色變化。
你可以改變這個基本的技巧，以創(chuàng)建很多不同的導(dǎo)航條效果，包括流行的“目錄選項卡”樣式。
上一篇：
增強網(wǎng)站的可訪問性
下一篇：
現(xiàn)網(wǎng)頁自動刷新