创建一个纯css的水平导航条怎么弄(用div和css做导航条)

导航栏由放置在一行表格单元格中的图形图像组成。因为不再推荐使用表格来定位任何非表格的页面内容，所以许多制作Web的人正在寻找用结构化XHTML标签和CSS格式创建导航栏的(新)方法。

一个简单的CSS导航栏

也许创建CSS样式的文本导航栏的最简单的解决方案是将所有链接放在一行文本中，就像示例a中一样。

这种方法看似合理直观。但问题是，很难控制链接之间以及所有链接放在一行文字前后的空格。所以，为了避免所有的链接挤在一起，

您通常最终不得不插入管道(竖线)和非换行符空白字符作为分隔符。

如下面的代码所示，结果很难是我们想要的清晰和结构化的标签。

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

如果要应用创建按钮背景和滚动效果所需的额外CSS样式，需要添加span标签，这会让logo更加混乱。

基于列表的CSS导航栏

创建CSS导航栏的另一种方法是使用ul和li标签，并将链接标记为无序列表。

乍一看，用无序列表做导航栏似乎不太直观，因为我们习惯用无序列表作为垂直推送的列表项，每个项前面都有一个项目符号。这似乎不太符合水平导航栏的习惯。

然而，作为一组独立列表项的列表的逻辑结构可以应用于导航栏中的链接；CSS的规则允许您强制替换列表项的默认表示，以消除项目符号，并将列表项排列在页面上方而不是下方。

考虑到这一点，让我们看看示例B，它基于无序列表创建了CSS样式和XHTML标记的导航栏。

以下是XHTML标记：

div id='navbar2'

ul

lia href='link1.html'Button 1/a/li

lia href='link2.html 'Button 2/a/li

lia 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样式包含有margin和padding声明，以强制取代被分配给无序列表的缺省空白，并设置文字的整体格式。

White-space: nowrap声明会保证列表显示在一个水平的行里，即使浏览器的窗口太窄而无法显示整个行。

这个技巧真正的秘密就在div#navbar2 li样式里。

List-style-type: none声明会删除通常用来标记每个列表项目的Bullet；而display: inline声明则能够让列表项目在页面上从左向右浮动，而不会让每个项目显示在单独的行里。

这个技巧的另外一个关键元素是div#navbar2 li a规则。Text-decoration: none声明会删除链接常用的下划线，

而padding: 7px 10px声明则用来控制导航条里链接（之间）的空白。左侧和右侧间隙用来控制水平间隔，而我们需要顶部和底部间隙，

让它们把滚动效果（以及按钮的可点击区域）的彩色背景充满整个导航条。你还可以加入左侧和右侧空白值，如果你想要在按钮之间加入更多空白的话。

最后，link,visited和：hover伪类（pseudoclasse）的规则会设置用于滚动效果的颜色变化。

你可以改变这个基本的技巧，以创建很多不同的导航条效果，包括流行的“目录选项卡”样式。