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