单元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属性大多用于去掉链接中的下划线。
② 背景
background-color属性用于设置链接的背景。
4．CSS导航栏
导航栏基本上是一个链接列表，因此使用<ul>和<li> 元素是非常合适的，示例代码如下：
<ul>
  <li><a href="default.html">Home</a></li> 
  <li><a href="news.html">News</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="about.html">About</a></li>
</ul>
设置样式从列表中去掉圆点和外边距的CSS代码如下：
ul{
  list-style-type:none;
  margin:0;
  padding:0;
}
list-style-type:none表示删除圆点，导航栏不需要列表项标记。把外边距和内边距设置为0可以去除浏览器的默认设定。
【验证训练】
【任务5-1】验证各种类型的超链接属性设置
【任务描述】
在网页中输入以下HTML标签及文字：
<header>
  <section>
    <h1 class="logo"><a href="" target="_blank" title="阿坝旅游">阿坝旅游</a></h1>
  </section>
</header>
<section>用html和css制作百度页面
  <div class="w-url"><a href="" target="_self">阿坝旅游</a>
       >>  <a href="" target="_self">大美阿坝</a>
       >>  <a href="" target="_self">九寨沟景区亮点</a>
  </div>
</section>
针对上述项目列表以及列表项验证各种类型的列表属性设置。
（1）为超链接的四种不同状态a:link、a:visited、a:hover、a:active设置color、text-decoration、font-family、font-size、font-weight、background等属性。
（2）尝试设置超链接的download、hreflang、media、rel、target和type等属性。
【任务实施】
（1）创建一个名称为“单元5”的站点，在该站点中创建文件夹“5-1”。
（2）在该站点的文件夹“5-1”中创建网页0501.html。
（3）在网页0501.html中插入所需的标签和输入所需的文字内容。
（4）定义CSS代码。
初始CSS定义代码如表5-1所示。
（5）浏览网页0501.html的效果，如图5-1所示。
图5-1  网页0501.html的浏览效果
（6）然后按照任务描述的要求不断改变超链接的各个属性设置，重新浏览其效果。
【引导训练】
【任务5-2】创建包含横向主导航栏的网页0502.html
【任务描述】
（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档0502.html，且链接外部样式文件base.css和main.css。
（3）在网页0502.html中添加必要的HTML标签和输入导航文字。
（4）浏览网页0502.html的效果，如图5-2所示，该网页包含三种形式的横向排列的导航栏。
图5-2  网页0502.html的浏览效果
（5）重新编写主导航的HTML代码，使其浏览效果如图5-3所示。
图5-3  网页0502.html中主导航栏重新定义后的浏览效果
【任务实施】
（1）创建站点与文件夹
在站点“单元5”中创建文件夹“5-2”，在该文件夹中创建子文件夹“CSS”。将单元1已创建好的
样式文件base.css拷贝至“CSS”文件夹中。
（2）定义网页主体布局结构的CSS代码
在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，网页主体结构的CSS代码如表5-2所示。
（3）定义美化超链接和导航栏的CSS代码
在样式文件main.css添加美化超链接和导航栏的样式代码，CSS代码如表5-3所示。
（4）创建网页文档0502.html与链接外部样式表
在文件夹“5-2”中创建网页文档0502.html，切换到网页文档0502.html的【代码视图】，在标签“</head>”的前面输入链接外部样式表的代码，如下所示：
<link type="text/css" rel="stylesheet" href="css/base.css"/>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
（5）编写网页主体布局结构的HTML代码
网页0502.html主体布局结构的HTML代码如表5-4所示。
（6）在网页中添加必要的HTML标签与输入文本内容
在网页文档0502.html中添加必要的HTML标签与输入文本内容，对应的HTML代码如表5-5所示。
（7）保存与浏览网页
保存网页文档0502.html，在浏览器Google Chrome中的浏览效果如图5-2所示。
（8）重新定义主导航的HTML代码与样式代码
对表5-6中“<div class="nav-main">”与“</div”的主导航栏的HTML代码与样式代码进行重新定义，HTML代码如表5-7所示。
网页0502.html中主导航栏的HTML代码与CSS代码重新定义后，在浏览器Google Chrome中的浏览效果如图5-3所示。
【任务5-3】创建包含横向主导航栏和锚链接的网页0503.html
【任务描述】
（1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。