我們制作導(dǎo)航條按照傳統(tǒng)的方法由放在一行表格單元里的圖形圖像構(gòu)成，或者由單元格內(nèi)的文字所組成，由于人們不再推薦用表格來定位任何非表格的頁面內(nèi)容，所以很多制作Web的人正在尋找新的方法，用結(jié)構(gòu)化的XHTML標(biāo)記和CSS格式來創(chuàng)建導(dǎo)航條。這樣的創(chuàng)建方式也更對搜索引擎蜘蛛友好，這對我們來說是非常重要的。

　　創(chuàng)建CSS樣式文本導(dǎo)航條的最簡單解決方法也許就是把所有的鏈接都放在一行文本里，這種方法看起來很合理也很直觀。但問題在于把所有的鏈接都放在一行文本里就很難控制鏈接之間以及前后的空白。所以，為了避免所有的鏈接都擠在一起，你最后通常都不得不插入一些東西或者非換行的空白字符作為分隔，讓這些文字分離開來，不至于混在一起。但這樣有意義嗎？

　　現(xiàn)在我們正常的做法是應(yīng)用ul、li標(biāo)簽把鏈接作為無序列表（unordered list）來標(biāo)識。再應(yīng)用CSS樣式對其進(jìn)行控制，按我們預(yù)想的形式在容器中顯示出來。對導(dǎo)航條使用無序列表似乎是不符合直觀感受的，因為我們習(xí)慣于把無序列表作為一個豎著推起來的列表項目，每個前面都放著一個列表預(yù)設(shè)標(biāo)記。這似乎不符合導(dǎo)航條水平方向的習(xí)慣。但作為獨立列表項目集合的列表邏輯結(jié)構(gòu)能夠適用于導(dǎo)航條里的鏈接；而CSS的規(guī)則讓你能夠強制取代列表項目缺省的表現(xiàn)形式，以消除它們并安排列表項在容器內(nèi)按水平方向排列，而不是從上而下的規(guī)則。現(xiàn)在讓我們來看看實例，根據(jù)無序列表創(chuàng)建CSS樣式和XHTML標(biāo)簽的橫向?qū)Ш讲藛巍?br />
　　我們看看下面的xhtml代碼：


　　我們再看看關(guān)于這段xhtml的CSS代碼：


　　我們來看看上面的代碼的運行效果：

　　或許你并不能完全理解這些代碼都是什么意義，都用來控制什么，達(dá)到什么效果。
　　下面我們來解析上面的代碼：

　　xhtml代碼首先定義了一個容器div id="nav"。這個容器用來放置這個無序列表橫向?qū)Ш讲藛蔚膬?nèi)容，但也有人認(rèn)為這個容器是多余的，直接定義ul id="nav"就可以了。我們不建議你這樣做，要知道我們的站點是可擴展的，我們要為將來的擴展留有足夠的余地，假如我們的導(dǎo)航樣式設(shè)計的更加復(fù)雜，僅有的ul是不能滿足需要的。我們定義這樣的容器也更符合我們編寫代碼的習(xí)慣。

　　#nav定義了窗口的寬高及背景顏色。#nav ul包含有margin和padding聲明，字體及顏色聲明。line-height: 30px;是非常重要的定義，假如取消掉行高的定義，我們的鏈接文字垂直居中就可能受到影響。white-space: nowrap;或許大家并不能理解有什么作用，它定義了強制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br對象。

　　#nav li中的list-style-type: none;去除了列表項所使用的預(yù)設(shè)標(biāo)記。使其更象是純文本，而沒有列表標(biāo)記。display: inline;聲明則能夠讓列表項目在頁面上從左向右浮動，而不會讓每個項目顯示在單獨的行里而從上至下的排列。這兩項聲明是我們實現(xiàn)無序列表橫向?qū)Ш讲藛蔚囊�害�?br />　　#nav li a和#nav li a:hover定義了鏈接的樣式。其中的內(nèi)容就不作深入了，唯一要講的就是：padding: 7px 10px;它是用來控制鏈接文字之間的空白間隔的，你可以試著改變數(shù)值試試看。

　　至此，無序列表創(chuàng)建css橫向?qū)Ш讲藛蔚墓ぷ骶徒Y(jié)束了。更多的內(nèi)容歡迎你關(guān)注我們的網(wǎng)站。