<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 div可能同样包含logo和搜索框。对于我们的例子，我们要缩短每一个锚链中超链接的值。显然，这些值应该正确的包含文件或者目录的位置。 我们从定位#header容器开始设计列表。这样确保了这个容器确确实实的充当了容器的作用，以包容它内部浮动的列表项。既然元素是浮动的，我们同样需要声明它的宽度为100%。加入临时的黄色背景以确保父类容器完全填满标签后面的整个区域。同样，设定默认的文本属性，确保样式的统一：
#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}
现在，我们同样需要为无序列表设定默认的margin/padding值为0，并去掉列表项前面的标记。每个列表项左浮动：
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}
设定锚链强制作为块对象呈递，我们便可无忧的控制所有的样式：
#header a {
display:block;
}
下一步，我们将右侧的背景图像加入到列表项中去（改变如[b]粗体[/b]所示）：
#header li {
float:left;[b]background:url("norm_right.gif")
no-repeat right top;[/b]
margin:0;
padding:0;
}
在加入左侧图像之前，我们可以在[url=http://www.w3cn.org/article/translate/2005/v1/ex1.html]效果1[/url]种看看目前为止的效果。（在效果中，忽略body中的规则。仅设定基本margin,padding,colors,text的属性。）
---
现在我们可以将左侧图像放置在锚链的左边（容器内的元素）。我们同时加入padding，扩大标签并将文本从标签的边缘推开：
#header a {
display:block;[b]background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;[/b]
}
这样我们就得到了[url=http://www.w3cn.org/article/translate/2005/v1/ex2.html]效果2[/url]。注意我们的标签是如何成型的。在这里，IE5/Mac的用户会立刻惊奇道，“天啊，我的标签垂直堆在一起并且延伸至整个屏幕！”不要着急，我们马上帮你解决。眼下，尽量按照下面去做，或者方便的话，临时改换其他的浏览器，并且IE5/Mac版本的问题会马上得到解决。
---
现在，一般标签的背景图像已经完成了，我们要为“当前”标签更换图像。我们通过对目标列表项加入id="current"和锚链来实现。既然不需要改变背景的其他外观，图像除外，我们就使用background-image的特性：
[b]#header #current {
background-image:url("norm_right_on.gif");
}
#header #current a {
background-image:url("norm_left_on.gif");
}[/b]
我们要在标签下添加一条边框。但是，将边框属性应用于父类的#header容器上，将不能解决“当前”标签无需边框的问题。于是我们制作新的带有边框的图像以代替它。同样，我们可以为它加入渐变效果：
[img]http://www.w3cn.org/article/translate/2005/images/bg.gif[/img]
我们将图像放置到#header容器的背景中去（代替原有的黄色背景），将背景图像移至到最下方，并为图像上方留出的空白添加相应的背景颜色。同时，去掉由body继承下来的padding，为ul的上、左、右边加进10像素的padding：
#header {
float:left;
width:100%;[b]background:#DAE0D2 url("bg.gif")
repeat-x bottom;[/b]
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;[b]padding:10px 10px 0;[/b]
list-style:none;
}
我们必须让“当前”标签覆盖边框，如下面提示的那样。你也许会认为我们将要把底部边框加入到与其颜色相对应的、#header背景图像中去，然后将“当前”标签的底部边框颜色改为白色。但是，对于挑剔的观察者，还是会发现一些细小的差别。于是，我们改变锚链的padding，为“当前”标签创造出直角来，如下面放大的例子：
[img]http://www.w3cn.org/article/translate/2005/images/diagram_corners.gif[/img]
我们通过减少1像素普通锚链的底部padding值（5px-1px=4px）来实现，然后为“当前”锚链补上减去的padding。
#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;[b]padding:5px 15px 4px;[/b]
}
#header #current a {
background-image:url("norm_left_on.gif");[b]padding-bottom:5px;[/b]
}
经过改变，底部边框将在普通标签中出现，而在“当前”标签中则隐藏了起来。于是，我们得到了[url=http://www.w3cn.org/article/translate/2005/v1/ex3.html]效果3[/url]。
[h3]收尾工作[/h3]
敏锐的观察者也许会在上一例注意到白色的标签角落。这些不透明的角用来防止下面的图像透过上面的一副。理论上，我们可以尝试使用部分背景图像来适应标签的背景。但是我们的标签会在高度上增长，尝试通过移动背景颜色，背景图像就会相对变矮。代替的办法是，改变图像，将标签的角落设为透明。如果弧线是反锯齿的，我们在其边缘使用较平均的背景色彩。
现在，角落已经变成透明色，左边的图像将透过右边图像的角落。为了补偿，我们为表单项加入和左边图像宽度相吻合的padding（9px）。既然已经为表单项加入了padding，我们还需去掉同样的宽度以达到文本的居中（15px-9px=6px）：
#header li {
float:left;
background:url("right.gif")
no-repeat right top;
margin:0;[b]padding:0 0 0 9px;[/b]
}
#header a {
display:block;
background:url("left.gif")
no-repeat left top;[b]padding:5px 15px 4px 6px;[/b]
}
仍未结束，因为加入了9个像素的padding使左边图像与标签的左边之间产生了一段空白。现在，左侧与右侧，可见“doorway”的边缘接在一起，我们再不需要将左边图像保持在上方。于是，交换两幅背景图像的顺序，相反过来。同样交换“当前”标签中使用的两幅图像：
#header li {
float:left;
background:url("[b]left.gif[/b]")
no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a, #header strong, #header span {
display:block;
background:url("[b]right.gif[/b]")
no-repeat right top;
padding:5px 15px 4px 6px;
}
#header #current {
background-image:url("[b]left_on.gif[/b]");
}
#header #current a {
background-image:url("[b]right_on.gif[/b]");
padding-bottom:5px;
}
完成这些后，我们到达了[url=http://www.w3cn.org/article/translate/2005/v1/ex4.html]效果4[/url]。要注意的是，透明的角落在标签的左侧产生了一段不能点击的无效区域。这个区域在文本以外，但仍然是可以察觉到的。在标签的两边都使用透明的图像是没有必要的。如果我们不希望产生这种无效的区域，那么我们必须使用在标签后面使用颜色，然后用这种颜色来代替标签角落的透明图像。现在我们仅保持这种透明角落。
---
对于剩下的问题，我们将一次性完成全部的修改：加重标签文本，将普通标签中的文本改为棕色，“当前”标签文本改为深灰色，去掉链接的下划线，最后将悬停文本色彩改为同样的深灰色。经过一系列的改变，我们将看到目前为止的[url=http://www.w3cn.org/article/translate/2005/v1/ex5.html]效果5[/url]。
[h3]一致性的解决[/h3]
在效果2之后，我们公认的一个问题就是在IE5/Mac浏览方式下，每个标签延伸并占据了整个浏览器的宽度，以致标签垂直的堆在了一起。这不是我们所希望的。
在大多数的浏览器中，浮动一个元素会有收缩，收缩最小至它所包含内容的大小。如果一个浮动元素包含一幅图像或其本身即图像，便会收缩至图像的宽度。如果仅仅包含文本，那么将会收缩至最长的，不可被顶开的那文本的宽度。
一个问题出现在IE5/Mac中的图片中，当一个auto-width的块对象元素被插入到一个浮动的元素中时。其他的浏览器仍旧将浮动缩小至最小，而无视容器内的块对象元素。但IE5/Mac并不按照这种情况，相反它将浮动和块对象元素扩展至尽可能的宽度。为解决这个问题，我们将锚链同时浮动起来，但仅仅对于IE5/Mac，以免放弃其他的浏览器。首先，我们为锚链设定浮动规则。然后，我们使用[url=http://www.sam-i-am.com/work/sandbox/CSS/mac_ie5_hack.html]反斜杠注释法[/url]来隐藏这种规则，让它仅仅对IE5/Mac生效，而无视其他的浏览器：
#header a {[b]float:left;[/b]
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}[b]/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */[/b]
现在IE5/Mac浏览器将按我们所期望的那样来显示标签，看[url=http://www.w3cn.org/article/translate/2005/v1/ex6.html]效果6[/url]。对于非IE5/Mac的浏览器什么都不需要改变。注意到IE5.0/Mac的一系列解释上的bug在IE5.1中解决。因此，滑动门技术在5.0版本中所遭遇的问题超出了hack的限度。既然升级到IE5.1/Mac已不成难题，OS 9 Macs/IE5.0的占有率应逐渐缩减至很低。
[h3]举一反三[/h3]
我们刚刚演练了滑动门技术，用纯文本和无序列表来创造导航标签，加以少量的样式。它的装载速度快，具有可维持性，并且文本的大小可以在不破坏外观的情况下进行较大的伸缩。不必我们再重申在创造复杂样式的导航栏中，滑动门技术所表现出来的弹性了。
只有想不到，没有做不到。[url=http://www.w3cn.org/article/translate/2005/v1/v1.html]最终效果[/url]向我们展示了一例，但我们设计不可能因此而被限定死。
在某些场合，标签不一定是对称的。我很快就制作了这种标签的[url=http://www.w3cn.org/article/translate/2005/v2/v2.html]第二个版本[/url]，也有阴影3D的样式，有角的边缘，和具有特色的左边部分。依据第二个版本，我们甚至可以交换左右两幅图像的位置。以这种细致的布局和灵巧的图像控制，我们可以去掉按钮的下边框以便标签图像更好的去适应背景，如[url=http://www.w3cn.org/article/translate/2005/v3/v3.html]第三个版本[/url]所显示的那样。如果你的浏览器支持多个样式表的切换，你甚至可以靠它在多个版本的导航栏之间[url=http://www.w3cn.org/article/translate/2005/final_tabs.html]自由切换[/url]。
仍有许多我们没有提到的其他的效果。快速的提一下，我改变鼠标悬停的文本色彩，但是真个图像可以替换掉以创造出更有趣的变换效果。即使标记中两个嵌套的HTML元素，也可以用CSS来达到一些我们还未想到的效果。我们在此例中创造的仅仅是水平的标签栏，但滑动门亦可应用于许多其他的情形。阁下觉得如何呢？
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号：苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有