资源描述：
《基于css的网页下拉菜单设计与实现》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、第21卷第4期计算机技术与发展Vo.l21No.42011年4月COMPUTERTECHNOLOGYANDDEVELOPMENTApr.2011基于CSS的网页下拉菜单设计与实现魏颖颖,熊淑华,李冲(四川大学电子信息学院,四川成都610065)摘要:随着人们对网络应用需求的不断增长,网页的内容也逐渐丰富起来,结构更加复杂。导航是网页设计的关键元素,竖直和水平排列的一级菜单往往无法满足用户的需求。传统的下拉菜单制作方法有一定的局限性,功能不易扩展,而且代码过于繁琐。CSS技术能够使网页的内容与表现相分离,代码
2、简洁、易于修改。文中基于CSS设计和实现了一个两级下拉菜单,克服了传统实现方法的不足,结构简单,网页空间占用少,可扩展性强,可以广泛应用在网页设计中。关键词:HTML;CSS;导航;子菜单中图分类号:TP311文献标识码:A文章编号:1673-629X(2011)04-0017-04DesignandImplementationofWebDrop-DownMenuBasedonCSSWEIYing-ying,XIONGShu-hua,LIChong(InstituteofElectronicInformat
3、ion,SichuanUniversity,Chengdu610065,China)Abstract:Withpeople.sgrowingdemandfornetworkapplications,contentsofwebsitearegraduallyenrichedandthestructurebecomesmorecomplex.Navigationisakeyelementinwebdesign.Verticalandhorizontalarrangementsofamenuareoftenuna
4、bletomeetus-ers.needs.Traditionalmethodsofdrop-downmenuhavesomelimitationswhichmakethefunctionsnoteasytobeexpandedandthecodeistoocumbersome.CSStechnologyseparatesthecontentandperformanceofwebpage,thusitscodeissimpleandeasytomodify.Atwo-stagedrop-downmenuis
5、designedandimplementedbasedonCSS.Thisdesignmethodovercomesthedisadvantagesoftrad-itionalmethods.Becauseofitssimplestructure,lesswebspaceoccupancyandhighexpansibility,itcanbewidelyusedinwebdesign.Keywords:HTML;CSS;navigation;submenu0引言在早期的网站上,制作多级菜单是件很麻烦的事随
6、着网络技术的不断发展,网络应用已经渗透到情,而且不易维护。但是近年来,随着新WEB标准的社会生活的各个角落。互联网成为人们快速获取、发不断普及,基于DIV+CSS的新型网页布局方式开始布和传递信息的重要渠道,Internet上发布信息主要是流行,使用CSS制作的菜单可以非常方便地为网站带通过网站来实现的,网页作为网站呈现给用户的界面,来清晰的导航支持。CSS是CascadingStyleSheets(层是制作网站必不可少的一部分。叠样式表)的缩写,它是一种用来结构化文档、添加样导航是网页中非常重要的一项功能
7、,各式各样的式的计算机语言。CSS布局与结构化语言HTML相网站都要用到导航菜单,便于用户了解整个网站的内结合能帮助设计师将内容与表现相分离,只要对相应容结构,有选择性地浏览自己所需的内容。传统的导的CSS代码做修改,就可以改变页面的布局和呈现方[2]航有竖直或水平方向排列的菜单,但是当网站的内容式,使站点的访问及维护更加容易。比较丰富,结构比较复杂的时候,一级导航菜单往往就文中在HTML无序列表的结构基础上基于CSS不够用了,这时就需要多级菜单来实现层次结构。下技术制作了一个两级下拉菜单。拉菜单是网页上最
8、常见的效果之一,用鼠标轻轻一点或是移过去,就出现一个更加详细的子菜单,它不仅节1基于CSS的网页下拉菜单设计[1]省了网页排版的空间,而且使网页布局简洁有序。1.1设计原理文中下拉菜单的外层结构采用HTML文档的无序收稿日期:2010-08-20;修回日期:2010-11-13列表,通过
标记和- 标记来实现。首标记<基金项目:四川省科技支撑计划项目(0020505501111)ul>和尾标记
