admin 管理员组文章数量: 1086019
2024年3月5日发(作者：八位二进制转bcd码算法)
基于Ｃ８８的下拉菜单解决方案的实践 曾妮丽 （南京化工职业技术学院，南京２１００４８） 摘 要：网站信息内容是吸引用户的关键，而起到指引作用的导航则是网站设计的重点。下拉菜单 对于信息内容丰富的网站无疑是一种较好的选择。利用ＣＳＳ技术实现某一网站导航的下 拉菜单．通过添加ＪａｖａＳｃｒｉｐｔ代码，可以使得这种方法完成的导航能够在ＩＥ６．０及其他高版 本的浏览器中正常显示。 关键词：ＣＳＳ导航；下拉菜单；ＪａｖａＳｃｒｉｐｔ １ 研究背景 该规则所影响的元素．声明块决定将要修改元素的哪 随着网络技术的发展．计算机的普及。通过互联网 些重要属性 声明块是规则的实体，用大括号括起来。 上各式各样的网站来获取信息已逐渐成为人们学习生 在ＨＴＭＬ中使用ＣＳＳ，包括行内样式、内嵌式、外部样 活的一部分 对于一个网站而言．良好的信息内容是吸 式表等 行内样式是最为简单的ＣＳＳ使用方法。它的后 引用户的关键．而如何组织这些信息．采用何种导航形 期维护成本依然很高、而且网页容易过“胖”；内嵌式 式便成为网站设计的重中之重 就目前来说．网站导航 中．ＣＳＳ代码被集中在同一个区域，方便后期维护，但 形式以横向导航居多．当网站内容较为丰富．信息组织 当一个网站拥有多个页面时．这种方式也会显得较为 结构较为复杂时．多级下拉菜单便成为网站导航的首 麻烦：外部样式表包括链接式和导人式．实现了页面框 选形式。 架代码和美工ＣＳＳ样式的完全分离．使得前期制作和 ＣＳＳ全称是Ｃａｓｅａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔ，即层叠样式表。 后期维护都很方便．是目前常采用的一种方法 它是用于控制网页样式并允许将样式信息与网页内容 ２．１导航结构及实现方法 分离的标记性语言。本文就是利用ＣＳＳ及其：ｈｏｖｅｒ伪 本文导航采用的是二级菜单．当光标移至主菜单 类选择器实现了一个基于ＣＳＳ的下拉菜单 时．弹出下拉菜单．光标移走时．下拉菜单隐藏。导航结 构的实现采用ＨＴＭＬ中的无序列表标记符．即＜ｕｌ＞＜／ ２ 利用Ｏ￥Ｓ进行下拉菜单的创建 ｕｌ＞。其中＜ｌｉ＞标记符指引出每一个导航菜单项：下拉菜 目前．体现结构和表现分离思想的ＸＨＴＭＬ及ＣＳＳ 单依然采用的是无序列表标记符．是在主菜单中进行 两项标准技术受到越来越多的青睐 利用ＣＳＳ技术避 的嵌套 导航其他效果的实现主要依靠ＣＳＳ来完成 免了将结构和样式混合在一起表现时．每个页面重复 具体代码设计如下： 下载大量的标记。同时，页面下载的速度也会更快．也 ＜ＤＩＶ ｉｄ＝ｎａｖ＞ 更利于搜索引擎进行检索．后期维护也会更方便 ＜ＵＬ＞ ＣＳＳ由样式规则组成．样式规则由浏览器介绍．然 ＜Ｌｌ＞＜ａ ｈｒｅｆ＝”＃”＞首页＜／ａ＞＜／ＬＩ＞ 后应用到文档中的相关元素 每个ＣＳＳ样式都由两部 ＜ＬＩ＞＜ａ ｈｒｅｆ＝”＃”＞系部简介＜／ａ＞＜／ＬＩ＞ 分组成：一个选择符和一个声明块。选择符告诉浏览器 ＜ＬＩ＞＜ａ ｈｒｅｆ．”＃”＞党建工作＜／ａ＞ ＜ｕ１＞ 收稿日期：２０１１—０８一ｌ１ 修稿日期：２０１１—０９一ｌ１ 作者简介：曾妮丽（１９８０一），女，硕士研究生，讲师，研究方向为网页设计 ｍ 笛＋ｎ，、，、 ．，、，、
３ 存在问题及解决方案 尽管在ＩＥ８．０及Ｆｉｒｅｆｏｘ等浏览器中利用此方法实 现的下拉菜单都能正常的实现。但是在ＩＥ６．０中仍然碰 到了问题。为了解决这一问题，我们必须借助于 ４ 结语 文中介绍了运用ＣＳＳ技术实现某一网站导航的下 拉菜单的方法 采用ＣＳＳ技术中的：ｈｏｖｅｒ伪类，能够很 方便地实现导航下拉菜单．同时通过ＣＳＳ的样式规则， 还能做出很多精美的导航。由于早期的浏览器对Ｗｅｂ 标准的支持不够．为了能使导航在ＩＥ６中正常显示．需 要添加一小段ＪａｖａＳｃｒｉｐｔ 最后实践证明这一解决方案 在ＩＥ６．０、ＩＥ８、Ｆｉｒｅｆｏｘ等浏览器中都能正常显示。 参考文献 ＪａｖａＳｃｒｉｐｔ脚本语言．具体代码如下： ｓｆＨｏｖｅｒ＝ｆｕｎｃｔｉｏｎ０ ｆ ｖａｒ ｓｆＥｌｓ＝ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ｎａｖ”）．ｇｅｔＥｌｅｍｅｎｔｓ— ＢｙＴａｇＮａｍｅ（”ｌｉ”）； ｆｏｒ（ｖａｒ－＿０；ｉ＜ｓｆＥｌｓ．１ｅｎｇｔｈ；ｉ＋＋）｛ ｓｆＥｌｓ［ｉ］．ｏｎｍｏｕｓｅｏｖｅｒ＝ｆｕｎｃｔｉｏｎ０｛ ｔｈｉｓ．ｃｌａｓｓＮａｍｅ＋＝”ｓｆｈｏｖｅｒ”；｝ ［１］Ｃｈｒｉｓｔｏｐｈｅｒ Ｓｃｈｍｉｔｔ。Ｔｏｄｄ Ｄｏｍｉｎｅｙ．窦朝晖．ＣＳＳ Ｗｅｂ设计 高级教程．北京：清华大学．２００９．７ ［２］ｈｔｔｐ：ｗｗｗ．ｈｔｍｌｄｏｇ．ｃｏｍ／ａｒｔｉｃｌｅｓ／ｓｕｃｋｅｒｆｉｓｈ ｓｆＥｌｓ［ｉ］．ｏｎｍｏｕｓｅｏｕｔ＝ｆｕｎｃｔｉｏｎ０｛ ｔｈｉｓ．ｃｌａｓｓＮａｍｅ＝ｔｈｉｓ．ｃｌａｓｓＮａｍｅ．ｒｅｐｌａｃｅ（ｎｅｗ ＲｅｇＥｘｐ（”ｓｆｈｏｖｅｒ＼ｋｂ”），””）；】ｌ】 ｉｆ（ｗｉｎｄｏｗ．ａｔｔａｃｈＥｖｅｎｔ）ｗｉｎｄｏｗ．ａｔｔａｃｈＥｖｅｎｔ（”ｏｎｌｏａｄ”，ｓｆＨｏｖｅｒ）； 与此同时还需要在ＣＳＳ样式文件中添加以下样 式：＃ｎａｖ ｌｉ．ｓｆｈｏｖｅｒ ｕｌ ｆｌｅｆｌ：Ｏ｝。 Ｐｒａｃｔｉｃｅ ａｂｏｕｔ ｔｈｅ Ｓｏｌｕｔｉｏｎ ｏｆ Ｄｒｏｐ－Ｄｏｗｎ Ｍｅｎｕ Ｂａｓｅｄ ｏｎ ＣＳＳ ＺＥＮＧ Ｎｉ—ｌｉ （Ｎａｎｊｉｎｇ Ｃｏｌｌｅｇｅ ｏｆ Ｃｈｅｍｉｃａｌ Ｔｅｃｈｎｏｌｏｇｙ，Ｎａｎｊｉｎｇ ２１００４８） Ａｂｓｔｒａｃｔ：Ｔｈｅ ｃｏｎｔｅｎｔ ｏｆ ｔｈｅ Ｗｅｂｓｉｔｅ ｉｓ ｔｈｅ ｋｅｙ ｆａｃｔｏｒ ｏｆ ｓｕｃｃｅｓｓ，ａｎｄ ｔｈｅ ｎａｖｉｇａｔｉｏｎ ｉｓ ｔｈｅ ｅｍｐｈａｓｉｓ ｏｆ ｔｈｅ Ｗｅｂｓｉｔｅ＂ｓ ｄｅｓｉｇｎ．Ｔｈｅ ｍｏｒｅ ｇｏｏｄ ｃｈｏｉｃｅ ｉｓ ｕｓｉｎｇ ｄｒｏｐ——ｄｏｗｎ ｍｅｎｕ ｔｏ Ｗｅｂｓｉｔｅ ｗｈｏ ｉｓ ｉｎ— ｃｌｕｄｉｎｇ ｔｈｅ ａｂｕｎｄａｎｔ ｃｏｎｔｅｎｔ．Ａｃｃｏｍｐｌｉｓｈｅｓ ｔｈｅ ｄｒｏｐ－ｄｏｗｎ ｍｅｎｕ ｏｆ Ｗｅｂｓｉｔｅ ｂｙ ｕｓｉｎｇ ｔｈｅ ｐｓｅｕｄｏ—ｃｌａｓｓ（：ｈｏｖｅ０ ｔｈｅ ｔｅｃｈｎｏｌｏｇｙ ｏｆ ＣＳＳ，ａｎｄ ｔｈｅ ｎａｖｉｇａｔｉｏｎ ｃａｎ ｄｉｓｐｌａｙ ｉｎ ＩＥ６．０，ＩＥ８．０ ａｎｄ Ｆｉｒｅｆｏｘ ｔｈｒｏｕｇｈ ｊｏｉｎｉｎｇ ＪａｖａＳｃｒｉｐｔ ｃｏｄｅ． Ｋｅｙｗｏｒｄｓ：ＣＳＳ；Ｎａｖｉｇａｔｉｏｎ；Ｄｒｏｐ－Ｄｏｗｎ Ｍｅｎｕ；ＪａｖａＳｃｒｉｐｔ 珊代计笪加 ９ｎ１ １ ｎＱ 囝
版权声明：本文标题：基于CSS的下拉菜单解决方案的实践 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1709649806a542727.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论