基于CSS的网页下拉菜单设计与实现

第２１卷第４期　计算机技术与发展　Ｖｏ１．２１　Ｎｏ．４　２０１１年４月　ＣＯＭＰＵＴＥＲ　ＴＥｅＨＮＯＬＯＧＹ　ＡＮＤ　ＤＥＶＥＬＯＰＭＥＮＴ　Ａｐｒ．　２０１１　基于ＣＳＳ的网页下拉菜单设计与实现　魏颖颖，熊淑华，李　冲　（四川大学电子信息学院，四川成都６１００６５）　摘要：随着人们对网络应用需求的不断增长，网页的内容也逐渐丰富起来，结构更加复杂。导航是网页设计的关键元　素．竖直和水平排列的一级菜单往往无法满足用户的需求。传统的下拉菜单制作方法有一定的局限性，功能不易扩展，而　且代码过于繁琐。ＣＳＳ技术能够使网页的内容与表现相分离，代码简洁、易于修改。文中基于ＣＳＳ设计和实现了一个两级　下拉菜单，克服了传统实现方法的不足，结构简单，网页空间占用少，可扩展性强，可以广泛应用在网页设计中。　关键词：ＨＴＭＬ；ＣＳＳ；导航；子菜单　中图分类号：ＴＰ３１１　文献标识码：Ａ　文章编号：１６７３—６２９Ｘ（２０１１）０４—００１７—０４　Ｄｅｓｉｇｎ　ａｎｄ　Ｉｍｐｌｅｍｅｎｔａｔｉｏｎ　ｏｆ　Ｗｅｂ　Ｄｒｏｐ－Ｄｏｗｎ　Ｍｅｎｕ　Ｂａｓｅｄ　ｏｎ　ＣＳＳ　ＷＥＩ　Ｙｉｎｇ－ｙｉｎｇ，ＸＩＯＮＧ　Ｓｈｕ—ｈｕａ，ＬＩ　Ｃｈｏｎｇ　（Ｉｎｓｔｉｔｕｔｅ　ｏｆ　Ｅｌｅｃｔｒｏｎｉｃ　Ｉｎｆｏｒｍａｔｉｏｎ，Ｓｉｃｈｕａｎ　Ｕｎｉｖｅｒｓｉｔｙ，Ｃｈｅｎｇｄｕ　６１００６５，Ｃｈｉｎａ）　Ａｂｓｔｒａｃｔ：Ｗｉｔｈ　ｐｅｏｐｌｅ’Ｓ　ｇｒｏｗｉｎｇ　ｄｅｍａｎｄ　ｆｏｒ　ｎｅｔｗｏｒｋ　ａｐｐ￣ｃａｔｉｏｎｓ，ｃｏｎｔｅｎｔｓ　ｏｆ　ｗｅｂｓｉｔｅ　ａｒｅ　ｇｒａｄｕＭｌｙ　ｅｎｒｉｃｈｅｄ　ａｎｄ　ｔｈｅ　ｓｔｒｕｃｔｕｒｅ　ｂｅｃｏｍｅｓ　ｍｏｒｅ　ｃｏｍｐｌｅｘ．Ｎａｖｉｇａｔｉｏｎ　ｉｓ　ａ　ｋｅｙ　ｅｌｅｍｅｎｔ　ｉｎ　ｗｅｂ　ｄｅｓｉｇｎ．Ｖｅｒｔｉｃａｌ　ａｎｄ　ｈｏｒｉｚｏｎｔａｌ　ａｒｒｎａｇｅｍｅｎｔｓ　ｏｆ　ａ　ｍｅｎｕ　ａｒｅ　ｏｆｔｅｎ　ｕｎａｂｌｅ　ｔｏ　ｍｅｅｔ　ＵＳ—　ｅｒｓ’ｎｅｅｄｓ．Ｔｒａｄｉｔｉｏｎａｌ　ｍｅｔｈｏｄｓ　ｏｆ　ｄｒｏｐ－ｄｏｗｎ　ｍｅｎｕ　ｈａｖｅ　ｓｏｍｅ　ｌｉｍｉｔａｔｉｏｎｓ　ｗｈｉｃｈ　ｍａｋｅ　ｔｈｅ　ｆｕｎｃｔｉｏｎｓ　ｎｏｔ　ｅａｓｙ　ｔｏ　ｂｅ　ｅｘｐａｎｄｅｄ　ａｎｄ　ｔｈｅ　ｃｏｄｅ　ｉｓ　ｔｏｏ　ｃｕｍｂｅｒｓｏｍｅ．ＣＳＳ　ｔｅｃｈｎｏｌｏｇｙ　ｓｅｐａｒａｔｅｓ　ｔｈｅ　ｃｏｎｔｅｎｔ　ａｎｄ　ｐｅｒｆｏｒｍａｎｃｅ　ｏｆ　ｗｅｂ　ｐａｇｅ，ｔｈｕｓ　ｉｔｓ　ｃｏｄｅ　ｉｓ　ｓｉｍｐｌｅ　ｎａｄ　ｅａｓｙ　ｔｏ　ｍｏｄｉｆｙ．　Ａ　ｔｗｏ—ｓｔａｇｅ　ｄｒｏｐ－ｄｏｗｎ　ｍｅｎｕ　ｉｓ　ｄｅｓｉｇｎｅｄ　ａｎｄ　ｉｍｐｌｅｍｅｎｔｅｄ　ｂａｓｅｄ　ｏｎ　ＣＳＳ．Ｔｈｉｓ　ｄｅｓｉｇｎ　ｍｅｔｈｏｄ　ｏｖｅｒｃｏｍｅｓ　ｔｈｅ　ｄｉｓａｄｖａｎｔａｇｅｓ　ｏｆ　ｔｍｄｉ，　ｉｆｏｎａｌ　ｍｅｔｈｏｄｓ．　Ｂｅｃａｕｓｅ　ｏｆ　ｉｔｓ　ｓｉｍｐｌｅ　ｓｔｒｕｃｔｕｒｅ，ｌｅｓｓ　ｗｅｂ　ｓｐａｃｅ　ｏｃｃｕｐａｎｃｙ　ａｎｄ　ｈｉｇｈ　ｅｘｐａｎｓｉｂｉｌｉｔｙ，ｉｔ　Ｃａｎ　ｂｅ　ｗｉｄｅｌｙ　ｕｓｅｄ　ｉｎ　ｗｅｂ　ｄｅｓｉｎｇ．　Ｋｅｙ　ｗｏｒｄｓ：ＨＴＭＬ；ＣＳＳ；ｎａｖｉｇａｔｉｏｎ；ｓｕｂｍｅｎｕ　Ｏ　引　言　在早期的网站上，制作多级菜单是件很麻烦的事　随着网络技术的不断发展，网络应用已经渗透到　情，而且不易维护。但是近年来，随着新ＷＥＢ标准的　社会生活的各个角落。互联网成为人们快速获取、发　不断普及．基于ＤＩＶ＋ＣＳＳ的新型网页布局方式开始流　布和传递信息的重要渠道，Ｉｎｔｅｍｅｔ上发布信息主要是　行．使用ＣＳＳ制作的菜单可以非常方便地为网站带来　通过网站来实现的，网页作为网站呈现给用户的界面，　清晰的导航支持。ＣＳＳ是Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ（层叠　是制作网站必不可少的一部分。　样式表）的缩写，它是一种用来结构化文档、添加样式　导航是网页中非常重要的一项功能，各式各样的　的计算机语言。ＣＳＳ布局与结构化语言ＨＴＭＬ相结　网站都要用到导航菜单．便于用户了解整个网站的内　合能帮助设计师将内容与表现相分离，只要对相应的　容结构，有选择性地浏览自己所需的内容。传统的导　ＣＳＳ代码做修改，就可以改变页面的布局和呈现方式，　航有竖直或水平方向排列的菜单，但是当网站的内容　使站点的访问及维护更加容易　］　比较丰富，结构比较复杂的时候，一级导航菜单往往就　文中在ＨＴＭＬ无序列表的结构基础上基于ＣＳＳ　不够用了．这时就需要多级菜单来实现层次结构。下　技术制作了一个两级下拉菜单。　拉菜单是网页上最常见的效果之一，用鼠标轻轻一点　或是移过去，就出现一个更加详细的子菜单，它不仅节　１基于ＣＳＳ的网页下拉菜单设计　省了网页排版的空间，而且使网页布局简洁有序…。　Ｉ．Ｉ设计原理　文中下拉菜单的外层结构采用ＨＴＭＬ文档的无序　收稿日期：２０１０一ｏ８—２０；修回日期：２０１０—１ｌ一１３　列表，通过＜ｕｌ＞标记和＜ｌｉ＞标记来实现。首标记＜ｕｌ＞　基金项目：四川省科技支撑计划项目（００２０５０５５０１１１１）　作者简介：魏颖颖（１９８７一），女，河南安阳人，硕士研究生，研究方向　和尾标记＜／ｕｌ＞之间的部分是无序列表的内容，＜ｌｉ＞和　为多媒体通信；熊淑华，副教授，硕士生导师，研究方向为多媒体通　＜／ｌｉ＞之间是列表项的内容Ｉ３］。菜单的内层结构是在　信。　每个ｌｉ列表项的内部采用另外一组ＨＴＭＬ标记一ｄｌ、　

・１８・　计算机技术与发展　第２１卷　ｄｔ和ｄｄ，这组标记非常适合在设计子菜单中使用。ｄｌ　称为“定义列表”，使用方法相当于ｕｌ：ｄｔ和ｄｄ分别称　为“定义标题”和“定义描述”，使用方法相当于ｌｉ。　设计过程是首先定义菜单的ＨＴＭＬ结构．然后利　用ＣＳＳ设置样式，最终实现当鼠标经过主菜单项时相　应的子菜单打开，鼠标离开时子菜单关闭的效果。　１．２核心技术　文中用到的核心技术是ＣＳＳ．它是由Ｗ３Ｃ定义和　维护的一种标准。用来取代基于表格的布局、框架以及　其他非标准的表现方法。它与ＨＴＭＬ的结合使用能够　将网页的内容和表现相分离．通过编写不同的ＣＳＳ代　码可以使相同的网页内容以不同的页面布局显示出　来，改版方便，不需要变动页面内容，清晰合理的页面　结构可以提高网站的可用性。　ＣＳＳ的语法很简单，一个样式表由一组规则组成。　每个规则由一个“选择器”和一个定义部分组成。每　个定义部分包含一组由半角分号（；）分离的定义。这　组定义放在一对大括号（｛｝）之间。每个定义由一个　属性，一个半角冒号（：）和一个值组成＿４　］。　选择器通常为文档中的元素，如ＨＴＭＬ中的＜ｂｏｄｙ　＞，＜ｐ＞等标签，多个选择器可以用半角逗号（，）隔开。　还可以在文档结构中定义ＩＤ选择器和类选择器，ＣＳＳ　样式表中ＩＤ选择器以（样）开头，类选择器由（．）开头，　ＩＤ选择器的优先级高于类选择器。属性用于控制选　择器的样式。值指属性接受的设置值，可由各种关键　字组成，多个关键字以空格隔开。　ＣＳＳ样式可以采用嵌入式、内联式和外联式三种　形式来定义．外部样式表存放于扩展名为．ＣＳＳ的文件　中．在＜ｈｅａｄ＞内使用＜ｌｉｎｋ＞标签将文件链接到ＨＴＭＬ　中，引用方式如下：＜ｌｉｎｋ　ｒｅｌ＝“ｓｔｙｌｅｓｈｅｅｔ”ｈｒｅｆ“ｍｅｎ．　ｕ．ＣＳＳ”ｔｙｐｅ＝“ｔｅｘｔ／ｃｓｓ”／＞　这条引用语句也可以放在文件的ｂｏｄｙ部位．习惯　放在ｈｅａｄ（头部）更便于代码的调试和查找＿６］。这种　外联引用ＣＳＳ样式的方式可以提升工作效率，节约服　务器的带宽。文中正是采用外部样式表来定义下拉菜　单的ＣＳＳ样式。　１．３代码设计　１．３．１　建立菜单的整体结构　把整个菜单分为三组：各地美食，休闲娱乐和辅导　书籍。首先用ｕｌ和ｌｉ标记定义出外层结构，然后在每　一个ｌｉ列表项目中定义内层结构，使用ｄｌ定义一个菜　单项，一级菜单文字用ｄｔ定义，子菜单文字用ｄｄ定　义。以下列出这三组列表项的ＨＴＭＬ代码　］。　＜ｂｏｄｙ＞　＜ｕｌ　ｉｄ＝“ｍｅｎｕ”＞　＜１ｉ＞　＜ｄｌ＞　＜ｄｔ＞＜ａ　ｈｒｅｆ＝“＃”＞各地美食＜／ａ＞＜／ｄｔ＞　＜ｄｄ＞＜ａ　ｈｒｅｆ＝“样”＞北京＜／ａ＞＜／ｄｄ＞　＜ｄｄ＞＜ａ　ｈｒｅｆ＝“＃”＞上海＜／ａ＞＜／ｄｄ＞　＜ｄｄ　ｃｌａｓｓ＝“ｌａｓｔ”＞＜ａ　ｈｒｅｆ＝“＃”＞成都＜／ａ＞＜／ｄｄ＞　＜／ｄｌ＞　＜／ｌｉ＞　＜ｌｉ＞　＜ｄｌ＞　＜ｄｔ＞＜ａ　ｈｒｅｆ＝“＃”＞休闲娱乐＜／ａ＞＜／ｄｔ＞　＜ｄｄ＞＜ａ　ｈｒｅｆ＝“＃”＞影视＜／ａ＞＜／ｄｄ＞　＜ｄｄ＞＜ａ　ｈｒｅｆ＝“样”＞音乐＜／ａ＞＜／ｄｄ＞　＜ｄｄ　ｃｌａｓｓ＝“ｌａｓｔ”＞＜ａ　ｈｒｅｆ＝“＃”＞书籍＜／ａ＞＜／ｄｄ＞　＜／ｄｌ＞　（／ｌｉ＞　＜ｌｉ＞　＜ｄｌ＞　＜ｄｔ＞＜ａ　ｈｒｅｆ＝“＃”＞辅导书籍＜／ａ＞＜／ｄｔ＞　＜ｄｄ＞＜ａ　ｈｒｅｆ＝“＃”＞语文＜／ａ＞＜／ｄｄ＞　＜ｄｄ＞＜ａ　ｈｒｅｆ＝“＃”＞数学＜／ａ＞＜／ｄｄ＞　＜ｄｄ　ｃｌａｓｓ＝“ｌｓａｔ”＞＜ａ　ｈｒｅｆ＝“＃”＞英语＜／ａ＞＜／ｄｄ＞　＜／ｄｌ＞　＜／ｌｉ＞　＜／ｕｌ＞　＜／ｂｏｄｙ＞　１．３．２设置外层结构的ＣＳＳ样式　对于菜单ｕ１和ｌｉ的外层结构。首先进行常规设　置，包括列表宽度、内外边距、字体等属性的设置。　＃ｍｅｎｕ｛　ｍａｒｇｉｎ：０：／　外边距设置为０　／　ｐａｄｄｉｎｇ：０；／　内边距设置为０　／　ｗｉｄｔｈ：４６０ｐｘ；／　设置整体宽度为４６０ｐｘ　／　ｌｉｓｔ—ｓｔ）ｒｌｅ—ｔｙｐｅ：ｎｏｎｅ；　／　清除列表项前默认的圆点　／　ｆｏｎｔ：１ｌｐｘ　Ａｘｉａｌ；　｝　＃ｍｅｎｕ　ｌｉ｛　ｌｆｏａｔ：ｌｅｆｔ；　／　设置向左浮动．以实现横向排列　／　ｐａｄｄｉｎｇ：０；　ｍａｒｇｉｎ－ｆｉｇｈｔ：１ｐｘ；　／　使各个菜单项之间间隔１像素　／　ｗｉｄｔｈ：１５０ｐｘ；　／　设置每个列表项的宽度均为１５０ｐｘ　／　在上面所述代码中，每个列表项ｌｉ的ｍａｒｇｉｎ—ｒｉｇｈｔ　设置为若干个像素值（此处设置了１像素）可以使得　各个菜单项之间有一定的间隔。另外，ｌｉ列表默认的　采用竖直方式排列，为了实现横向排列效果，便于子菜　

第４期　魏颖颖等：基于ＣＳＳ的网页下拉菜单设计与实现　・１９・　单项的设计，在ｌｉ样式的第一行就把浮动方式（ｆｌｏａｔ）　属性的值设置为了ｌｅｆｔ…。　１．３．３设置内层结构的ＣＳＳ样式　／　主菜单项下面的暗红色边框　／　＃ｍｅｎｕ　ｌｉ　ｄｄ．１ａｓｔ｛　ｂｏｒｄｅｒ－ｂｏｔｔｏｍ：ｌ　ｐｘ　ｓｏｌｉｄ＃ｂＯＯ；｝　／　子菜单项下面的暗红色边框　／　Ｃ．链接文字效果。　对于菜单每个列表项ｌｉ之间的内层结构。以第一　组菜单为例设置ＣＳＳ样式。首先对ｄｌ列表进行如下　的常规设置：　＃ｍｅｎｕ　ｌｉ　ｄｌ｛　ｗｉｄｔｈ：１５０ｐｘ；　ｍａｒｇｉｎ：０；　ｐａｄｄｉｎｇ—ｂｏｔｔｏｍ：ｌＯｐｘ；　ｂａｃｋｇｒｏｕｎｄ：＃９ｔ９　ｕｒｌ（ｂｏｔｔｏｍ．ｇｉｆ）ｎｏ－ｒｅｐｅａｔ　ｂｏｔｔｏｍ　ｌｅｆｔ；　｝　其中，ｐａｄｄｉｎｇ—ｂｏｔｔｏｍ设置为１０ｐｘ，用于预留打开　子菜单项的空间。　其次，分别对主菜单项ｄｔ和子菜单项ｄｄ设置样　式，常规设置有以下几项：　＃ｍｅｎｕ　ｌｉ　ｄｔ｛　ｍａｒｇｉｎ：０：　ｐａｄｄｉｎｇ：５ｐｘ；　ｔｅｘｔ—ａｌｉｇｎ：ｃｅｎｔｅｒ；／　使文字居中显示　／　｝　＃ｍｅｎｕ　ｌｉ　ｄｄ｛　ｍａｒｇｉｎ：０：　ｐａｄｄｉｎｇ：０：　ｃｏｌｏｒ：＃ｆｆｆ；　ｂａｃｋｇｒｏｕｎｄ：＃４７ａ；　｝　除此之外．最为关键的技术是以下四种主要效果　的实现：　Ａ．圆角效果。　在ＣＳＳ中，网页元素的圆角效果是采用插入带圆　角的背景图片，并设置放置方位的方式来实现的　。　文中使用了两张背景图片分别实现主菜单项上端和子　菜单项下端的圆角效果，与背景颜色同时设置。　ｂａｃｋｇｒｏｕｎｄ：＃９ｆ９　ｕｒｌ（ｂｏｔｔｏｍ．ｇｉｆ）ｎｏ－ｒｅｐｅａｔ　ｂｏｔ—　ｔｏｍ　ｌｅｆｔ；　／　给每个菜单项增加背景颜色。背景图片放在最　底下．使下端产生圆角效果　／　ｂａｃｋｇｒｏｕｎｄ：＃ｆ６０　ｕｒｌ（ｔｏｐ．ｇｉｆ）ｎｏ－ｒｅｐｅａｔ　ｔｏｐ　ｌｅｆｔ；　／　显示主菜单项上方的圆角　／　Ｂ．主菜单与子菜单的分割效果。　在主菜单项下面设置一条暗红色的边框作为和子　菜单的分割。同样的，在子菜单项最下面的ｄｄ项下端　也设置一条边框，使其与上端的分割线相对应。　ｂｏｒｄｅｒ－ｂｏｔｔｏｍ：１　ｐｘ　ｓｏｌｉｄ＃ｂＯＯ；　（１）主菜单项的链接文字效果设置¨　。　＃ｍｅｎｕ　ｌｉ　ｄｔ　ａ，＃ｍｅｎｕ　ｌｉ　ｄｔ　ａ：ｖｉｓｉｔｅｄ｛　ｄｉｓｐｌａｙ：ｂｌｏｃｋ；／　设置为块状元素，使得当鼠标　经过整块区域时都能打开子菜单　／　ｃｏｌｏｒ：＃ｆｆｆ：／￥字体为白色　／　ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ：／｝去掉下划线　／　｝　（２）子菜单项的链接文字效果设置。　＃ｍｅｎｕ　ｌｉ　ｄｄ　ａ，＃ｍｅｎｕ　ｌｉ　ｄｄ　ａ：ｖｉｓｉｔｅｄ｛　ｈｅｉｇｈｔ：１ｅｍ；　ｄｉｓｐｌａｙ：ｂｌｏｃｋ；　ｃｏｌｏｒ：＃ｆｆｆ；　ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；　ｐａｄｄｉｎｇ：４ｐｘ　５ｐｘ　４ｐｘ　２０ｐｘ；　ｂａｃｋｇｒｏｕｎｄ：＃－４７ａ　ｕｒｌ（ａｒｒｏｗ．ｇｉｆ）ｎｏ－ｒｅｐｅａｔ　ｌＯｐｘ　１０ｐｘ；　／　添加一个小三角形图像做背景　／　ｆ　Ｄ．鼠标响应效果。　（１）设置鼠标没有经过主菜单项区域时隐藏子菜　单的效果。　＃ｍｅｎｕ　ｌｉ　ｄｄ｛ｄｉｓｐｌａｙ：ｎｏｎｅ；｝　（２）对ｌｉ使用：ｈｏｖｅｒ伪类，以实现当鼠标经过时　打开子菜单的效果　…。　＃ｍｅｎｕ　ｌｉ：ｈｏｖｅｒ　ｄｄ，＃ｍｅｎｕ　ｌｉ　ａ：ｈｏｖｅｒ　ｄｄ｛ｄｉｓｐｌａｙ：　ｂｌｏｃｋ；｝　（３）设置当鼠标经过子菜单的某一项时，字体和　背景颜色发生变化，以显示出区别。　＃ｍｅｎｕ　ｌｉ　ｄｄ　ａ：ｈｏｖｅｒ｛　ｂａｃｋｇｒｏｕｎｄ：＃１４７；ｃｏｌｏｒ：＃９ｃｆ；｝　２基于ＣＳＳ的网页下拉菜单实现　至此，整个下拉菜单的ＨＴＭＬ结构和ＣＳＳ样式就　设计完成了，在ＩＥ７或Ｆｉｒｅｆｏｘ中可显示出下拉效果。　２．１　鼠标没有经过主菜单项区域的显示效果　在网页浏览者没有进行鼠标操作的情况下，此下　拉菜单的显示效果如图１所示，各主菜单项呈水平排　列，文字下方有一条边框作为和子菜单项的分割，此时　鼠标没有经过主菜单项区域，按照前面的鼠标响应设　图１　鼠标没有经过主菜单项区域时的演示效果　

・２０・　计算机技术与发展　第２１卷　置，子菜单项被隐藏。　２．２　鼠标经过主菜单项区域的显示效果　接文字和鼠标响应的显示效果，最终达到当鼠标指针　经过主菜单项区域时，子菜单项被打开的效果。对于　大多数的网站而言，两级的下拉菜单已经可以满足绝　大多数的需要，通过调整ＣＳＳ样式表中的参数还可以　当网页浏览者的鼠标经过某一主菜单项区域时，　下拉菜单效果就显示出来了，如图２所示．这时相应主　菜单ｄｌ列表ｐａｄｄｉｎｇ—ｂｏｔｔｏｍ¨　设置的１０ｐｘ预留区域　Ｉ被打开．子菜单项随之显示出来．这１０ｐｘ的区域就移　动到了子菜单最后一项的下方。整个子菜单有深色的　背景颜色和浅色的文字。每个菜单项前面的小三角形　制作出更加精美的导航菜单　。　参考文献：　［１］温谦．ＣＳＳ设计彻底研究［Ｍ］．北京：人民邮电出版社，　用于显示列表效果。当鼠标经过某一子菜单项时，其　文字和背景颜色都发生了变化。打开其他子菜单项也　是相同的效果　２ｏ０８．　『２］裴丽艳，于学垄．在网页中用ＣＳＳ技术实现纵向标签页　［Ｊ］．电脑知识与技术，２００９，５（２）：４３９—４Ｊ４１．　［３］胡［４］李海，徐华勇．ＣＳＳ完全实例教程［Ｍ］．北京：电子工业　烨．别具光芒ＤＩＶ＋ＣＳＳ网页布局与美化［Ｍ］．北京：　出版社．２００１．　人民邮电出版社　２００７．　［５］　陈柳海．实用ＣＳＳ使用经验总结［Ｊ］．科技传播，２０１０　图２　鼠标经过主菜单项区域时的演示效果　（１２）：２１９－２２２．　文中基于ＣＳＳ技术制作出来的下拉菜单样式美　观，当浏览者没有进行鼠标操作的情况下，网页上只显　示主菜单项，子菜单项是隐藏的，不会影响整个网页的　显示效果和浏览速度，当浏览者需要查看某个菜单的　『６］　丁海燕，邹疆，邱莎．用层叠样式表ＣＳＳ技术实现网页　特效［ｊ］．昆明冶金高等专科学校学报，２０１０，２６（３）：５—８．　［７］周　登，戴玉刚，付［８］柳涛．基于树结构的Ｗｅｂ信息抽取　［Ｊ］．计算机技术与发展，２００９，１９（９）：３８—４１．　鸿．ＣＳＳ样式表在网页制作中的应用［Ｊ］．科技创新导　报，２０１０（７）：３３—３４．　详细资料时就可以将鼠标移动到该主菜单项区域，这　时子菜单项就会打开，并通过列表形式展现在浏览者　的眼前，浏览者可以根据需要进入到相应的菜单项查　看相关内容。这种下拉菜单结构易于实现，实用性强，　不会占用很大的空间，在网页设计中可以被广泛采用。　［９］　吴晓燕．浅析ＣＳＳ样式在网页设计中的应用［Ｊ］．四川文理　学报，２００９（２）：４６—４８．　［１０］Ｋｕｒｎｉａｗａｎ　Ｓ　Ｈ，Ｋｉｎｇ　Ａ，Ｅｖａｎｓ　Ｄ　Ｇ，ｅｔ　ａ１．Ｐｅｒｓｏｎａｌｉｓｉｎｇ　ｗｅｂ　ｐａｇｅ　ｐｒｅｓｅｎｔａｔｉｏｎ　ｆｏｒ　ｏｌｄｅｒ　ｐｅｏｐｌｅ［Ｊ］．Ｉｎｔｅｒａｃｔｉｎｇ　ｗｉｔｈ　Ｃｏｍ—　ｐｕｔｅｒｓ，２００６，１８（３）：４５７－４７７．　３结束语　文中制作了一个两级下拉菜单。整体菜单结构的　ｆ　１　１］Ｑｕａｄｒｏｓ．Ｊ０／ｉａｏ．Ｍｉｃｒｏｔｅｘｔｕｒｅ　ｏｆ　ｃｈｌｏｒｉｄｅ　ｔｒｅａｔｅｄ　ＣｄＴｅ　ｔｈｉｎ　ｉｆｌｍｓ　ｄｅｐｏｓｉｔｅｄ　ｂｙ　ＣＳＳ　ｔｅｃｈｎｉｑｕｅ［Ｊ］．Ｊｏｕｒｎａｌ　ｏｆ　Ｍａｔｅｒｉａｌｓ　Ｓｃｉ－　ｅｎｃｅ，２００８，４３（２）：５７３—５７９．　外层使用了ＨＴＭＬ的无序列表ｕｌ和列表项ｌｉ，内层使　用了ｄ１、ｄｔ和ｄｄ分别对整体菜单项和主、子菜单项进　行标记。关键技术在于使用ＣＳＳ分别实现了圆角，链　（上接第１６页）　［２］李亚楠，刘连忠．数据交换研究［Ｊ］．计算机技术与发展，　２０ｏ８，墙（２）：５—８．　［１２］Ｒｅｉｃｈａｒｄｔ，Ｂｅｎ．Ｑｕａｎｔｕｍ　Ｕｎｉｖｅｒｓａｌｉｔｙ　ｆｒｏｍ　Ｍａｇｉｃ　Ｓｔａｔｅｓ　Ｄｉｓ—　ｔｉｌｌａｔｉｏｎ　Ａｐｐｌｉｅｄ　ｔｏ　ＣＳＳ　Ｃｏｄｅｓ［Ｊ］．Ｑｕａｎｔｕｍ　Ｉｎｆｏｒｍａｔｉｏｎ　Ｐｒｏ—　ｃｅｓｓｉｎｇ，２００５，４（３）：２５ｌ一２６４．　配器研究［Ｊ］．计算机应用研究，２００９，２６（１）：１８９—１９１．　［８］顾　宁，刘家茂，柴晓路．Ｗｅｂ　Ｓｅｒｖｉｃｅｓ原理与研发实践　『Ｍ］．北京：机械工业出版社，２００６．　［３］　王艳敏，谢强，丁秋林．基于本体和ｗｅｂ　Ｓｅｒｖｉｃｅｓ的数据　交换平台［Ｊ］．计算机技术与发展，２０１０，２０（５）：１１２一ｌ１６．　［４］Ｇｌｕｓｈｋｏ　Ｒ　Ｊ，Ｔｅｎｅｎｂａｒｍ　Ｊ　Ｍ，Ｍｅｌｔｚｅｒ　Ｂ．Ａｎ　Ｘｍｌ￣ａｍｅｗｏｒｋ　ｆｏｒ　ａｎｇｅｒ—ｂａｓｅｄ　Ｅｃｏｍｍｅｒｃｅ［Ｊ］．Ｃｏｍｍｕｎｉｃａｔｉｏｎｓ　ｏｆ　ｔｈｅ　ＡＣＭ，１９９９，４２（３）：１０６—１１４．　［９］　王海波，耿晖，姜吉．基于ＸＭＬ的数据交换的实现　『Ｊ］．计算机应用，２００１，２１（４）：６７—６８．　［１０］杨剑，唐慧佳，孙林夫，等．基于ＸＭＬ的异构数据交换系　统研究与实现［Ｊ］．计算机工程，２００５，３１（１９）：１９５—１９７．　［５］　Ｍｉｃｒｏｓｏｆｔ．Ｗｈａｔｅ　ｉｓ　ＢｉｚＴａｌｋ　Ｓｅｒｖｅｒ［ＥＢ／ＯＬ］．２００６．Ｈｔｔｐ：／／　ＷＷＷ．ｍｉｃｒｏｓｏｆｔ．ｃｏｍ／ｂｉｚｔａｌｋ／ｅｖａｌｕａｔｉｏｎ／ｗｈａｔ—ｉｓ—ｂｉｚｔａｌｋ—　ｓｅｒｖｅｒ・ａｓｐｘ・　『１１］唐俊伟，基于Ｗｅｂ技术的数据交换平台的研究与设计　『Ｄ］，西安：西北工业大学，２００６．　ｆｌ２１张奇勇，王东．基于ＸＭＬ及ＳＯＡＰ的信息交换平台研究　［６］Ｗｅｂｂｅｒ　Ｄ　Ｒ　Ｒ，Ｙａｄｅｒ　Ｍ，Ｈａｒｄｉｎ　Ｊ．Ｔｈｅ　Ｂｅｎｅｆｉｔｓ　ｏｆ　ｅｂＸＭＬ　ｏｒ　ｅ—Ｂｕｓｉｆｎｅｓｓ『Ｊ１．Ｅｌｅｃｔｒｏｎｉｃ　Ｂｕｓｉｎｅｓｓ　ＸＭＬ　Ｉｎｉｔｉａｔｉｖｅ，２００４，　２０（１２）：１２－２２．　『Ｊ］．计算机应用与软件，２００７，２４（１０）：４ｏ一４１．　『１３］祝衍军．公共数据安全交换平台的数据交换引擎研究与实　现『Ｄ］．沈阳：中国科学院研究生院，２００８．　『７１　王淑营．面向制造业产业链协同商务系统的数据交换适