CSS在导航菜单中应用.docVIP

CSS在导航菜单中应用 　　【摘 要】导航菜单是网页设计中的重要内容，利用CSS可以制作出效果丰富的导航菜单。文章使用ul无序列表和CSS分别制作了水平导航菜单和纵向导航菜单，给出了在导航菜单制作过程中各网页元素的CSS样式的设置方法，分析了各CSS样式属性的具体应用方法，并就其中的浏览器兼容性问题进了讨论。 　　【关键词】CSS；导航菜单 　　0 引言 　　CSS，层叠样式表（英文全称：Cascading Style Sheets）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，具有更好的易用性和拓展性，已被广泛用于网页设计。 　　导航菜单是网页设计中的重要内容，它为网站的访问者提供整个网站的概况，使其可以方便地访问到所需的内容。通过CSS可以描述丰富的导航显示效果。本文以导航菜单的制作为例，探讨CSS在网页制作中的应用。 　　1 CSS的概念与功能 　　CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。 　　CSS样式表的功能可以归纳为以下几点[1]： 　　（1）提供了丰富的文档样式外观，可以灵活控制页面中文字的字体、颜色、大小、间距、行高、缩进及对其方式； 　　（2）可以为网页中的任何元素设置背景颜色和背景图片，并且可以控制背景图片的位置； 　　（3）允许为任何元素创建边框，可单独设置上下左右各边框的样式； 　　（4）精确控制网页中各元素的大小和位置，并可调整元素边框与其他元素间的距离，以及元素边框与元素内容间的距离； 　　（5）可以给页中的元素设置各种过滤器，从而产生诸如圆角、阴影、模糊、透明等效果，而这些效果以往只能在图像处理软件中才能实现； 　　（6）可以与脚本语言相结合，使网页中的元素产生各种动态效果，改善了flash动画中图片不能动态更新的缺点。 　　2 CSS在横向导航菜单中的应用 　　?M向导航菜单一般出现在网页顶部，提供网站在整体结构。以图1所示导航菜单为例，横向导航菜单制作过程如下。 　　2.1 编写导航菜单的HTML代码 　　2.2 设置外层div的样式 　　在外层div上设置导航栏的整体样式，需设置导航条的宽度、高度、背景颜色、居中显示。此处CSS样式设置如下。 　　.nav { height： 40px；width： 600px；background-color： #0C6；margin： 0px，auto； } 　　设置导航条宽度为600像素，高度为40像素，背景色为绿色，居中。 　　效果如图2所示。 　　2.3 设置ul列表的样式 　　从图2可以看到，ul列表标签默认的是有边距的。不同浏览器对列表ul所具有的内外边距属性具有不同的定义，在不同的显示器下默认的边距是不同的。这需要设置ul的CSS属性margin： 0px； padding： 0px；来去掉默认的边距设置，从而保证在不同的浏览器中ul边距一致。列表项前的项目符号也不需要，可设置list-style-type： none去掉项目符号。ul标签的CSS样式设置如下。 　　.nav ul { height： 40 px； width： 600 px； list-style-type： none； margin： 0px； padding： 0px； } 　　设置列表宽度为600像素，高度为40像素，去掉项目符号，去掉默认的边距设置。 　　2.4 设置列表项li的样式 　　下面来调整每一个导航菜单项目的显示方式，这里通过li样式的设置来实现。此处列表项的样式主要有：宽度、高度、文字样式、水平居中，垂直居中，横向排列。其中，垂直居中需通过设置行高line-height： 40px来实现。原本li是纵向排列的，此时需设置浮动float： left来实现横向排列。li标签的CSS样式设置如下。 　　.nav ul li { font-size： 14px； font-weight： bold； color： #FFF； float： left； height： 40px； width： 100px； text-align： center； line-height： 40px； } 　　设置列表项宽度为100像素，高度为40像素，字号14像素，加粗，白色，水平居中，垂直居中，横向从左到右依次排列。效果如图3所示。 　　2.5 设置超链接样式 　　从图3可以看出，虽然设置了列表项文字为白色，但此时文字却是蓝色的。这是因为列表项