|
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}设定锚链强制作为块对象呈递，我们便可无忧的控制所有的样式：
#header a {
display:block;
}下一步，我们将右侧的背景图像加入到列表项中去（改变如粗体所示）：
#header li {
float:left;
background:url("norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}在加入左侧图像之前，我们可以在效果1种看看目前为止的效果。（在效果中，忽略body中的规则。仅设定基本margin,padding,colors,text的属性。）
---
现在我们可以将左侧图像放置在锚链的左边（容器内的元素）。我们同时加入padding，扩大标签并将文本从标签的边缘推开：
#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;
}这样我们就得到了效果2。注意我们的标签是如何成型的。在这里，IE5/Mac的用户会立刻惊奇道，“天啊，我的标签垂直堆在一起并且延伸至整个屏幕！”不要着急，我们马上帮你解决。眼下，尽量按照下面去做，或者方便的话，临时改换其他的浏览器，并且IE5/Mac版本的问题会马上得到解决。
---
现在，一般标签的背景图像已经完成了，我们要为“当前”标签更换图像。我们通过对目标列表项加入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）来实现，然后?暗鼻啊泵?床股霞跞サ膒adding。
#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。要注意的是，透明的角落在标签的左侧产生了一段不能点击的无效区域。这个区域在文本以外，但仍然是可以察觉到的。在标签的两边都使用透明的图像是没有必要的。如果我们不希望产生这种无效的区域，那么我们必须使用在标签后面使用颜色，然后用这种颜色来代替标签角落的透明图像。现在我们仅保持这种透明角落。
---
（编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
