HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局.pdf
版权申诉
189 浏览量
2022-11-28
23:45:29
上传
评论
收藏 823KB PDF 举报
单元 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 属性大多用于去掉链接中的下划线。
资源评论
