CSS中的滑动门技术(2)

此刻，普遍标签的后台图像仍旧实行了，咱们要为“暂时”标签调换图像。咱们经过对目的列表项介入id="current"和锚链来实行。既是不须要变换后台的其余表面，图像之外，咱们就运用background-image的个性：

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

咱们要在标签下增添一条边框。然而，将边框属性运用于父类的#header容器上，将不许处置“暂时”标签无需边框的题目。所以咱们创造新的带有边框的图像以包办它。同样，咱们不妨为它介入突变功效：

咱们将图像安置到#header容器的后台中去（包办原有的黄色后台），将后台图像移至到最下方，并为图像上方留出的空缺增添相映的后台脸色。同声，去掉由body接受下来的padding，为ul的上、左、右边加进10像素的padding：

#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后台图像中去，而后将“暂时”标签的底部边框脸色改为白色。然而，对于指责的查看者，仍旧会创造少许渺小的分辨。所以，咱们变换锚链的padding，为“暂时”标签创作出直角来，如底下夸大的例子：

咱们经过缩小1像素普遍锚链的底部padding值（5px-1px=4px）来实行，而后为“暂时”锚链补上减去的padding。

#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; }

过程变换，底部边框将在普遍标签中展示，而在“暂时”标签中则湮没了起来。所以，咱们获得了功效3。

结尾处事

锋利的查看者大概会在上一例提防到白色的标签边际。那些不通明的角用来提防底下的图像透过上头的一副。表面上，咱们不妨试验运用局部后台图像来符合标签的后台。然而咱们的标签会在莫大上延长，试验经过挪动后台脸色，后台图像就会对立变矮。包办的方法是，变换图像，将标签的边际设为通明。即使曲线是反锯条的，咱们在其边际运用较平衡的背局面彩。

此刻，边际仍旧形成通明色，左边的图像将透过右边图像的边际。为了积累，咱们为表单项介入和左边图像宽窄相符合的padding（9px）。既是仍旧为表单项介入了padding，咱们还需去掉同样的宽窄以到达文本的居中（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个像素的padding使左边图像与标签的左边之间爆发了一段空缺。此刻，左侧与右侧，看来“doorway”的边际接在一道，咱们再不须要将左边图像维持在上方。所以，调换两幅后台图像的程序，差异过来。同样调换“暂时”标签中运用的两幅图像：

#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; }

实行那些后，咱们达到了功效4。要提防的是，通明的边际在标签的左侧爆发了一段不许点击的失效地区。这个地区在文本除外，但仍旧是不妨发觉到的。在标签的双方都运用通明的图像是没有需要的。即使咱们不蓄意爆发这种失效的地区，那么咱们必需运用在标签反面运用脸色，而后用这种脸色来包办标签边际的通明图像。此刻咱们仅维持这种通明边际。

---

对于剩下的题目，咱们将一次性实行十足的窜改：加剧标签文本，将普遍标签中的文本改为棕色，“暂时”标签文本改为暗灰色，去掉链接的下划线，结果将悬停文本颜色改为同样的暗灰色。过程一系列的变换，咱们将看到暂时为止的功效5。

普遍性的处置

在功效2之后，咱们公认的一个题目即是在ie5/mac欣赏办法下，每个标签蔓延并吞噬了所有欣赏器的宽窄，以至标签笔直的堆在了一道。这不是咱们所蓄意的。

在大普遍的欣赏器中，浮动一个元素会有中断，中断最小至它所包括实质的巨细。即使一个浮动元素包括一幅图像或其自己即图像，便会中断至图像的宽窄。即使只是包括文本，那么将会中断至最长的，不行被顶开的那文本的宽窄。

一个题目出此刻ie5/mac中的图片中，当一个auto-width的块东西元素被插入到一个浮动的元素中时。其余的欣赏器保持将浮动减少至最小，而忽视容器内的块东西元素。但ie5/mac并不依照这种情景，差异它将浮动和块东西元素扩充至尽大概的宽窄。为处置这个题目，咱们将锚链同声浮动起来，但只是对于ie5/mac，免得停止其余的欣赏器。开始，咱们为锚链设定浮动准则。而后，咱们运用反斜杠解释法来湮没这种准则，让它只是对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欣赏器将按咱们所憧憬的那么来表露标签，看功效6。对于非ie5/mac的欣赏器什么都不须要变换。提防到ie5.0/mac的一系列证明上的bug在ie5.第11中学处置。所以，滑行门本领在5.0本子中所蒙受的题目胜过了hack的控制。既是晋级到ie5.1/mac已不可困难，os 9 macs/ie5.0的占领率应渐渐削减至很低。

触类旁通

咱们方才演示了滑行门本领，用纯文本和无序列表来创作导风向标签，加以小批的款式。它的承载速率快，具备可保护性，而且文本的巨细不妨在不妨害表面的情景下举行较大的舒卷。不用咱们再重申在创作搀杂款式的导航栏中，滑行门本领所展现出来的弹性了。

惟有想不到，没有做不到。最后功效向咱们展现了一例，但咱们安排不大概所以而被控制死。

在某些场所，标签不确定是对称的。我很快就创造了这种标签的第二个本子，也有暗影3d的款式，有角的边际，和具备特性的左边局部。按照第二个本子，咱们以至不妨调换安排两幅图像的场所。以这种精致的构造和精致的图像遏制，咱们不妨去掉按钮的下边框再不标签图像更好的去符合后台，如第三个本子所表露的那么。即使你的欣赏器扶助多个款式表的切换，你以至不妨靠它在多个本子的导航栏之间自在切换。

仍有很多咱们没有提到的其余的功效。赶快的提一下，我变换鼠标悬停的文本颜色，然而真个图像不妨替代掉以创作出更风趣的变幻功效。纵然标志中两个嵌套的html元素，也不妨用css来到达少许咱们还未想到的功效。咱们在此例中创作的只是是程度的标签栏，但滑行门亦可运用于很多其余的景象。左右感触怎样呢？