单元

5

网页超链接与导航栏的美化与布

局

一个完整的网站往往包含了多种不同形式的超链接，可能是文本，也可能是图像，单

击网页中的超链接，就可以跳转到另一个网页，或者同一个网页中的不同位置。网页中应

用最广泛的是文本超链接，其默认的样式是蓝色并添加下划线。

导航栏可以理解为超链接的有序排列，导航栏的布局方式通常分为横向排列、纵向排

列、弧形排列、浮动式和标签式等多种形式，导航栏也可做成弹出式菜单形式。

【知识预览】

1

．

HTML5

的超链接与导航标签

（

1

）

标签

标签用于定义超链接，用于从一张页面链接到另一张页面。

元素最重要的属性

是

href

属性，它指示链接的目标。

（

2

）

标签

标签用于定义页面导航，表示页面中导航链接的部分。

2

．定义热点图像的标签

标签用于定义图像映射中的热点区域（图像映射是指带有可单击区域的图像）

。

标签总是嵌套在

标签中，

标签中的

usemap

属性与

map

元素

name

属性相关联，创建图像与映射之间的联系。

3

．

CSS

链接属性（

Hyperlink

）

（

1

）设置链接的样式

CSS

为超链接标签

a

提供了四个伪类，表示链接的四种不同状态：

a:link

（普通的、未访问链接的状态）

a:visited

（已访问链接的状态）

a:active

（链接被单击激活的状态）

a:hover

（鼠标指针停留在链接上的状态）

。

（

1

）用

id

或类选择符对标签

a

进行定义

为标签

a

用

id

或类选择符进行定义，对于不同

id

或类的超链接对象定义

a:link

、

a:visited

、

a:hover

、

a:active

的属性。

（

2

）将标签

a

的类选择符与伪类组合使用

使用包含选择符，将标签

a

包含在其他对象之中，对包含在该对象中的标签

a

进行样

式定义。

【注意】

：

超链接伪类正确的定义顺序：

a:hover

必须位于

a:link

和

a:visited 

之后，

a:active

必须位于

a:hover 

之后。

（

2

）常见的链接样式

①

文本修饰

text-decoration

属性大多用于去掉链接中的下划线。