CSS中的滑动门技术

2009-06-08 18:42  Read:

对于剩下的问题,我们将一次性完成全部的修改:加重标签文本,将普通标签中的文本改为棕色,“当前”标签文本改为深灰色,去掉链接的下划线,最后将悬停文本色彩改为同样的深灰色。经过一系列的改变,我们将看到目前为止的效果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.1中解决。因此,滑动门技术在5.0版本中所遭遇的问题超出了hack的限度。既然升级到IE5.1/Mac已不成难题,OS 9 Macs/IE5.0的占有率应逐渐缩减至很低。
举一反三
我们刚刚演练了滑动门技术,用纯文本和无序列表来创造导航标签,加以少量的样式。它的装载速度快,具有可维持性,并且文本的大小可以在不破坏外观的情况下进行较大的伸缩。不必我们再重申在创造复杂样式的导航栏中,滑动门技术所表现出来的弹性了。
只有想不到,没有做不到。最终效果向我们展示了一例,但我们设计不可能因此而被限定死。
在某些场合,标签不一定是对称的。我很快就制作了这种标签的第二个版本,也有阴影3D的样式,有角的边缘,和具有特色的左边部分。依据第二个版本,我们甚至可以交换左右两幅图像的位置。以这种细致的布局和灵巧的图像控制,我们可以去掉按钮的下边框以便标签图像更好的去适应背景,如第三个版本所显示的那样。如果你的浏览器支持多个样式表的切换,你甚至可以靠它在多个版本的导航栏之间自由切换。
仍有许多我们没有提到的其他的效果。快速的提一下,我改变鼠标悬停的文本色彩,但是真个图像可以替换掉以创造出更有趣的变换效果。即使标记中两个嵌套的HTML元素,也可以用CSS来达到一些我们还未想到的效果。

用户名: 密码:
匿名发表
全部评论:0