WEB开发网
开发学院网页设计DivCss CSS中的滑动门技术(2) 阅读

CSS中的滑动门技术(2)

 2008-03-09 11:39:29 来源:WEB开发网   
核心提示:现在,一般标签的背景图像已经完成了,CSS中的滑动门技术(2),我们要为“当前”标签更换图像,我们通过对目标列表项加入id="current"和锚链来实现,于是,交换两幅背景图像的顺序,既然不需要改变背景的其他外观,图像除外

现在,一般标签的背景图像已经完成了,我们要为“当前”标签更换图像。我们通过对目标列表项加入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("
			

1 2 3  下一页

Tags:CSS 滑动 技术

编辑录入:coldstar [复制链接] [打 印]
赞助商链接