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在横向导航菜单中的应用

橫向导航菜单一般出现在网页顶部，提供网站在整体结构。以图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可以看出，虽然设置了列表项文字为白色，但此时文字却是蓝色的。这是因为列表项上加入了超链接，默认的链接文字是蓝色加下划线的。可以通过设置链接样式来调整链接文字效果。此处调整默认链接和已访问过的链接文字为白色，去掉下划线。CSS样式设置如下。

.nav ul li a：link { color： #FFF； text-decoration： none； }

.nav ul li a：visited { color： #FFF；text-decoration： none； }

2.6 设置超链接的鼠标经过样式

可以设置超链接的鼠标经过样式a：hover，当鼠标经过时，改变链接内容的背景颜色和文字颜色，更清晰的展现链接内容，网页效果也会更好。此处鼠标经过样式a：hover设置如下。

.nav ul li a：hover { color： #063；text-decoration： none； background-color： #CFC； display： block；}endprint

设置鼠标经过时区块背景为浅绿色，链接文字为绿色，无下划线，块级显示。注意，鼠标经过时改变背景颜色，需设置a：hover样式的显示属性display为block，否则仅在文字下方有背景颜色。

完成后即可以看到图1所示的效果。

需要注意的是，如果把.nav ul li a：hover样式放在.nav ul li a：link之前时，鼠标经过样式中不起作用了。这是因为在CSS规范中，超链接样式的排列顺序： L-V-H-A，即a：hover必须出现在a：visited之后，否则会被隐藏[2]。

图4 纵向导航菜单效果

3 CSS在纵向导航菜单中的应用

纵向导航菜单一般出现在网页左侧，提供网页某个具体内容的导航。以图4所示导航菜单为例，纵向导航菜单制作过程如下。

3.1 编写导航菜单的HTML代码

3.2 设置外层div的样式

在外层div上设置导航栏的整体样式，需设置导航条的宽度、背景颜色等。此处CSS样式设置如下。

.menu {width： 200px；background-color： #CFFACF；}

设置导航条宽度为200像素，背景色为绿色。

3.3 设置ul列表的样式

ul标签的CSS样式设置如下。

.menu ul {width： 200px；margin： 0px；padding： 0px；list-style-type： none；border： 1px solid #3F9；}

设置列表宽度为200像素，去掉默认的边距设置，去掉项目符号，四周加上1像素的实线绿色边框。

3.4 设置列表项li的样式

Li标签上设置每一个导航菜单项目的显示方式。此处列表项的样式主要有：宽度、高度、文字样式、水平缩进，垂直居中，项目图标、下边线。

其中，CSS中可以通过设置列表的前导图片list-style-image属性实现自定义列表项目图片，但图片与其后的文字对齐会有浏览器兼容性问题。此处通过背景定位和字符缩进的方法进行解决，即把前导图片作为li的背景，通过背景图片的位置来控制图片的位置，同时设置文字缩进。

li标签的CSS样式设置如下。

.menu ul li {width： 200px；height： 35px；font-size： 14px；font-weight： bold；line-height： 35px； text-indent： 40px；background-image： url（ima/redarrow.gif）；background-repeat： no-repeat； background-position： 15px 13px；border-bottom：1px solid #3F9；}

设置列表项宽度为200像素，高度为35像素，字号14像素，加粗，缩进40像素，垂直居中，背景图片不重复，水平偏移15像素，垂直偏移13像素，下边框为1像素的綠色实线。

3.5 设置超链接样式

调整链接文字为灰色，去掉下划线。CSS样式设置如下。

.menu ul li a { color： #666；text-decoration： none；}

完成后即可以看到图4所示的效果。

4 结束语

通过水平导航菜单和纵向导航菜单的制作，分析了CSS在导航菜单中的应用，并就其中的浏览器兼容性问题进了讨论。拥有易用的导航条对于任何网站都很重要。通过 CSS，能够把乏味的 HTML 菜单转换为漂亮的导航栏。

【参考文献】

[1]张洪斌，刘万辉.网页设计与制作（HTML+CSS+JavaScript）[M].北京：高等教育出版社，2013：59.

[2]马浩，文福安，孙燕莲.标签浏览器兼容性问题的探讨[J].2010 Third International Conference on Education Technology and Training （ETT）：201-204.