HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局-Linux大棚

admin 管理员组

文章数量: 1086019

2024年2月23日发(作者：教程中文网)

单元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属性大多用于去掉链接中的下划线。

HTML5+CSS3网页美化与布局

② 背景色

background-color属性用于设置链接的背景色。

4．CSS导航栏

导航栏基本上是一个链接列表，因此使用

和

元素是非常合适的，示例代码如下：

Home

News

Contact

About

设置样式从列表中去掉圆点和外边距的CSS代码如下：
ul{
list-style-type:none;
margin:0;
padding:0;
}
list-style-type:none表示删除圆点，导航栏不需要列表项标记。把外边距和内边距设置为0可以去除浏览器的默认设定。
【验证训练】
【任务5-1】验证各种类型的超链接属性设置
【任务描述】
在网页中输入以下HTML标签及文字：

阿坝旅游

阿坝旅游
>> 大美阿坝
>> 九寨沟景区亮点

针对上述项目列表以及列表项验证各种类型的列表属性设置。
（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等属性。
2
单元5 网页超链接与导航栏的美化与布局
【任务实施】
（1）创建一个名称为“单元5”的站点，在该站点中创建文件夹“5-1”。
（2）在该站点的文件夹“5-1”中创建网页。
（3）在网页中插入所需的标签和输入所需的文字内容。
（4）定义CSS代码。
初始CSS定义代码如表5-1所示。
（5）浏览网页的效果，如图5-1所示。

图5-1 网页的浏览效果
（6）然后按照任务描述的要求不断改变超链接的各个属性设置，重新浏览其效果。
【引导训练】
【任务5-2】创建包含横向主导航栏的网页
【任务描述】
（1）创建样式文件和，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档，且链接外部样式文件和。
（3）在网页中添加必要的HTML标签和输入导航文字。
（4）浏览网页的效果，如图5-2所示，该网页包含三种形式的横向排列的导航栏。

图5-2 网页的浏览效果
（5）重新编写主导航的HTML代码，使其浏览效果如图5-3所示。

图5-3 网页中主导航栏重新定义后的浏览效果
【任务实施】
（1）创建站点与文件夹
3
HTML5+CSS3网页美化与布局
在站点“单元5”中创建文件夹“5-2”，在该文件夹中创建子文件夹“CSS”。将单元1已创建好的样式文件拷贝至“CSS”文件夹中。
（2）定义网页主体布局结构的CSS代码
在文件夹“CSS”中创建样式文件，在该样式文件中编写样式代码，网页主体结构的CSS代码如表5-2所示。
（3）定义美化超链接和导航栏的CSS代码
在样式文件添加美化超链接和导航栏的样式代码，CSS代码如表5-3所示。
（4）创建网页文档与链接外部样式表
在文件夹“5-2”中创建网页文档，切换到网页文档的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：

（5）编写网页主体布局结构的HTML代码
网页主体布局结构的HTML代码如表5-4所示。
（6）在网页中添加必要的HTML标签与输入文本内容
在网页文档中添加必要的HTML标签与输入文本内容，对应的HTML代码如表5-5所示。
（7）保存与浏览网页
保存网页文档，在浏览器Google Chrome中的浏览效果如图5-2所示。
（8）重新定义主导航的HTML代码与样式代码
对表5-6中“
”与“
网页中主导航栏的HTML代码与CSS代码重新定义后，在浏览器Google
Chrome中的浏览效果如图5-3所示。
【任务5-3】创建包含横向主导航栏和锚链接的网页
【任务描述】
（1）创建样式文件和，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档，且链接外部样式文件和。
（3）在网页中添加必要的HTML标签、输入文字与插入图片。
（4）浏览网页的效果，如图5-4所示，该网页包含横向排列的主导航栏、纵向排列的导航栏和锚链接。
4
单元5 网页超链接与导航栏的美化与布局

图5-4 网页的浏览效果
【任务实施】
（1）创建站点与文件夹
在站点“单元5”中创建文件夹“5-3”，在该文件夹中创建子文件夹“CSS”。将单元1已创建好的样式文件拷贝至“CSS”文件夹中。
（2）定义网页导航主体布局结构的CSS代码
在文件夹“CSS”中创建样式文件，在该样式文件中编写样式代码，网页导航主体布局结构的CSS代码如表5-8所示。
（3）定义美化超链接和导航栏的CSS代码
在样式文件中添加样式代码美化超链接和导航栏，CSS代码如表5-9所示。
（4）创建网页文档与链接外部样式表
在文件夹“5-3”中创建网页文档，切换到网页文档的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：

（5）编写网页导航主体布局结构的HTML代码
网页导航主体布局结构的HTML代码如表5-10所示。
（6）在网页中添加必要的HTML标签与输入文本内容实现导航结构
在网页文档中添加必要的HTML标签与输入文本内容实现导航结构，对应的HTML代码如表5-11所示。
5
HTML5+CSS3网页美化与布局
（7）保存与浏览网页
保存网页文档，在浏览器Google Chrome中的浏览效果如图5-4所示。
【任务5-4】创建包含纵向栏目导航栏和横向主导航栏的网页
【任务描述】
（1）创建样式文件和，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档，且链接外部样式文件和。
（3）在网页中添加必要的HTML标签和输入文字。
（4）浏览网页的效果，如图5-5所示，该网页包含横向排列的主导航栏和纵向排列的栏目导航栏，还包含了位置导航超链接、标题形式的超链接、数字形式的超链接、底部版权信息超链接，本任务主要探讨主导航栏和栏目导航栏的布局与美化的实现。

图5-5 网页的浏览效果
【任务实施】
（1）创建站点与文件夹
在站点“单元5”中创建文件夹“5-4”，在该文件夹中创建子文件夹“CSS”。将单元1已创建好的样式文件拷贝至“CSS”文件夹中。
（2）定义网页导航主体布局结构的CSS代码
在文件夹“CSS”中创建样式文件，在该样式文件中编写样式代码，网页主导航和栏目导航主体布局结构的CSS代码如表5-12所示。
（3）定义美化超链接和导航栏的CSS代码
在样式文件添加样式代码美化超链接、主导航栏和栏目导航栏，CSS代码如表5-13所示。
（4）创建网页文档与链接外部样式表
在文件夹“5-4”中创建网页文档，切换到网页文档的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：

6
单元5 网页超链接与导航栏的美化与布局
（5）编写网页主体布局结构的HTML代码
网页主体布局结构的HTML代码如表5-14所示。
（6）在网页中添加必要的HTML标签与输入文本内容
在网页文档中添加必要的HTML标签与输入文本内容，对应的HTML代码如表5-15所示。
（7）保存与浏览网页
保存网页文档，在浏览器Google Chrome中的浏览效果如图5-5所示。
【任务5-5】创建包含图像热点链接的网页
【任务描述】
（1）创建样式文件和，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档，且链接外部样式文件和。
（3）在网页中添加必要的HTML标签与输入当前位置导航文字。
（4）插入旅游地图，并在旅游地图绘制多个多边形形状的热点区域。
（5）输入各个热点区域的景点导航链接文字，并设置好超链接。
（6）编写JavaScript程序实现地图悬浮显示景区导航链接功能。
（7）浏览网页的效果，如图5-6所示，该网页包含当前位置的导航文字和景点导航地图。

图5-6 网页的浏览效果
【任务实施】
（1）创建站点与文件夹
在站点“单元5”中创建文件夹“5-5”，在该文件夹中创建子文件夹“CSS”。将单元1已创建好的样式文件拷贝至“CSS”文件夹中。
（2）定义网页主体布局结构的CSS代码
7
HTML5+CSS3网页美化与布局
在文件夹“CSS”中创建样式文件，在该样式文件中编写样式代码，网页主体结构如表5-16所示。
（3）定义美化图像热点链接的CSS代码
在样式文件中添加样式代码美化图像热点链接，网页主体结构和美化导航栏的CSS代码如表5-17所示。
（4）创建网页文档与链接外部样式表
在文件夹“5-5”中创建网页文档，切换到网页文档的【代码视图】，在标签“”的前面输入链接外部样式表的代码，如下所示：

（5）编写网页主体布局结构的HTML代码
网页主体布局结构的HTML代码如表5-18所示。
（6）插入图片与绘制热点区域
在网页中HTML标签“
”与“
”之间插入旅游地图，并设置该图片的id、usemap等属性，在旅游地图绘制多个多边形形状的热点区域，并设置好标签的name、id等属性，对应的部分HTML代码如表5-19所示。
（7）输入各个热点区域的景点导航链接文字，并设置好超链接，对应的HTML代码如表5-20所示。
（8）编写JavaScript程序实现地图悬浮显示景区导航链接功能。
先在网页的头部输入以下代码链接已有的JS库文件、和。

然后在网页的头部编写表5-21所示的JavaScript代码实现地图悬浮显示景区导航链接功能。
（9）保存与浏览网页
保存网页文档，在浏览器Google Chrome中的浏览效果如图5-6所示。
【同步训练】
【任务5-6】创建包含顶部横向导航栏的网页
【任务描述】
（1）创建样式文件和，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档，且链接外部样式文件和。
（3）在网页中添加必要的HTML标签和输入导航文字。
（4）浏览网页的效果，如图5-10所示，该网页主要为横向排列的文本超链接。

8
单元5 网页超链接与导航栏的美化与布局
图5-10 网页的浏览效果
【任务5-7】创建包含锚链接和导航按钮的网页
【任务描述】
（1）创建样式文件和，在该样式文件中定义标签的属性、类选择符及其属性。
（2）创建网页文档，且链接外部样式文件和。
（3）在网页中添加必要的HTML标签、输入导航文字、正文内容和插入多张图片。
（4）浏览网页的部分内容，如图5-11所示，该网页包含锚链接和导航按钮。

图5-11 浏览网页的部分内容
【任务5-8】创建包含多个矩形图像链接的网页
【任务描述】
（1）创建网页文档，在该页面的头部编写CSS代码。
（2）在网页中添加必要的HTML标签和插入1张图片。
（3）在图片中指点位置绘制矩形热点区域，且设置热点链接。
【单元小结】
本单元主要探讨超链接与导航栏的美化与布局，熟悉了横向导航栏、锚链接、纵向栏目导航栏、图像热点的美化方法，训练了导航栏的布局方法。对HTML5的超链接与导航标签、定义热点图像的标签、CSS链接属性和导航栏等方面知识进行了全面介绍，同时对 9
HTML5+CSS3网页美化与布局
利用CSS样式定义各种不同形式的超链接、利用定义列表制作垂直导航栏、利用CSS样式实现水平导航栏及分隔小竖条、利用背景图像制作立体导航菜单和实现导航栏菜单自动伸缩和超链接的悬停交换效果等技术要点进行了详细说明。

10

本文标签：导航网页链接样式代码

版权声明：本文标题：HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.roclinux.cn/p/1708633822a528204.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

发表评论

全部评论 0

暂无评论

Linux大棚 – 不忘初心的技术博客，浮躁时代的安静角落

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

更多相关文章

VC++启动浏览器打开指定网页 (转)

网页乱码问题（edge浏览器）

在移动端实现在浏览器网页点击按钮并复制文字（且测试打开微信APP）

计算机有网络但打不开网页,手把手教你有网络但是打不开网页怎么办?

windows下使用BAT批处理脚本批量git clone代码

Outlook技巧：如何插入可以用指定浏览器打开的链接

pc端vue项目打开pdf文件；网页查看pdf文件；浏览器直接打开pdf文件

微信中提示浏览器打开网址链接如何解决

手机网页通过js打开app

cmd dos命令启动浏览器指定网页

jquery 打开新网页

在html中页面不全,网页显示不全,教您网页显示不全怎么办

微信内置浏览器调起外部浏览器打开指定网页连接

webstorm打开了浏览器,但是不能运行网页

【Python小工具系列】使用 Python 循环批量打开网页链接

m3u8下载插件，视频下载插件，抓取网页视频插件，Video DownloadHelper

在UC浏览器打开链接唤醒app，假设没有安装该app，则跳转到appstore下载该应用

内幕！smardaten无代码平台全方位测评，这些细节你绝对想不到！

windows下安装DB2数据库以及使用Aqua Data Studio链接数据库

NextChat：一键免费部署你的私人 ChatGPT 网页应用，支持 Claude, GPT4 &amp; Gemini Pro 模型。（MCP需要2.16版本才支持）

发表评论

推荐文章

javascript - Google Maps API imagePath local image not working - Stack Overflow

android - Key event not received outside popup component in Jetpack Compose - Stack Overflow

How to get max and min dates from array using javascriptjquery? - Stack Overflow

javascript - Drag and Drop files upload the Request.Files.Count is zeor - Stack Overflow

javascript - Adding key value pair (value from an array) to specific objects in an array - Stack Overflow

热门文章

django - Using StringAgg after filter &amp; distinct - Stack Overflow

how to escape special characters within eval using javascript? - Stack Overflow

javascript - Transforming JSON in a node stream with a map or template - Stack Overflow

javascript - Sequelize create model with object type - Stack Overflow

javascript - q.all() to resolve multiple mongoose queries concurrently - Stack Overflow

javascript - How to uncheck the select all checkbox in Ext.selection.CheckboxModel - Stack Overflow

customization - Custom JavaScript snippets for emmet (in Sublime Text 2) - Stack Overflow

javascript - window.close(); not working in firefox - Stack Overflow

如何去掉U盘写保护？小白操作也能做到

javascript - Jest Manual Mocking Not Functioning as Expected - Stack Overflow

最新文章

javascript - How do I toggle the readonly attribute of all child element with jquery - Stack Overflow

javascript - Might it be possible to block an entire US state from accessing my site, using PHP? - Stack Overflow

c++ - Is dereferencing std::span::end always undefined? - Stack Overflow

javascript - Delay function execution if it has been called recently - Stack Overflow

javascript - Google Maps Autocomplete List - Stack Overflow

windows设置断电重启开机后自动输入锁屏密码登录

Windows系统设置开机默认开启数字小键盘

Windows11 开机自动同步时间（开机时间不更新问题）

windows配置开机自启动软件或脚本

【Redis】Windows设置Redis为开机自启动

Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels

The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan

Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience

A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX

A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA

NextChat：一键免费部署你的私人 ChatGPT 网页应用，支持 Claude, GPT4 & Gemini Pro 模型。（MCP需要2.16版本才支持）

django - Using StringAgg after filter & distinct - Stack Overflow