第8章用CSS设置超链接与导航菜单.

第8章用CSS设置超链接与导航菜单本章简介：在一个网站中，所有页面都会通过超链接相互链接在一起，这样才会形成一个有机的整体。在各种网站中，导航都是网页中最重要的组成部分之一。因此，也出现了各式各样非常美观、实用性很强的导航样式。制作丰富的超链接特效8.1创建按钮式超链接8.2制作荧光灯效果的菜单8.3创建基于列表的导航菜单8.6应用滑动门技术的玻璃效果菜单8.7控制鼠标指针8.4设置项目列表样式8.58.1制作丰富的超链接特效超链接是网页上最普通的元素，通过超链接能够实现页面的跳转、功能的激活等，因此超链接也是与用户打交道最多的元素之一。本节主要介绍超链接的各种效果，包括超链接的各种状态、伪属性和按钮特效等。普通的超链接没有下划线的超链接8.2创建按钮式超链接很多网页上的超链接都制作成各种按钮的效果，这些效果大都采用了各种图片。本节仅仅通过CSS的普通属性来模拟按钮的效果。按钮式超链接8.3制作荧光灯效果的菜单下面制作一个简单的竖直排列的菜单效果，在每个菜单项的上边有一条深橙色的横线，当鼠标指针滑过时，横线由深橙色变成浅黄色，就好像一个荧光灯点亮后的效果，同时菜单文字变为青色，以更明显的方式提示用户选中了哪个菜单项目。荧光灯效果菜单8.3.1创建HTML框架首先，从编写基本的HTML文件开始，搭建出这个菜单的基本框架。没有任何CSS设置时的效果8.3.2设置容器的CSS样式styletype=text/css#menu{font-family:Arial;font-size:14px;font-weight:bold;width:120px;background:#000;border:1pxsolid#ccc;padding:8px;margin:0auto;}/style设置内外边距后的效果设置了#menu容器后的效果8.3.3设置菜单项的CSS样式styletype=text/css#menua,#menua:visited{display:block;padding:4px8px;color:#ccc;text-decoration:none;border-top:8pxsolid#060;}#menua:hover{color:#FF0;border-top:8pxsolid#0E0;}/style在Firefox和IE中的不同效果在Firefox和IE中的不同效果8.4控制鼠标指针在浏览网页时，通常看到的鼠标指针的形状有箭头、手形和I字形，而在Windows环境下实际看到的鼠标指针种类要比这个多得多。CSS弥补了HTML在这方面的不足，通过cursor属性可以设置各式各样的鼠标指针样式。8.5设置项目列表样式传统的HTML提供了项目列表的基本功能，包括顺序式列表的ol标记和无顺序列表的ul标记等。当引入CSS后，项目列表被赋予了很多新的属性，甚至超越了它最初设计时的功能。本节主要围绕项目列表的基本CSS属性进行相关介绍，包括项目列表的编号、缩进和位置等。8.5.1列表的符号通常的项目列表主要采用ul或者ol标记，然后配合li标记列出各个项目。普通项目列表8.5.2图片符号除了传统的各种项目符号外，CSS还提供了属性list-style-image，可以将项目符号显示为任意的图片。图片符号8.6创建基于列表的导航菜单对于一个成功的网站，导航菜单是永远不可缺少的。导航菜单的风格往往也决定了整个网站的风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。在传统方式下，制作导航菜单是很麻烦的工作。需要使用表格，设置复杂的属性，还需要使用JavaScript实现相应鼠标指针经过或单击的动作。如果用CSS来制作导航菜单，实现起来非常简单。8.6.1简单的竖直排列菜单当项目列表的list-style-type属性值为“none”时，制作各式各样的菜单和导航条便成了项目列表常见用处之一，通过各种CSS属性变幻可以达到很多意想不到的导航效果。无需表格的菜8.6.2横竖自由转换菜单导航条不只有竖直排列的形式，很多时候还需要页面的菜单能够在水平方向显示。通过CSS属性的控制，可以轻松实现项目列表导航条的横竖转换。水平菜单8.7应用滑动门技术的玻璃效果菜单下面来制作一个难度较前面稍大的实例，加深对CSS的原理的理解。本例中要实现一个玻璃材质效果的水平菜单。为了表现出立体的视觉效果，以及玻璃的质感，必须借助背景图像才可以实现。玻璃效果的菜单8.7.1基本思路首先讲解滑动门技术的核心原理。箭头表示了两个圆角矩形图像的滑动方向。较深颜色区域表示二者重叠的部分，当需要容纳较多文字时，重叠就少一些，而需要较少文字时，重叠就多一些。两个图像可以滑动，重叠部分的宽度会根据内容自动调整，就像两扇推拉门一样，因此这种技术就被称为“滑动门”。滑动门技术的原理示意图8.7.2设置菜单整体效果设置菜单的整体效果。完成基本设置的效果8.7.3使用“滑动门”技术设置玻璃材质背景设置超链接的方式制作滑动门效果。完成调整效果小结本章主要介绍了超链接文本的样式设计，以及对列表的样式设计。对于超级链接，最核心的是4种类别的含义和用法；对于列表，需要了解基本的设置方法。这二者都是非常重要和常用的元素。要求把相关的基本要点掌握熟练，为后面制作复杂的例子打好基础。