CSS中的滑动门技术

网络整理 - 07-27
在css中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。根据CSS2.0当前的规定,每一个背景图像都需要各自的html元素。在许多情况下,典型的标记已经为一般的接口组件提供了多种元素以供我们使用。

标签导航栏就是其中的一个例子。过去,我们频繁的使用这些标签,并已成为了一种非常流行的站点导航方式。现今,在CSS已被广泛支持的前景下,我们可以为我们站点制作出更高质量和更好外观的标签导航栏来。你也许知道css可以用来“驯服”无序的列表,或许你还曾经看到过这种样式的标签列表:

同样的方式将应用到被称为“当前”的标签中。一旦我们完成了这四幅图像(1, 2, 3, 4),我们就可以开始用标记和CSS来制作我们的标签了。

标签的创造

当你在研究用CSS来创造水平列表时,会发现至少有两种方法将列表项安排在同一行里。两种方法各有千秋,但都需要CSS来解决布局所带来的混乱。一种方法使用inline box,另一种则用floats。

方法一,可能是比较普遍的一种,是将列表项都inline显示。inline方法的魅力在于它的简易性。但是,对于我们即将谈到的滑动门技术来说,inline方法在特定的浏览器上存在一些解释上问题。方法二,是我们将要关注的,即用floats将列表项安排在同一行里。令人沮丧的是,floats表面上矛盾的行为正巧回避了自然的逻辑。尽管如此,对于解决多重浮动元素的基本认识,以及可靠浮动的意义,仍是值得讨论的。

我们将用另一种浮动元素来解决浮动元素的排列问题。这样,父类元素将子类元素完全包括起来。于是,我们就可以为标签加上背景色彩和背景图像。非常重要的一点必须记住,紧跟在标签后的文本元素用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 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; }

下一步,我们将右侧的背景图像加入到列表项中去(改变如粗体所示):

#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版本的问题会马上得到解决。