css制作导航栏_03.docVIP

导航条由放在一行表格单元里的图形图像组成。因为人们不再举荐用表格来定位任何非表格的页面内容，所以良多建造Web的人正在寻找（新的）体例，用结构化的XHTML标识表记标帜和CSS款式来建立导航条。 一个简单的CSS导航条 建立CSS样式文本导航条的最简单解决体例也许就是把所有的链接都放在一行文本里，就像例A里的一样。 这种体例看起来很合理也很直不美观。但问题是，把所有的链接都放在一行文本里就很难节制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一路，你最后凡是都不得不插入管道（垂直条）和非换行的空白字符作为分隔符。 就如下面的代码所示，功效很难是我们所要的清楚、结构化的标示。 Button 1 | href=link2a.html Button 2 | Button 3 若是为了应用建立按钮布景和滚动结果所需要的额外CSS样式，你就要插手标签，这样的话标示会变得加倍杂乱。 基于列表的CSS导航条 建立CSS导航条的另一种体例是利用 和 标签，把链接作为无序列表（unordered list）来标示。 一眼看上去，对导航条利用无序列表似乎是不合适直不美观感应感染的，因为我们习惯于把无序列表作为一个竖着推起来的列表项目，每个前面都放着一个Bullet。这似乎不合适导航条水平标的目标的习惯。 可是，作为自力列表项目集结的列表逻辑结构能够合用于导航条里的链接；而CSS的法则让你能够强制取代列表项目缺省的表示形式，以消弭Bullet并安枚举表项在页面之上而不是之下浮动。 知道了这一点，此刻让我们来看看例B，按照无序列表建立CSS样式和XHTML标示的导航条。 下面就是XHTML标示： Button 1 Button 2 Button 3 本专栏的固定读者可能会认出这个例子是我用在另一个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）的法则会设置用