- 1、本文档共9页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
CSS中的滑动门技术 导航栏背景跟随鼠标滑动
CSS中的滑动门技术 导航栏背景跟随鼠标滑动
原文作者:Douglas Bowman
原文出自:A List Apart
??? 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。根据CSS2.0当前的规定,每一个背景图像都需要各自的HTML元素。在许多情况下,典型的标记已经为一般的接口组件提供了多种元素以供我们使用。
?? 标签导航栏就是其中的一个例子。过去,我们频繁的使用这些标签,并已成为了一种非常流行的站点导航方式。现今,在CSS已被广泛支持的前景下,我们可以为我们站点制作出更高质量和更好外观的标签导航栏来。你也许知道CSS可以用来“驯服”无序的列表,或许你还曾经看到过这种样式的标签列表:
?? 如果我们想用和以上类似的标记,将导航标签变成这种样式,该怎么办呢?
?? 经过简单的设计,我们是可以做到的。
?? 创新于何处?
?? 我见过的许多基于CSS的导航标签大都具有一类的特征:矩形的色块,也许仅仅是一个轮廓,对于当前选中的标签则没有边框,标签在鼠标指针游至其上时改变颜色。这难道就是CSS所能给我们的全部吗?一连串的小盒子和单调的色彩吗?
?? 在CSS被广泛采用之前,我们已经看到许多标签导航设计中的创新之处。独创的外形,熟练的色彩混合,以及对真实世界中许多物理接口的模仿。但是这些设计往往过分依赖于经过复杂制作、带有文本的图像,或被包装成若干嵌套的表格。修改文本或改变标签的顺序则需要一个复杂的过程。文本的伸缩更是不可能的,或给页面的布局极大的影响。
?? 纯文本的导航栏比起文本即图像的导航栏更具有持续使用性和更快的载入速度。同样,我们甚至可以为每一个图像加上alt属性,对于弱视者,纯文本更可以自由的改变大小。不足为奇的是,基于纯文本的导航栏,并加以CSS样式,又重新回到Web设计中来。但是,大多数基于CSS的导航栏设计,至今为止仍然是毫无意义的。一种最近被采用的技术(例如CSS)可以让我们做的更好,同样不失先前提到的那些表格和图片标签的效果。
?? 滑动门技术
?? 美观的工艺,真正灵活的接口组件,并根据文本自适应大小,我们可用两个独立的背景图像来创造它。一个在左边,一个在右边。把这两幅图像想象成两扇可滑动的门,它们滑到一起并交迭,占据一个较窄的空间;或者相互滑开,占据一个较宽的空间,就像下图所显示的那样:
?? 在这个模型中,一个图像掩盖住另一个图片的一部分。假设我们放置一些独特的内容在每个图像的周围,例如标签的圆角,我们并不希望上面一副图像完全的遮蔽住下面一副。为了防止这种情况的发生,我们可以将上面一副图像(此例中的左边那幅)控制的尽可能的窄。但仍然要保证一定的宽度来显现标签一侧的独特性。如果外部是圆角,我们就应该控制上面一副图像和它的弧线部分具有一样的宽度。
?? 如果目标在大小上增长,并超过了以上所显示的宽度,归咎于文本大小及字体的改变,图像会被拉开,产生不美观的间隙。我们需要判断的是,预测这种可扩展的量将有多大。如果在浏览器中改变字体的大小,目标又会如果增长呢?实际来说,我们至少应该估算到字体大小增长至300%的情况。背景图像也得适应这种增长。对于以上的例子,我们将下面(即右边)的图像设为400*150像素,上面的设为9*150像素。
?? 在头脑中,始终要有这样的认识:背景图像只是显示一个可供内容填充的有效空间(即内容区域和padding,称为doorway)。这两幅图像始终和各自外部的边角相锚定。背景图像的可见部分和在一起即形成了一个具有这种标签形状的空间(doorway):
?? 如果标签被撑大,图像即滑开,doorway变宽,图像的也将被显露的更多:
?? 此例中,我在photoshop中制作两个平滑,细的3D标签图像,如文章开头所显示的那样。对于其一,内部明亮,边框暗淡些,用来表现当前选中的标签。将这种技巧模型应用于左右两幅图像中,我们需要扩大标签图像覆盖的区域,将它裁剪成两部分:
?? 同样的方式将应用到被称为“当前”的标签中。一旦我们完成了这四幅图像(1、2、3、4),我们就可以开始用标记和CSS来制作我们的标签了。
?? 标签的创造
?? 当你在研究用CSS来创造水平列表时,会发现至少有两种方法将列表项安排在同一行里。两种方法各有千秋,但都需要CSS来解决布局所带来的混乱。一种方法使用inline box,另一种则用floats。
?? 方法一,可能是比较普遍的一种,是将列表项都inline显示。inline方法的魅力在于它的简易性。但是,对于我们即将谈到的滑动门技术来说,inline方法在特定的浏览器上存在一些解释上问题。
?? 方法二,是我们将要关注的,即用floats将列表项安排在同一行里。令人沮丧的是,floats表面上矛
您可能关注的文档
- DIV+CSS网页设计规范总结.doc
- wincc的excel报表实例.doc
- Unit1 Cultural relics 词汇学习.doc
- 山东省青岛市2014届高三英语第一次模拟考试(青岛市一模第2套)外研社版.doc
- 2008年3月上海中级口译真题.doc
- 自定义ViewGroup 在ViewGroup中显示TextView.doc
- SSH不输入密码等10条使用技巧.docx
- 英国文学史概括.docx
- 强烈推荐的一款CSS导航菜单.doc
- web用JAVASCRIPT实现一个小游戏.doc
- 中国国家标准 GB/T 18233.4-2024信息技术 用户建筑群通用布缆 第4部分:住宅.pdf
- GB/T 18233.4-2024信息技术 用户建筑群通用布缆 第4部分:住宅.pdf
- GB/T 18978.210-2024人-系统交互工效学 第210部分:以人为中心的交互系统设计.pdf
- 《GB/T 18978.210-2024人-系统交互工效学 第210部分:以人为中心的交互系统设计》.pdf
- 中国国家标准 GB/T 18978.210-2024人-系统交互工效学 第210部分:以人为中心的交互系统设计.pdf
- GB/T 16649.2-2024识别卡 集成电路卡 第2部分:带触点的卡 触点的尺寸和位置.pdf
- 《GB/T 16649.2-2024识别卡 集成电路卡 第2部分:带触点的卡 触点的尺寸和位置》.pdf
- 中国国家标准 GB/T 16649.2-2024识别卡 集成电路卡 第2部分:带触点的卡 触点的尺寸和位置.pdf
- GB/T 17889.4-2024梯子 第4部分:铰链梯.pdf
- 《GB/T 17889.4-2024梯子 第4部分:铰链梯》.pdf
最近下载
- 企业存货管理问题研究——以森马服饰为例.doc
- 2012年数学建模竞赛答案之一 葡萄酒.pdf VIP
- 手机游戏的营销策略分析以《明日方舟》为例.docx VIP
- 急诊POCT专项测试卷附答案.doc
- 2023年全国数学建模竞赛D题的答案.doc VIP
- 100m3每天医疗污水处理方案.docx VIP
- PreSonus 普瑞声纳 Temblor T10EN,CN T10 OwnersManual 04272021说明书用户手册.pdf
- 2021年全国数学建模竞赛D题的答案.pdf VIP
- PreSonus 普瑞声纳 Eris E44EN,CN Eris E44 and E66 OwnersManual EN V3 01112021.说明书用户手册.pdf
- 2003全国大学生数学建模竞赛b题参考答案.docx
文档评论(0)