导航条由放在【yóu fàng zài】一行表【yī háng biǎo】格单元🗯里的图🐮形图像构成🐩。由于人➡们不再推荐用表格来定位任何非表【hé fēi biǎo】👬格的页面内容，所以很【suǒ yǐ hěn】🕷多制作【duō zhì zuò】🦒Web的人正【de rén zhèng】在寻找【zài xún zhǎo】（新的）方法，用结构化的XHTML标记和【biāo jì hé】🍗CSS格式来【gé shì lái】创建导🏦航条。

一个简单的【dān de】👦CSS导航条【dǎo háng tiáo】
 
创建CSS样式文【yàng shì wén】本导航🕞条的最简单解决方法【jué fāng fǎ】也许就【yě xǔ jiù】是把所☔有的链🚨接都放在一行文本里🔅，就像例🚑A里的一【lǐ de yī】样。

这种方【zhè zhǒng fāng】🎋法看起来很合理也很【lǐ yě hěn】直观🚾。但问题【dàn wèn tí】是【shì】，把所有的链接【de liàn jiē】🌄都放在🖇一行文【yī háng wén】🍌本里就很难控制链接【zhì liàn jiē】之间以及前后的空白🎆。所以【suǒ yǐ】，为了避🤢免所有的链接【de liàn jiē】🌄都挤在一起，你最后🌱通常都🎴不得不插入管⚪道【dào】（垂直条）和非换【hé fēi huàn】🐅行的空白🎆字符【fú】作为分隔符【fú】。

就如下🧡面的代码所示，结果很【jié guǒ hěn】难是我【nán shì wǒ】💳们所要的清晰【de qīng xī】🥟、结构化的标示。

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

如果为🈂了应用【le yīng yòng】🎏创建按🏊钮背景【niǔ bèi jǐng】和滚动【hé gǔn dòng】效果所需要的额外CSS样式🏦，你就要【nǐ jiù yào】加入【jiā rù】🗽<span>标签【biāo qiān】📅，这样的话标示会变得更加混乱。

基于列表的👏CSS导航条【dǎo háng tiáo】📫
创建🎁CSS导航条【dǎo háng tiáo】📫的另一【de lìng yī】种方法是使用<ul>和【hé】<li>标签【biāo qiān】，把链接🔈作为无【zuò wéi wú】序列表🤕（unordered list）来标示。

一眼看【yī yǎn kàn】🏀上去，对导航条使用【tiáo shǐ yòng】无序列【wú xù liè】表【biǎo】✖似乎是【sì hū shì】不符📵合直观感受的💶，因为我们习惯🍛于把无序列【wú xù liè】表【biǎo】✖作为一个竖着【gè shù zhe】推起来的列表【biǎo】项目🎊，每个前👴面都放【miàn dōu fàng】📤着一个Bullet。这似乎【zhè sì hū】不符合【bú fú hé】导航条水平方向的习🌒惯。

但是🍄，作为独🥓立列表项目【biǎo xiàng mù】集合的列表逻辑【biǎo luó jí】🈷结构能够适用于导航条里的🙄链接【liàn jiē】；而CSS的规则【de guī zé】让你能【ràng nǐ néng】👆够强制🔠取代列😸表项目【biǎo xiàng mù】缺省的【quē shěng de】表现形【biǎo xiàn xíng】式，以消除Bullet并安排【bìng ān pái】🕠列表项在页面之上而【zhī shàng ér】不是之🕵下浮动。

知道了【zhī dào le】这一点，现在让【xiàn zài ràng】🔚我们来【wǒ men lái】看看例🆎B，根据无序列表🤑创建CSS样式和【yàng shì hé】🗞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>

本专栏【běn zhuān lán】的固定【de gù dìng】读者可能会认👄出这个例子是【shì】😿我用在另一个CSS按钮上的同一【de tóng yī】个标示【shì】⏪。这个技🍝巧吸引【qiǎo xī yǐn】人的一个地方🏬是【shì】，这个标示【shì】⏪对所有按钮都是【shì】一🎪样的【yàng de】，无论它🐁们是【shì】竖着堆成🌍一列放在主体【zài zhǔ tǐ】文本的一边【yī biān】，还是水【hái shì shuǐ】平放在页面顶🍁端的导航条里【háng tiáo lǐ】。

下面是【xià miàn shì】把文字🐒链接列表转换【biǎo zhuǎn huàn】成导航💓条的【tiáo de】🌘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样式会设置包🈯含有导【hán yǒu dǎo】📏航条链【háng tiáo liàn】接的✅div的尺寸和背景【hé bèi jǐng】。

Div#navbar2 ul样式包含有🐧margin和padding声明🙌，以强制取代被【qǔ dài bèi】分配给⛷无序列【wú xù liè】表的缺省空白💤，并设置🦂文字的【wén zì de】整体格【zhěng tǐ gé】式。White-space: nowrap声明会🏯保证列【bǎo zhèng liè】表显示【biǎo xiǎn shì】在一个🍍水平的🌩行里，即使【jí shǐ】浏览器的窗口太窄而无法显【wú fǎ xiǎn】🆕示整个【shì zhěng gè】行。

这个技【zhè gè jì】👲巧真正的秘密【de mì mì】就在【jiù zài】div#navbar2 li样式里。List-style-type: none声明会删除通常用来【cháng yòng lái】🤓标记每😌个列表项目的Bullet；而display: inline声明则【shēng míng zé】能够让列表项目在页面上从左向右🧡浮动，而不会⏹让每个【ràng měi gè】🥃项目显示在单【shì zài dān】🤗独的行【dú de háng】🐉里。

这个技巧的另【qiǎo de lìng】外一个【wài yī gè】🦄关键元素是div#navbar2 li a规则【guī zé】。Text-decoration: none声明会删除链接常用【jiē cháng yòng】的下划【de xià huá】🎞线【xiàn】，而padding: 7px 10px声明则用来控制导航条里链🐢接（之间🤳）的空白。左侧和【zuǒ cè hé】右侧间隙用来控制水平间隔🈸，而我们【ér wǒ men】🎧需要顶部和底【bù hé dǐ】部间隙🥝，让它们【ràng tā men】把滚动🐂效果【xiào guǒ】（以及按🔺钮的可【niǔ de kě】点击区域🍠）的彩色背景充【bèi jǐng chōng】满整个【mǎn zhěng gè】导航条。你还可以加入左侧和【zuǒ cè hé】右侧空【yòu cè kōng】🦓白值，如果你想要在🚩按钮之🥅间加入🏎更多空🚅白的话。

最后🥕，:link, :visited和【hé】:hover伪类（pseudoclasse）的规则🎋会设置用于滚【yòng yú gǔn】动效果🏭的颜色【de yán sè】变化。

你可以改变这个基本【gè jī běn】🌖的技巧，以创建【yǐ chuàng jiàn】🐍很多不同的导航条效【háng tiáo xiào】果，包括流⏱行的💴“目录选【mù lù xuǎn】项卡【xiàng kǎ】”样式🐎。