第16章用CSS设置链接与导航菜单

1、 制作丰富的超链接特效制作丰富的超链接特效 创建按钮式超链接创建按钮式超链接 制作荧光灯效果的菜单制作荧光灯效果的菜单 控制鼠标指针控制鼠标指针 设置项目列表样式设置项目列表样式 创建基于列表的导航菜单创建基于列表的导航菜单 应用滑动门技术的玻璃效果菜单应用滑动门技术的玻璃效果菜单 图图16.1 Office网站导航风格与软件风格一致网站导航风格与软件风格一致 图图16.2 Windows Mobile网站的菜单式导航网站的菜单式导航16.1 16.1 制作丰富的超链接特效制作丰富的超链接特效 在在HTMLHTML语言中，超链接是通过标语言中，超链接是通过标记记来实现的，链接的具体地址则是来实

2、现的，链接的具体地址则是利用利用标记的标记的hrefhref属性，代码如下：属性，代码如下： 前沿视频前沿视频教室教室 atext-decoration:none;atext-decoration:none;/ /* * 去掉下画线去掉下画线 * */ / 16.2 16.2 创建按钮式超链接创建按钮式超链接 首先跟所有首先跟所有HTMLHTML页面一样，建立最简单的菜单页面一样，建立最简单的菜单结构，本例使用和上面实例相同的结构，本例使用和上面实例相同的HTMLHTML结构，代结构，代码如下：码如下： Home Home East East West West North North Sou

3、th South 按钮超链接按钮超链接 #menuheight:2.5em; #menuheight:2.5em; background-color:#CCC; background-color:#CCC; atext-align:center; atext-align:center; margin:20px; margin:20px; padding:5px 10px; padding:5px 10px; line-height:2.5em; line-height:2.5em; text-decoration: none; text-decoration: none; a:link, a:

4、visitedcolor: #A62020;a:link, a:visitedcolor: #A62020;background-color: #DDD;background-color: #DDD;border-top: 1px solid #EEEEEE;border-top: 1px solid #EEEEEE;/ /* * 边框实现阴影效果边框实现阴影效果 * */ /border-left: 1px solid #EEEEEE;border-left: 1px solid #EEEEEE;border-bottom: 1px solid #717171;border-bottom:

5、1px solid #717171;border-right: 1px solid #717171;border-right: 1px solid #717171; a:hovercolor:#821818;a:hovercolor:#821818; / /* * 改变文字颜色改变文字颜色 * */ /background-color:#CCC;background-color:#CCC; / /* * 改变背景色改变背景色 * */ /border-top: 1px solid #717171;border-top: 1px solid #717171; / /* * 边框变换，实现边框变换

6、，实现“按下去按下去”的效果的效果 * */ /border-left: 1px solid #717171;border-left: 1px solid #717171;border-bottom: 1px solid #EEEEEE;border-bottom: 1px solid #EEEEEE;border-right: 1px solid #EEEEEE;border-right: 1px solid #EEEEEE; 图图16.8 最终效果最终效果16.3 16.3 制作荧光灯效果的菜单制作荧光灯效果的菜单图图16.9 荧光灯效果菜单荧光灯效果菜单16.3.1 16.3.1 创建创

7、建HTMLHTML框架框架 首先，从编写基本的首先，从编写基本的HTMLHTML文件开始，搭建出文件开始，搭建出这个菜单的基本框架，这个菜单的基本框架，HTMLHTML代码如下。代码如下。 Home Home Contact Us Contact Us Web Dev Web Dev Web Design Web Design Map Map 16.3.2 16.3.2 设置容器的设置容器的CSSCSS样式样式 （1 1）现在设置菜单）现在设置菜单divdiv容器的整体区域容器的整体区域样式，设置菜单的宽度、背景色，以及文样式，设置菜单的宽度、背景色，以及文字的字体和大小。字的字体和大小。 在

8、在HTMLHTML文件的文件的headhead部分增加部分增加CSSCSS样式表样式表代码如下。代码如下。 #menu #menu font-family:Arial font-family:Arial; ; font-size:14px; font-size:14px; font-weight:bold font-weight:bold; ; width:120px; width:120px; padding:8px; padding:8px; background:#000; background:#000; margin:0 auto; margin:0 auto; border:1px

9、 solid #ccc; border:1px solid #ccc; 16.3.3 16.3.3 设置菜单项的设置菜单项的CSSCSS样式样式 （1 1）现在就需要设置文字链接了。）现在就需要设置文字链接了。 为了使为了使5 5个文字链接依次竖直排列，需个文字链接依次竖直排列，需要将它们从要将它们从“行内元素行内元素”变为变为“块级元块级元素素”。 此外还应该为它们设置背景色和内边此外还应该为它们设置背景色和内边距。具体代码如下：距。具体代码如下： #menu a, #menu a:visited#menu a, #menu a:visited display:block; display:

10、block; padding:4px 8px; padding:4px 8px; （2 2）接下来设置文字的样式，取消下）接下来设置文字的样式，取消下画线，并将文字设置为灰色，代码如下：画线，并将文字设置为灰色，代码如下： colorcolor:#ccc:#ccc; ; text-decoration:none; text-decoration:none; （3 3）还需要给每个菜单项的上面增加）还需要给每个菜单项的上面增加一个一个“荧光灯荧光灯”，这可以通过设置上边框，这可以通过设置上边框来实现，代码如下：来实现，代码如下： border-top:8px solid #060;border-

11、top:8px solid #060; 文字链接的代码：文字链接的代码：#menu a, #menu a:visited#menu a, #menu a:visited display:block; display:block; padding:4px 8px; padding:4px 8px; color:#ccc; color:#ccc; text-decoration:none; text-decoration:none; border-top:8px solid #060; border-top:8px solid #060; height:1em; height:1em; 图图16.

12、14 在在Firefox浏览器中的效果浏览器中的效果 鼠标经过文字链接的代码：鼠标经过文字链接的代码：#menu a:hover #menu a:hover color:#FF0; color:#FF0; border-top:8px solid #0E0; border-top:8px solid #0E0; 图图16.14 在在Firefox浏览器中的效果浏览器中的效果16.4 16.4 控制鼠标指针控制鼠标指针表表16.2 cursor定制的鼠标属性值及指针效果定制的鼠标属性值及指针效果16.5 16.5 设置项目列表样式设置项目列表样式16.5.1 16.5.1 列表的符号列表的符号

13、通常的项目列表主要采用通常的项目列表主要采用ul 或者或者ol 标记，然后配合标记，然后配合li 标记列出各个项标记列出各个项目。目。 项目列表符号可用如下属性设置：项目列表符号可用如下属性设置：list-style-type:list-style-type: 图图16.16 普通项目列表普通项目列表 16.5.2 16.5.2 图片符号图片符号 除了传统的各种项目符号外，除了传统的各种项目符号外，CSSCSS还提还提供了属性供了属性list-style-imagelist-style-image，可以将项目，可以将项目符号显示为任意的图片，例如有下面一段符号显示为任意的图片，例如有下面一段代

14、码。代码。 head 项目列表项目列表 ulfont-size:0.9em; ulfont-size:0.9em; color:#00458c; color:#00458c; list-style-image: url(icon1.jpg); list-style-image: url(icon1.jpg); Home Home Contact us Contact us Web Dev Web Dev Web Design Web Design Map Map 在在IEIE 7 7和和FirefoxFirefox中的显示效果不一样中的显示效果不一样图图16.19 图片符号图片符号在在IEIE

15、 7 7和和FirefoxFirefox中的显示效果一样的做法中的显示效果一样的做法 head 项目列表项目列表 ulfont-size:0.9em;color:#00458c; ulfont-size:0.9em;color:#00458c;list-style-type:nonelist-style-type:none; li libackground:url(icon1.jpg) no-repeat;background:url(icon1.jpg) no-repeat; / /* * 添加为背景图片添加为背景图片 * */ / padding-left:25pxpadding-left:25px; / /* * 设置图标与文字的间隔设置图标与文字的间隔 * */ / Home Home Conta