基于css技术的下拉菜单制作_第1页
基于css技术的下拉菜单制作_第2页
基于css技术的下拉菜单制作_第3页
基于css技术的下拉菜单制作_第4页
基于css技术的下拉菜单制作_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

基于css技术的下拉菜单制作

0优化网页布局,实现技术互联随着网络技术的发展，网络技术在社会生活的各个领域中渗透。互联网成为人们快速获取、发布和传递信息的重要渠道,Internet上发布信息主要是通过网站来实现的,网页作为网站呈现给用户的界面,是制作网站必不可少的一部分。导航是网页中非常重要的一项功能,各式各样的网站都要用到导航菜单,便于用户了解整个网站的内容结构,有选择性地浏览自己所需的内容。传统的导航有竖直或水平方向排列的菜单,但是当网站的内容比较丰富,结构比较复杂的时候,一级导航菜单往往就不够用了,这时就需要多级菜单来实现层次结构。下拉菜单是网页上最常见的效果之一,用鼠标轻轻一点或是移过去,就出现一个更加详细的子菜单,它不仅节省了网页排版的空间,而且使网页布局简洁有序。在早期的网站上,制作多级菜单是件很麻烦的事情,而且不易维护。但是近年来,随着新WEB标准的不断普及,基于DIV+CSS的新型网页布局方式开始流行,使用CSS制作的菜单可以非常方便地为网站带来清晰的导航支持。CSS是CascadingStyleSheets(层叠样式表)的缩写,它是一种用来结构化文档、添加样式的计算机语言。CSS布局与结构化语言HTML相结合能帮助设计师将内容与表现相分离,只要对相应的CSS代码做修改,就可以改变页面的布局和呈现方式,使站点的访问及维护更加容易。文中在HTML无序列表的结构基础上基于CSS技术制作了一个两级下拉菜单。1基于网络的布局设计1.1运动表示的定义景观文中下拉菜单的外层结构采用HTML文档的无序列表,通过<ul>标记和<li>标记来实现。首标记<ul>和尾标记</ul>之间的部分是无序列表的内容,<li>和</li>之间是列表项的内容。菜单的内层结构是在每个li列表项的内部采用另外一组HTML标记—dl、dt和dd,这组标记非常适合在设计子菜单中使用。dl称为“定义列表”,使用方法相当于ul;dt和dd分别称为“定义标题”和“定义描述”,使用方法相当于li。设计过程是首先定义菜单的HTML结构,然后利用CSS设置样式,最终实现当鼠标经过主菜单项时相应的子菜单打开,鼠标离开时子菜单关闭的效果。1.2系数和平均形式文中用到的核心技术是CSS,它是由W3C定义和维护的一种标准,用来取代基于表格的布局、框架以及其他非标准的表现方法。它与HTML的结合使用能够将网页的内容和表现相分离,通过编写不同的CSS代码可以使相同的网页内容以不同的页面布局显示出来,改版方便,不需要变动页面内容,清晰合理的页面结构可以提高网站的可用性。CSS的语法很简单,一个样式表由一组规则组成。每个规则由一个“选择器”和一个定义部分组成。每个定义部分包含一组由半角分号(;)分离的定义。这组定义放在一对大括号({})之间。每个定义由一个属性,一个半角冒号(:)和一个值组成。选择器通常为文档中的元素,如HTML中的<body>,<p>等标签,多个选择器可以用半角逗号(,)隔开。还可以在文档结构中定义ID选择器和类选择器,CSS样式表中ID选择器以(#)开头,类选择器由(.)开头,ID选择器的优先级高于类选择器。属性用于控制选择器的样式。值指属性接受的设置值,可由各种关键字组成,多个关键字以空格隔开。CSS样式可以采用嵌入式、内联式和外联式三种形式来定义,外部样式表存放于扩展名为.css的文件中,在<head>内使用<link>标签将文件链接到HT-ML中,引用方式如下:<linkrel=“stylesheet”href=“menu.css”type=“text/css”/>这条引用语句也可以放在文件的body部位,习惯放在head(头部)更便于代码的调试和查找。这种外联引用CSS样式的方式可以提升工作效率,节约服务器的带宽。文中正是采用外部样式表来定义下拉菜单的CSS样式。1.3代码设计1.3.1生成被定义的以l和li标记为重心的菜单项把整个菜单分为三组:各地美食,休闲娱乐和辅导书籍。首先用ul和li标记定义出外层结构,然后在每一个li列表项目中定义内层结构,使用dl定义一个菜单项,一级菜单文字用dt定义,子菜单文字用dd定义。以下列出这三组列表项的HTML代码。1.3.2像素值密度设计对于菜单ul和li的外层结构,首先进行常规设置,包括列表宽度、内外边距、字体等属性的设置。在上面所述代码中,每个列表项li的marginright设置为若干个像素值(此处设置了1像素)可以使得各个菜单项之间有一定的间隔。另外,li列表默认的采用竖直方式排列,为了实现横向排列效果,便于子菜单项的设计,在li样式的第一行就把浮动方式(float)属性的值设置为了left。1.3.3月前后下设圆角t对于菜单每个列表项li之间的内层结构,以第一组菜单为例设置CSS样式。首先对dl列表进行如下的常规设置:其中,padding-bottom设置为10px,用于预留打开子菜单项的空间。其次,分别对主菜单项dt和子菜单项dd设置样式,常规设置有以下几项:除此之外,最为关键的技术是以下四种主要效果的实现:A.圆角效果。在CSS中,网页元素的圆角效果是采用插入带圆角的背景图片,并设置放置方位的方式来实现的。文中使用了两张背景图片分别实现主菜单项上端和子菜单项下端的圆角效果,与背景颜色同时设置。background:#9f9url(bottom.gif)no-repeatbottomleft;/*给每个菜单项增加背景颜色,背景图片放在最底下,使下端产生圆角效果*/background:#f60url(top.gif)no-repeattopleft;/*显示主菜单项上方的圆角*/B.主菜单与子菜单的分割效果。在主菜单项下面设置一条暗红色的边框作为和子菜单的分割。同样的,在子菜单项最下面的dd项下端也设置一条边框,使其与上端的分割线相对应。border-bottom:1pxsolid#b00;/*子菜单项下面的暗红色边框*/(1)主菜单项的链接文字效果设置。display:block;/*设置为块状元素,使得当鼠标经过整块区域时都能打开子菜单*/color:#fff;/*字体为白色*/text-decoration:none;/*去掉下划线*/}(2)子菜单项的链接文字效果设置。height:1em;text-decoration:none;padding:4px5px4px20px;background:#47aurl(arrow.gif)no-repeat10px10px;/*添加一个小三角形图像做背景*/}D.鼠标响应效果。(1)设置鼠标没有经过主菜单项区域时隐藏子菜单的效果。(2)对li使用:hover伪类,以实现当鼠标经过时打开子菜单的效果。(3)设置当鼠标经过子菜单的某一项时,字体和背景颜色发生变化,以显示出区别。2在网站上创建排序列表并执行它至此,整个下拉菜单的HTML结构和CSS样式就设计完成了,在IE7或Firefox中可显示出下拉效果。2.1主菜单项的显示效果在网页浏览者没有进行鼠标操作的情况下,此下拉菜单的显示效果如图1所示,各主菜单项呈水平排列,文字下方有一条边框作为和子菜单项的分割,此时鼠标没有经过主菜单项区域,按照前面的鼠标响应设置,子菜单项被隐藏。2.2网格化后的下拉菜单当网页浏览者的鼠标经过某一主菜单项区域时,下拉菜单效果就显示出来了,如图2所示,这时相应主菜单dl列表padding-bottom设置的10px预留区域被打开,子菜单项随之显示出来,这10px的区域就移动到了子菜单最后一项的下方。整个子菜单有深色的背景颜色和浅色的文字,每个菜单项前面的小三角形用于显示列表效果。当鼠标经过某一子菜单项时,其文字和背景颜色都发生了变化。打开其他子菜单项也是相同的效果。文中基于CSS技术制作出来的下拉菜单样式美观,当浏览者没有进行鼠标操作的情况下,网页上只显示主菜单项,子菜单项是隐藏的,不会影响整个网页的显示效果和浏览速度,当浏览者需要查看某个菜单的详细资料时就可以将鼠标移动到该主菜单项区域,这时子菜单项就会打开,并通过列表形式展现在浏览者的眼前,浏览者可以根据需要进入到相应的菜单项查看相关内容。这种下拉菜单结构易于实现,实用性强,不会占用很大的空间,在网页设计中可以被广泛采用。3主观站区的下拉菜单文中制作了一个两级下拉菜单。整体菜单结构的外层使用了HTML的无序列表ul和列表项li,内层使用了dl、dt和dd分别对整体菜单项和主、子菜单项进行标记。关键技术在于使用CSS分别实现了圆角,链接文字和鼠标响应的显示效果,最终达到当鼠标指针经过主菜单项区域时,子菜单项被打开的效果。对于大多数的网站而言,两级的下拉菜单已经可以满足绝大多数的需要,通过调整CSS样式表中的参数还可以制作出更加精美的导航菜单。/*主菜单项下面的暗红色边框*/order-bottom:1pxsolid#b00;}#menulidd.last{C.链接文字效果。#menul

人人文库> 全部分类> 专业文献 > 学术论文

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论