HTML5+CSS3网页美化与布局单元5网页超链接与导航栏的美化与布局.docx_超链接美化资源-CSDN文库

版权申诉

44 浏览量 2022-11-28 23:45:27 上传评论收藏 642KB DOCX 举报

资源推荐

资源详情

资源评论

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

局

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

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

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

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

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

【知识预览】

1．HTML5 的超链接与导航标签

（1）<a>标签

<a>标签用于定义超链接，用于从一张页面链接到另一张页面。<a>元素最重要的属性

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

（2）<nav>标签

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

2．定义热点图像的标签

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

<area>标签总是嵌套在<map>标签中，<img>标签中的 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 属性大多用于去掉链接中的下划线。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余9页未读，立即下载

内容反馈

版权申诉

คิดถึง643

粉丝: 3900
资源: 1万+

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip