在CSS中，一个很少被提及的优点就是能够层叠背景图片，允许它们之间通过"滑动"和层叠来创造出特定的效果。CSS2目前的状况要求每个背景图片都分别有与之相对应的HTML元素。在通常情况下，组成通用界面的典型标记已经提供了一些我们可以使用的元素。

其 中的一个例子就是标签导航栏（tabbed navigation）。随着[标签导航]的使用率不断上升，它已逐渐成为了站点导航的主流方式，现在是时候来讨论一下对标签导航栏的控制了。既然CSS 被广泛地支持，我们就可以用它来优化站点标签的质地和外观。你很可能会想到，CSS可以驯服平坦的无序列表。可能你已经见到过一些样式化为标签的列表，比如下面这个：

如果我们采用与上面完全相同的标记，但却把它们变成了下面的样子，该如何去做呢：

在这里，仅仅用非常简单的样式就可以实现。

创新之道

我所见过的许多基于CSS的标签都受到了一些共同特性的限制：单色的矩形块，可能在当前标签上加了轮廓，或者边框；在鼠标掠过时改变矩形的颜色等等。这就是CSS能为我们提供的全部吗？仅仅是成堆的单色方块？

早 在CSS被广泛采用之前，我们就能够看到许多在导航设计上的创新。创新的外形，可控的色彩混合，以及对现实世界中物力表面的模仿。但是这些设计通常都依赖 于将文字内嵌于图片的复杂结构或多层的表格嵌套。编辑标签上的文字或者改变它们的顺序都会引起繁重的工作。文字的缩放更是不可能，不然就会引起严重的页面 布局错误。

单纯的文字导航要比嵌入文字的图片式导航更加易于管理并且加载更迅速。而且，虽然我们可以给每个图片都加上alt属性， 但是单纯的文字导航更具有可读性，因为对于视力不好读者，这些文字都是可缩放的。也正因为如此，由CSS样式化的文字的导航栏再次成为网页设计者们的选 择，并不足为奇。但是到目前为止，大多数基于CSS的标签设计，只是后退了一步，回到了我们曾经的做法--当然这些是无法被优秀的设计作品采用的。采用一 项新技术（比如CSS）应该能够让我们创作出一些更好的东西，而不至于失去先前的表格或者图片式标签所能表现的质地。

“滑动门”技术

只 要我们用两片分离的背景图片，就能够创造出精美的手工界面，并且具有高度的灵活性，可随文字的缩放而自动适应。试想一下，左右两幅图片，就像左右两扇滑动 门一样，构成了一扇完整的门。将这两扇门推近，重叠的部分多一些，就可以适应一个比较狭窄的空间，而如果将它们拉开，重叠的部分减少，就可以满足较宽的空 间，正如下图所示：

在 这个例子中，一幅图片盖住了另一幅的某些部分。假设每幅图片的边缘都有些独特的形状，例如标签的圆角，我们不希望这些边缘被它前方图片盖住。为了防止这种 情况发生，我们将放置在前方（以左边为例）的图片制作得尽可能地窄，但是保证它能够完整地显示出边缘上的独特形状。以圆角标签为例，我们将前方的图片制作 到仅与圆角的部分同宽即可：

如 果目标物由于不同文字或文字类型而变得比上图所示的宽度更大,那么这两幅图就会被拉开,出现一个非常不美观的缺口。 这时就需要我们对可能的扩展性进行预测。 在用户缩放字体的时候，目标物会增大多少？实际上，我们至少应该为文字的缩放而作出300%的可伸缩性准备。 我们需要将背景图扩大到足够弥补缺口。 对于这些例子，我们将把后面的图像 ( 右边) 制作为 400 x150 图素, 前面的图像制作为 9 x150 图素。

要记住，背景图片只能在它所应用的元素的“门前”出现 [内容区域+补丁区域(padding)]。 这两幅图被分别安放到他们所应用的元素外侧。 而这些背景的可见部分交叠在一起构成了一个完整的标签样式:

如果标签被扩大的话，这两幅图就分别向两侧滑动，每一幅都更多地被显示出来，以满足更宽的“门”的需求。

就 比如我用Photoshop制作了两幅平滑的，略带3D效果的个性化标签图片，正如文章开头的图片所示。在另一个色彩明亮一点的版本中，这两幅图片的填充 色变的更亮，边缘的阴影更暗，这是为“当前”标签准备的。为了给上面所述的技术作示范，我们需要扩展标签背景的覆盖区域，并把它切成了两片:

那个明亮一些的版本也需要这样做，一旦这些图片都作好了（1, 2, 3, 4），我们就可以进入CSS标记部分了。

创建标签

当发现了如何利用CSS创建横向列表后，你可能会注意到，至少有两种方法能够将一组列表排列成一行。一种是用内嵌方框，另一种是利用浮动属性。它们各有利弊。而且每一种方法都会遇到CSS中非常奇怪的方面，很容易让人迷惑。

第一种方法，也是最常用的方法，就是将列表的项目属性设置为“内嵌”，这种方法由于非常简便而具有相当的吸引力。然而，对于我们将要讨论的“滑动门”技术来说，这种内嵌的方法在某些特定的浏览器上会出现渲染问题。第二种方法，也是我们所要关注的，是利用“浮动”属性将列表项排成一横行。而浮动属性也会同样令人无所适从。它们那些看来不协调的行为并不遵从自然逻辑。尽管如此，处理多个浮动元素的基本认识以及将它们确实可靠地处理为可用元素的方法依然会取得另人惊奇的效果。

我 们会在一个浮动的容器中创建多个浮动的元素。这样做是为了使外部容器紧密围绕在内容元素的周围。利用这种方法，我们可以给标签后的空白加上背景。要切记， 在标签之后布局的元素，一定要在CSS中用clear属性重新定位它的位置。这样是为了防止浮动标签影响布局中的其他页面元素的位置。

那么，现在就让我们看看这些标记语言：

<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

事实上，头部(#header)的层可能同时会包含网站的LOGO以及一个搜索框。在这个的例子中，我们会精简每个锚点（anchor）中的href值。显然，正常情况下这些值应该为锚点地址或者文件位置。

我 们最初的样式化就是让头部（#header）的层浮动。这样做是为了让这个作为容器的层能够真正地将它所容纳的那些浮动列表项包在内部。由于这个元素是浮 动的，我们需要给它标记为“100%”的宽度。再给它加上临时的黄色背景来确认这一父容器的伸缩能够正好填满标签的整个背景区域。同时设置默认文字的属 性，以保证容器内的文字看起来一致:

#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}

现在，我们将无序列表默认的内外补丁(padding)都设置为0，并将列表的项目符号去掉，给他们加上向左浮动的属性：

#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}

我们将锚点的显示属性设置为“块(display:block;)”，这样在控制它们的时候就不必担心内嵌方框的问题了:

#header a {
display:block;
}

接下来，我们将右侧的图片添加到列表项的背景中（添加的部分用粗体显示）：

#header li {
float:left;
background:url("norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}

在加入左边的图片之前，我们先停下来看看到目前为止，效果一究竟是怎样的。

- - -

现在，我们就可以将在上方显示的左侧图片加入到锚点（内层元素）的背景中，与此同时，我们也加入了内补丁，将标签扩展，给文字与标签的边缘间添加一些空白：

#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;
}

这些变化出现在效果二中。 看，现在标签已经有了大体的形状。对于这一点，IE5/Mac的用户可能会感到奇怪了，“这是怎么了，为什么标签会堆叠着伸展地穿过整个屏幕？”别急，我 们很快就要帮你解决这些问题。那么现在，尽可能地跟着我们继续下去，如果手头有其他浏览器的话，暂时先换一个来继续往下看。IE5/Mac的问题一定会得 到很好的解决。

- - -

这时，普通的标签背景已经做好了，接下来，需要为“当前”标签加上背景。我们通过为当前标签内的锚点加上id=“current”来实现对它的定位。由于并不需要改变当前标签的其他设置，只需要更换背景，所以我们仅用以下的代码即可：

				#header #current {
background-image:url("norm_right_on.gif");
}
#header #current a {
background-image:url("norm_left_on.gif");
}
				

		

在标签的下方，我们想要有边框出现，但是如果用对父容器#header设置下边框的的方法，那么就无法消除当前标签的下边框。因此，我们用创建一幅新图片的方法来代替，这幅图片的底部包含了我们想要的边框，同时将图片的颜色设置为少许的梯度，就像下面这幅：

我们将这幅图片用于容器#header的背景（代替了我们刚才所用的黄色），并将它设置为底部对齐，给容器设置与之相应的背景色。同时，将body的内补丁移除，给列表ul的上，左，右侧，分别加上10像素的内补丁：

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif")
repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}

要 完成标签导航栏，还需要将当前标签的下边框消除。你可能会想到，给其他标签加上与#header背景色完全相同的下边框，然后给当前标签加上一个白色的下 边框。然而，那些观察非常仔细的人还是会在这样的做法中发现些许破绽。我们用给锚点加上内补丁的方法来替代它，这样就可以创建出完美的方形边角了。在下面 经过放大的示意图中就可以看出区别：

为了实现这样的效果，我们为其他标签设置了4像素的内补丁，而当前标签的设置为5像素：

#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px 4px;
}
#header #current a {
background-image:url("norm_left_on.gif");
padding-bottom:5px;
}

上面的代码保证了在效果三中下边框只出现在其他标签上，而不出现在当前标签上。

打磨完工

敏 锐的目光可能会发现，在上一效果图中，圆角标签的角落上仍然留有白色的色块。这些前方图片上的不透明的边角挡住了导航栏的背景。从理论上说，我们可以将这 些边角的背景修改为与导航栏背景色一致来达到看似透明的效果。但是我们的导航标签可能会改变高度，超过背景的范围，或者背景色出现更改。因此，不如直接将 前方背景的边角设置为透明，这样更为方便。如果圆角是抗锯齿的话，我们可以让它的边缘以背景色进行柔化。

现在边角透明了，可是右侧图片的一部分出现在左侧透明的边角后。为了抵消它，我们在项目列表的左侧加上与左侧图片相同大小的9像素的内补丁。由于项目列表加上了左内补丁，就需要在锚点的左侧减去一部分内补丁，以保证文字的居中(15px - 9px = 6px)：

#header li {
float:left;
background:url("right.gif")
no-repeat right top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url("left.gif")
no-repeat left top;
padding:5px 15px 4px 6px;
}

然而，并不能就这样把它放在那儿，因为左侧的图片由于刚才加上的9像素的内补丁而被推开了。既然左右两幅图片的内边缘已经相连了，我们就没必要非将左侧的图片保持在上方。因此，我们交换一下左右两幅图片，让他们应用到对方的元素上。当然，当前标签也需要这样做：

#header li {
float:left;
background:url("left.gif")
no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a, #header strong, #header span {
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
padding-bottom:5px;
}

一旦这样做好了，就完成了效果四。 注意，为了使边角透明而做的这一系列调整使得每个标签的左侧都有一小部分不可点击。这一非活动区域是在文字之外的，所以并不是非常引人注目。并不是每个站 点都要求标签背景是透明的，如果不希望有这一小部分非活动区域的话，尽可以用纯色的背景和方角来代替透明和圆角。在我们的例子中，依然保持透明和圆角的效 果。

- - -

剩下的调整就很简单了，我们一并来完成：将标签字体设置为粗体，正常标签的字体颜色设置为棕色，当前标签颜色设置为深灰色，去掉下滑线，将鼠标悬浮时的字体颜色同样设置为深灰色。这些增加的变化在效果五中表现出来。

一致性的特例

在效果二之后，我们认识到，在IE5/Mac中，标签被扩大到与页面同宽，导致了他们垂直堆叠在下一个的上方，这并不是我们想要的效果。

在大多数浏览器中，浮动会引起收缩的效果-它会收缩到仅能容纳其所含元素的最小空间。如果浮动元素中包含的是图片，那么它会收缩到与图片大小相同，如果仅包含文字的话，它会收缩到与最长的不换行文字同宽。

而 在IE5/Mac中，当一个自动调整宽度的块级元素（block-level element）被插入到另一浮动元素中时，就会出现问题。其他浏览器依然会尽可能地收缩浮动元素，并不理会它所容纳的块级元素。但是IE5/Mac在这 种情况下并不收缩浮动元素，反而将浮动和块级元素扩展到最大的可用宽度。在这种情况下，我们需要将锚点也同时浮动，但是仅在IE5/Mac中这样做，以免 影响到其他浏览器。之后，我们就可以用反斜杠注释法（Commented Backslash Hack）来隐藏这些代码，使其仅在IE5/Mac下工作：

#header a {
float:left;
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */

这回，IE5/Mac浏览器应该显示我们所希望的效果了，见效果六。 在非IE5/Mac浏览器中，应该没有任何变化。注意，IE5.0/Mac中出现了很多渲染错误，在IE5.1中已得到更正。因此，在IE5.0中出现的 错误已经超出了我所应该作为特例而修改的范畴了。由于现在升级到5.1并不困难，而OS 9 Macs用户中仍然使用IE5.0的已经相当的少了。

适用性

我 们刚刚看过如何运用滑动门技术创建纯文本的导航标签,它们是由一系列锚点组成的无序列表标记而成,并赋予一些个性化的样式。它加载快速,易于维护,并且可 以在不破坏原有设计的同时对其文本进行大比例的缩放。那么这项技术足够灵活吗？可以胜任创建各种类型的精美导航栏的任务吗?

无需怀疑，这项技术的使用只局限于我们的想象力。最终效果只展示出了其中一种可能性。但是我们不应被一种设计局限了自己的想法.

例如,标签没必要非得对称。我很快就制作出这些标签的2.0版， 在这个版本中，并没有使用3D阴影效果,这样更利于展示平面色彩,有角的边缘，以及更宽,更细致的左边框。正如2.0版所示，我们甚至可以交换左右两幅图 片的位置，当然，这些均取决于你的设计。通过细致的计划和巧妙的图片处理,我们尽可以将下边框彻底放弃,这更有利于标签图片与背景的搭配,就如在我充满灵 感的3.0版中所表现的那样。如果你的浏览器支持在样式表间切换的话,你甚至可以看到这个主文件在三个不同的版本的样式间切换（注：Firefox和Opera支持样式切换）。

其 他我们没有讨论到的效果可以基于这项技术使用。在一路举来的这个例子中,我只改变了鼠标悬浮时的文字颜色，但除此之外你还可以将整个背景替换掉，以创造出 更为有趣的翻转效果。只要有两个嵌套的HTML元素标记，就可以利用CSS为他们加上背景，创造出我们甚至想都没想过的的效果。在这个例子中我制作了一个 水平的导航标签,但是滑动门技术在其他许多情况下都是可以使用的。

那么,你会用它做什么呢?