导航栏由放置在一行表格单元格中的图形图像组成。由于不再推荐使用表格来定位任何非表格页面内容，许多Web制作者正在寻找用结构化XHTML标记和CSS格式创建导航栏的(新)方法。
一个简单的CSS导航栏
也许创建CSS样式的文本导航栏的最简单的解决方案是将所有链接放在一行文本中，就像示例a中一样。
这种方法看似合理直观。但问题是，将所有链接放在一行文本中，很难控制链接之间及其前后的空白。所以，为了避免所有的链接都拥挤在一起，你通常不得不插入管道(竖线)和非换行符作为分隔符。
如下面的代码所示，结果很难是我们想要的清晰和结构化的标记。
div id='navbar1 '
a href='link1a.html '按钮1/a | a
' href='link2a.html '按钮2/a | a href='link3a.html '
按钮3/a
/div
如果您想应用创建按钮背景和滚动效果所需的额外CSS样式，您应该添加span标记，这将使徽标更加混乱。
基于列表的CSS导航栏
创建CSS导航栏的另一种方法是使用ul和li标签将链接标记为无序列表。
乍一看，用无序列表做导航栏似乎不太直观，因为我们习惯用无序列表作为垂直向上推的列表项，每个项前面都有一个项目符号。这似乎不太符合导航条横向的习惯。
但是，列表的逻辑结构是一组独立的列表项，可以应用于导航栏中的链接；CSS的规则允许您强制替换列表项的默认表示，以消除项目符号，并将列表项排列在页面上方而不是下方。
了解了这一点，现在让我们看看示例B，它基于无序列表创建了CSS样式和XHTML标记的导航栏。
以下是XHTML标记：
div id='navbar2 '
保险商实验所
lia href='link1.html '按钮1/a/li
lia href='link2.html '按钮2/a/li
lia href='link3.html '按钮3/a/li
/ul
/div
经常阅读本专栏的读者可能会认为这个例子与我在另一个CSS按钮上使用的标志相同。这种技术的一个吸引人的地方是，这个标志对于所有的按钮都是一样的，无论它们是在主文本的一侧垂直堆叠成一行，还是在页面顶部的导航栏中水平堆叠。
下面是将文本链接列表转换成导航栏的CSS代码：
div#navbar2 {
高度：30px
宽度：100%；
边框顶部：纯色# 000 1px
边框-底部：纯色# 000 1px
背景色：# 336699；
}
div#navbar2 ul {
边距：0px
填充：0px
字体系列：Arial，helvetica，sans-serif；
字号：小；
颜色：# FFF；
行高：30px
空白：nowrap
}
div#navbar2 li {
list-style-type:无；
显示：内嵌；
}
div#navbar2阿利
文字-装饰：无；
填充：7px 10px
颜色：# FFF；
}
div#navbar2 lia:link {
颜色：#FFF:
}
div#navbar2 lia:已访问{
颜色：# CCC
}
div#navbar2 lia:悬停{
字体粗细：粗体；
颜色：# FFF；
背景色：# 3366FF
}
Div#navbar2样式设置包含导航栏链接的Div的大小和背景。
Div#navbar2 ul样式包含边距和填充声明，以强制替换分配给无序列表的默认空白，并设置文本的整体格式。空白：nowrap声明将确保列表以水平线显示，即使浏览器窗口太窄而无法显示整行。
这个技能的真正秘密在div#navbar2李式。List-style-type: none声明删除项目符号；它通常用于标记每个列表项；display: inline语句可以使列表项在页面上从左到右浮动，而不是每个项显示在单独的一行中。
这项技术的另一个关键要素是div#navbar2阿利规则。Text-decoration: none语句删除链接的普通下划线，而padding: 7px 10px语句用于控制导航栏中链接的空白。左右间隙用于控制水平间距，而我们需要上下间隙用滚动效果的颜色背景填充整个导航栏(以及按钮的可点击区域)。如果您想在按钮之间添加更多空白，也可以添加左右空白值。
最后，link、visited和：hover伪类的规则将设置用于滚动效果的颜色变化。
您可以更改这一基本技术来创建许多不同的导航栏效果，包括流行的“目录选项卡”样式。
