admin 管理员组文章数量: 887021
2024年2月23日发(作者：教程中文网)
单元5 网页超链接与导航栏的美化与布局
一个完整的网站往往包含了多种不同形式的超链接，可能是文本，也可能是图像，单击网页中的超链接，就可以跳转到另一个网页，或者同一个网页中的不同位置。网页中应用最广泛的是文本超链接，其默认的样式是蓝色并添加下划线。
导航栏可以理解为超链接的有序排列，导航栏的布局方式通常分为横向排列、纵向排列、弧形排列、浮动式和标签式等多种形式，导航栏也可做成弹出式菜单形式。
【知识预览】
1．HTML5的超链接与导航标签
（1）标签
标签用于定义超链接，用于从一张页面链接到另一张页面。元素最重要的属性是href属性，它指示链接的目标。
（2）
2．定义热点图像的标签
标签用于定义图像映射中的热点区域（图像映射是指带有可单击区域的图像）。
标签总是嵌套在
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导航栏
导航栏基本上是一个链接列表，因此使用
- 和
- 元素是非常合适的，示例代码如下：
设置样式从列表中去掉圆点和外边距的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中“
版权声明：本文标题：HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1708633822h528204.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
android链接网络的方法,android – 以编程方式连接到无网络的wifi
我正在使用以下代码连接到没有互联网连接的WiFi网络,因为它拥有自己的网络服务器,我想连接即使没有互联网连接. WifiConfiguration wifiConfigurationnew WifiConfiguration(); wi
无线网卡无法启动（代码10）
突然遇到了网络连接不上的问题，经过两个小时的努力终于解决啦。 基本情况：笔记本华为matebook13，系统Win10，64bit 遇到的问题&
校园网链接出现叹号
校园网-wifi连接时经常出现黄色叹号，本次记录下解决方式，检查网络正常并且机器无故障后，如上图找到对应网络的IPv4和IPV6 设置，全部设为自动获取
Node.js 网页瘸腿爬虫初体验
延续上一篇，想把自己博客的文档标题利用Node.js的request全提取出来，于是有了下面的初哥爬虫，水平有限，这只爬虫目前还有点瘸腿
一些不错的网页
http:www.zhengdazhiarchives1749 书签栏 信息收集 二级域名查询,子域名查询-站长帮手网 ZoomEye - Cyberspace Search Engine 360威胁情报中心 SSL证书在线检测工具
教你如何使用Windows电脑对IOS手机上的网页进行调试
前期准备 PC端安装Chrome浏览器。苹果手机一部。连接电脑数据线一条。梯子。PC端安装iTunes或者爱思助手。 苹果手机设置 打开“设置”→找到“Safari 浏览器”点击进去→往下滑找到“高级”进行点击→打开“Web检查器”。
【历史上的今天】6 月 25 日：笔记本之父诞生；Windows 98 发布；通用产品代码首次商用
整理 | 王启隆 透过「历史上的今天」，从过去看未来，从现在亦可以改变未来。 今天是 2022 年 6 月 25 日，在 1951 年的今天，世界上第
树莓派3B和3B+安装系统上的差别（附系统链接）
今天刚拿到树莓派3B的板子，插上以前的系统卡，发现一直停留在启动界面，进不去。第一反应就是不兼容以前的系统了，换了最新系统，果不其
via浏览器样式
每日一言 使用的接口：一言 <span style"font-size: 16px; font-weight:bold; font-family:KaiTi,Tahoma,cursive;"
易语言网页填表取不到cookie_易语言置外部浏览器Cookie例子（支持所有浏览器）...
已有125位网友发表了看法： 易资源网评论于 [2018-10-12 10:55:14] 易语言 互联网浏览器 置cookie易语言娱乐网评论于 [2018-11-08 16:36:11] 易语言 浏览器组件 置cookie
via自定义搜索引擎代码_VIA浏览器自定义logo设置
via浏览器比较小巧，该有的功能也都有。 自定义logo可以用html代码 1.文字logo，文字大小，样式都可以自己调整 姿势小王子 2.天气logo a.url"
新安装的docker daemon.json位置_使用Docker打包代码配置记录
由于需要将环境和代码打包到Docker中放到其他机器运行，又被无情地消耗了一个周末。听闻大佬说，能将别人不懂的东西，使用通俗易懂的语言解释清楚让别人理解，也是一种能力。因此，特作文以记之。 基本概念 Docker 包括三个基本概念: 镜像（
Windows 远程桌面授权服务远程代码执行漏洞（CVE-2024-38077）
一、漏洞描述 微软披露最新的远程代码执行超高危漏洞CVE-2024-38077， CVSS评分高达9.8 ，可导致开启了远程桌面许可服务的Windwos服务器完全沦陷。漏洞影响Windows S
Win10出现错误代码0x80004005 一键修复指南
对于 Windows 10 用户来说，错误代码 0x80004005 就是这样一种迷雾，它可能在不经意间出现，阻碍我们顺畅地使用电脑。这个错误通常与组件或元素的缺失有关&am
局部页面切换url为什么不变_python爬虫 - 翻页url不变网页的爬虫探究！
python爬虫-翻页url不变网页的爬虫探究 url随着翻页改变的爬虫已经有非常多教程啦，这里主要记录一下我对翻页url不变网页的探究过程。学术菜鸡第一次写CSDN，请大家多多包容～ 如果对你有一点点帮助，请帮我点个赞吧！ 翻页url不变
windows系统开机自启打开指定网页
windows系统开机自启打开指定网页 1、在电脑桌面右击新建快捷方式，输入想要开机打开的网址 2、点击下一步输入自己想要命名的名字 3、使用快捷键winR运行，输入shell:startup&
Windows 7上可以上QQ，无法访问网页的DNS解析的解决
引言： 最近这几天忽然windows 7无法访问网页了，但是，可以正常上QQ，dropbox同步数据等，于是就开始了查找问题之路
计算机 - - - 浏览器网页打开本地exe程序，网页打开微信，网页打开迅雷
参考文章： https:exe.yimenappinfo-exe-sheng-cheng-url-29533.html https:blog.csdnuote_earticledetails13372
Windows下C++开机启动代码实现 [转]
Windows下C开机启动代码实现 [转] 原文链接：《Windows下C开机启动功能实现》修改“GISRestart”为需要开机自启动的程序名称，然后直接调用函数即可 #include <
python编的程序转换成android可执行代码_有python代码怎么编成可执行的exe程序?
用python编写程序可以编译成exe文件吗 Windows下怎么把python脚本编译成exe母亲用她那柔弱的双肩支撑起了多少个破碎的家，母亲用她那深邃的眼眸拯救了多少个无望的灵魂，母亲用她那坚
发表评论