频道直达 - 学院 - 下载 - 交易 - 特效 - 字库 - 手册 -排名-工具- 繁體
网页教学网站开发 设为首页
加入收藏
联系我们
建站搜索: 常用广告代码   用户注册 | 用户登陆
您当前的位置:中国建站之家 -> 网站开发设计技术教程 -> HTML/CSS/DIV+CSS教程 -> CSS中的滑动门技术研究3

CSS中的滑动门技术研究3

作者:jz123  来源:www.jz123.cn  发布时间:2006-2-23 5:00:45  发布人:jz123

减小字体 增大字体

收尾工作

敏锐的观察者也许会在上一例注意到白色的标签角落。这些不透明的角用来防止下面的图像透过上面的一副。理论上,我们可以尝试使用部分背景图像来适应标签的背景。但是我们的标签会在高度上增长,尝试通过移动背景颜色,背景图像就会相对变矮。代替的办法是,改变图像,将标签的角落设为透明。如果弧线是反锯齿的,我们在其边缘使用较平均的背景色彩。

现在,角落已经变成透明色,左边的图像将透过右边图像的角落。为了补偿,我们为表单项加入和左边图像宽度相吻合的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。要注意的是,透明的角落在标签的左侧产生了一段不能点击的无效区域。这个区域在文本以外,但仍然是可以察觉到的。在标签的两边都使用透明的图像是没有必要的。如果我们不希望产生这种无效的区域,那么我们必须使用在标签后面使用颜色,然后用这种颜色来代替标签角落的透明图像。现在我们仅保持这种透明角落。

对于剩下的问题,我们将一次性完成全部的修改:加重标签文本,将普通标签中的文本改为棕色,“当前”标签文本改为深灰色,去掉链接的下划线,最后将悬停文本色彩改为同样的深灰色。经过一系列的改变,我们将看到目前为止的效果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来达到一些我们还未想到的效果。我们在此例中创造的仅仅是水平的标签栏,但滑动门亦可应用于许多其他的情形。阁下觉得如何呢?


将本文收藏到QQ书签与更多好友分享
[打 印]
[] [返回上一页] [收 藏]
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论...]
精彩推荐
热门文章
· 注册码大全二
· 注册码大全四
· 注册码大全一
· 要10G免费网络硬盘的请进..
· 通过google 赶快来赚美金..
· 注册码大全十
· 头像-qq头像(qq新头像)4..
· 让你轻松架设FTP服务器1..
· 注册码大全三
· 梦幻背景图片7
· 卡通动物图片6
· 网页制作素材-按钮素材2..
· 让你轻松架设FTP服务器5..
· 风景图片8
· 注册码大全九
· 让你轻松架设FTP服务器2..
关注此文读者还看过
· 夏日风情-椰岛风(1)
· 反病毒第一人王江民点评..
· 动网论坛PHP版评测-体验..
· 谈两种数据库内容HTML格..
· 5MB免费邮箱-东方网
· 百度裁员事件拉上搜狐 搜..
· Photoshop打造玲珑可爱的..
· 站长必读:网站炒作的六..
· 奇虎360安全卫士可杀木马..
· ASP实用大全-ASP对象(5)..
· Google CEO有望成为苹果..
· SQL Server 7.0 入门(七..
· Photoshop制作数码点阵世..
· Ajax应用场景-Ajax使用说..
· 在ASP.NET中进行文件处理..
· SEO思考:冷眼看“一元域..
相关文章
· 怎么样写css中的behavior
· 学习CSS:了解CSS中的类、伪..
· 实例学习CSS中的优先权的问..
· CSS中的滑动门技术研..
· CSS中的滑动门技术研..
· CSS中的滑动门技术(1..
· CSS中的滑动门技术(2..
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 人才招聘
网站合作、内容监督、商务咨询:QQ: 9576619
Copyright ? 2005--2008 中国建站之家版权所有
粤ICP备05092265号