第5课 CSS3-设置超链接与导航条
第5章 设计超链接和导航菜单 网页设计课件
5.2.4 使用快捷菜单
右键单击选中的文字或图像，在打开的快捷菜单中选择【创建链接】命 令，打开【选择文件】对话框，即可定义超链接。
5.2.5 鼠标拖动
按住Shift键，在选定的文本上拖动鼠标指针，在拖动时会出现指向文件 图标。拖动鼠标到文件中的锚点或者【文件】面板中另一个文件，最后 释放鼠标即可。
第5章 设计超链接和 导航菜单
学习要点
•熟悉路径以及URL表示方法 •在网页中插入超链接。 •设置热点地图。 •设计导航菜单。
5.1 超链接概述
5.1.3 根路径
根路径是指从站点根文件夹到被链接文件经由的路径。根路径由前斜杠 开头，它代表站点根文件夹。例如，/news/beijing2005.html就是站点根 文件夹下的news子文件夹中的一个文件（beijing2005.html）的根相对路 径。在网站内链接文件时一般使用根路径的方法，因为在移动一个包含 根相对链接的文件时，无需对原有的链接进行修改。
5.3.5 实战演练：创建下载链接
当被链接的文件不被浏览器解析时，如二进制文件、压缩文件等，便被 浏览器直接下载，到本地计算机中。
5.3.6 实战演练：创建双链接或多重链接
双链接就是在一个超链接中包含两个指定路径，同理多重链接是在一个 超链接中包含多个指定路径。双链接和多重链接在某些时候有特殊的用 处。双链接常用来实现链接时两个框架页面内的内容都改变，多重链接 并不常用，它使一个链接元素链接多个文档。
5.3.3 实战演练：创建脚本链接
脚本链接是一种特殊类型的链接，通过单击带有脚本链接的文本或对象 ，可以执行脚本代码（如JavaScript或VBScript脚本代码等），利用这种 特殊的方法可以实现各种特殊的功能，如使用脚本链接进行确认或验证 表单指定路径的链接。利用空链接可以激活文档中链接文本 或对象。一旦对象或文本被激活，则可以为之添加行为，以实现当鼠标 移动到链接上时进行切换图像或显示分层等动作。有些客户端动作，需 要由超链接来调用，这时就需要用到空链接。
《Web前端技术项目式教程》任务五 CSS3导航条
（HTML5+CSS3+Flex+Bootstrap）
任务一
CSS3制作导航条
学习目标
1 2 3 4 5 6
• 了解列表的样式类型 • 了解列表的位置属性 • 了解列表样式的图片属性 • 掌握新闻列表的制作方法 • 掌握水平导航条、垂直导航条的制作方法 • 掌握二级菜单的制作方法
list-style-type：设定引导列表项目的符号类型 list-style-image：选择图像作为项目的引导符号 list-style-position： 决定列表项目所缩进的程度
列表符号
列表项目的符号类型，有多种值可选，常见的如 none、disc、circle、decimal、lower-roman等。要 修改用于列表项的标志类型，可以使用属性list-styletype。
ol, ul { list-style: none; }
图片符号
List-style-image即列表 样式图片，该属性可以将定制的 图片设置为项目符号。
例5-2 列表样式图片属性
添 加 CSS 样 式 代 码 ， 将 列 表 样 式 的 项 目 符 号 设 置 为 none，将图标作为背景出现，并且设置背景图像的位置来达 到需要的效果，如图5-2所示。
运行效果如图5-3所示
任务拓展：二级菜单和职位列表制作
二级菜单制作
二级菜单在页面中非常常见，在本任务拓展要实现的效果是只有当鼠 标悬停在一级菜单上时，二级菜单才显示，即当鼠标经过一级菜单时会显 示一个下拉列表，如图5-10所示，实现该效果的具体操作步骤如下。
首先用无序列表创建导航条的一级菜单和二级菜单， 代码如下。
图 5 - 2 列表样式图片属性效果图
教学设计-建立超链接——制作导航条[1]
![教学设计-建立超链接——制作导航条[1]](https://img.taocdn.com/s3/m/0fbd55db551810a6f52486e1.png)
教学设计:建立超链接——制作导航条[1]各位读友大家好，此文档由网络收集而来，欢迎您下载，谢谢教学设计思路：以网络为基础，通过自建的主页服务平台与网页设计互动学习论坛，以任务驱动的形式让每一位学生选择自己合适的进度进行学习，通过阶段考核（课堂考核）和总结性考核，促使学生自主完成作业，以主页服务平台的优秀作品展示促进学生的成就感，保证学生对网页设计选修课程的持续学习的能力和兴趣。
准备素材：1、内容：通过photoshop制作如图41所示的导航条所需图片2、供学生练习用的素材包下载地址1、知识目标：A、了解导航条的概念、功能、基本构成元素建立超链接--制作导航条B、了解[插入导航条窗口]各要素的含义c、了解导航条的创建、删除、编辑操作过程2、能力目标：A、能够根据要求完成指定图片导航条的制作B、拓展性要求：能够独立制作完成自己网站导航条的制作（可选，以后设计网站过程中自行完成）c、培养学生的自主学习能力D、培养学生的审美能力3、情感目标：通过提供相关资源，树立我为人人、人人为我的思想教学过程：教学程序教学内容要点教法设计教师活动学生活动时间传授新课了解导航条的概念、基本属性、与超级链接的联系及区别以网站内的文件链接知识复习作为引入授课：导航条的概念、基本属性、与超级链接的联系及区别听讲3’引入1、培养学生的观察、语言表达能力，复习信息技术基础课程中的一些基本知识，如如何下载图片等等2、埋下伏笔：有利于学生对［插入导航条］窗口中需要的各类图片的理解访问网站，鼠标在导航条各元素之间移动并点击观察3’提问：、有什么现象？2、该导航条的基本构成元素是什么（即如何判断导航条的类型）？思考与讨论介绍制作这种类型的导航条需要什么技术？引入如何通过FrontPage创建图片导航条并演示如何调出创建导航条的对话框。
听讲，观察学生自主学习完成任务1、了解[插入导航条]窗口各要素的含义2、了解导航条的创建、删除、编辑操作过程1、培养学生自主学习能力与协作精神2、培养学生搜集信息的能力3、通过论坛锻炼学生发布信息的能力，帮助他人解决问题的品格1、布置任务2、教师个别辅导3、组织学生提供资源、互相交流。
Web前端开发案例教程5制作学院网站导航条
5.2.3 元素的类型与转换
元素的转换
display 属性常用的属性值及含义如下。
➢ inline：行内元素，该值是行内元素的默认属性值。 ➢ block：块元素，该值是块元素的默认属性值。 ➢ inline-block：行内块元素，可以对其设置宽度、高度和对齐方式等属
list-style: 列表项目符号 列表项目符号的位置 列表项目图像;
5.2.1 无序列表样式设置
无序列表样式设置 example超链接默认的文字颜色为蓝色且带有下划线，这种单调的样 式并不好看。实际上，为了使超链接看起来更加美观，经常需 要为超链接指定不同的状态，使得超链接在单击前、单击后和 鼠标指针悬停时的样式不同。在 CSS 中，通过超链接伪类可以 实现不同的超链接状态。
超链接样式设置
example02. html
5.2.3 元素的类型与转换
HTML 提供了丰富的标记，用于组织页面结构。为了使页 面结构的组织更加清晰、合理，HTML 标记被定义成了不同的 类型，一般分为块标记和行内标记，也称块元素和行内元素。 块元素和行内元素还能根据实际需求进行类型转换。
5.2.3 元素的类型与转换
（3）list-style-image 属性：设置列表项的项目图像，使列表的样式更加美观， 其取值为图像的URL。
5.2.1 无序列表样式设置
无序列表样式设置
（4）list-style 属性：综合设置列表样式，可以代替上面 3 个属性。使用 liststyle 属性综合设置列表项的样式，格式如下。
任务小结
任务小结
本任务围绕学院网站导航条的实现，介绍了无序列表和超链接的样式设置方 法、元素的类型与类型转换等，最后综合利用所学知识实现了带有下拉菜单的 导航条。本任务介绍的主要知识点如下表所示。
CSS3-设置超链接与导航条
未设置CSS样式
2、设置#menu盒子的css样式：
<style>
#menu {
/*设置menu盒子*/
border:1px solid #ccc;
font-family:Arial;
font-size:14px;
font-weight:bold;
width:120px;
padding:8px;
描述 无标记。 默认。标记是实心圆。 标记是空心圆。 标记是实心方块。 标记是数字。 0开头的数字标记。(01, 02, 03, 等。) 小写罗马数字(i, ii, iii, iv, v, 等。) 大写罗马数字(I, II, III, IV, V, 等。) 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
未设置超链接样式
2、设置<a>超链接各种状态下的CSS样式：
<style>
a{
/* 超链接整体外观 */
font-size:14px;
font-family:“”;
line-height:50px;
padding:20px
}
a:link {
/* 超链接正常状态下的样式 */
color:red; /* 红色 */
四、用CSS属性设置鼠标指针效果--cursor属性
cursor定制的鼠标属性值及指针效果
五、设置无序或有序列表的样式
准备html代码：
<body>
<ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul>
在CSS中定义【导航栏】超链接样式
在CSS中定义【导航栏】超链接样式1、案例css代码1. <style>2. .divcss5 a:link{ :#F00}/* 链接默认为红⾊ */3. .divcss5 a:hover{ color:#000}/* ⿏标悬停⿊⾊ */4. .divcss5 a:active{ color:#03F}/* ⿏标点击与释放时蓝⾊ */5. .divcss5 a:visited{ color:#F0F}/* 访问过为粉红 */6. /* divcss5对象内 a超链接设置样式 */7. </style>2、案例html代码1. <div class="divcss5">2. DIVCSS5关于3. <a href="/shili/s57.shtml">CSS a样式</a>案例4. </div>===================⾃⼰的案例，/*导航栏*/.menu a:link{ color:white}/* 链接默认为⽩⾊ */.menu a:hover{ color:red}/* ⿏标悬停⽩⾊ */.menu a:active{ color:yellow}/* ⿏标点击与释放时⽩⾊ */.menu a:visited{ color:black}/* 访问过为⽩⾊ */以上是css⽂件<ul class="menu" id="menu"><li ><a href=>⾸页</a></li><li ><a href=>公司介绍</a></li><li ><a href=>资讯美⽂</a></li><li ><a href=>装修⼯地</a></li><li ><a href=>商品展⽰</a></li><li class="banner_li" ><a href=>优秀员⼯</a></li></ul>。
HTML5+CSS3网页设计基础 第八章 链接与导航
第8章 链接与导航
第6页
8.1.2 设置文字链接样式
伪类中通过:link、:Visited、:hover和:active来控制链接 内容访问前、访问后、鼠标悬停时以及用户激活时的样式 。需要要说明的是，这4种状态的顺序不能颠倒，否则可 能会导致伪类样式不能实现。 参考示例：8-1-1.html ， 8-1-2.html
第8章 链接与导航
第19页
制作完成演示案例:产品中心页面的产品链接。 参考代码 8-1.html
HTML5+CSS3网页设计基础
第8章 链接与导航
第9页
8.2 纵向导航菜单设计
本节主要内容：
案例分析
纵向导航菜单
案例制作
HTML5+CSS3网页设计基础
第8章 链接与导航
第10页
8.2.1 案例分析
【案例展示】使用CSS设置纵向导航菜单的基本知识制作 “产品中心”页面的左侧导航菜单。 【知识要点】普通的链接导航菜单、纵向列表导航菜单。 【学习目标】掌握使用CSS设置纵向导航菜单的常用方法 参考代码：8-2.html
HTML5+CSS3网页设计基础
第8章 链接与导航
第7页
8.1.3 设置图像链接样式
网页设计中对文字链接的修饰不仅限于增加边框、修改背 景颜色等方式，还可以利用背景图片对文字链接进行进一 步美化。 参考示例：8-1-3.html
HTML5+CSS3网页设计基础
第8章 链接与导航
第8页
8.1.4 案例制作
第8章 链接与导航
本章概述 本章的学习目标 主要内容
网页超链接与导航ppt课件
index.htm要想链接到01.htm这个文件，正确的链接应该是：<a href=web/article/01.htm>链接文字</a>，这是标准的相对路径。
反过来，01.htm要想链接到index.htm这个文件，在01.htm文件 里面应该写上这句：<a href=../../index.htm>返回首页</a>。这里的../ 表示向上一级。
一、网页超链接概述
相对路径：
在HTML中使用相对路径常分为两类：相对当前文档、相对站点 根目录。站点根目录相对路径描述从站点的根文件夹到文档的路径。 如果在处理使用多个服务器的大型 Web 站点，或者在使用承载多个 站点的服务器，则可能需要使用这些路径。不过，如果您不熟悉此类 型的路径，最好坚持使用文档相对路径。
提示：修改超链接的操作步骤与创建超链接相同。若删除超 链接，只要选定超链接对象，将“属性”面板“链接”下拉框中的 内容删除即可。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
《网页设计》课程
网页超链接与导航
计W算P机S 与OF通FI信CE系
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
一、网页超链接概述
列表导航条
a:hover{color:white;background:red;display:block;}
四
滚动条设计
默认状态下，当网页的高度超出可视高度时
网页中会自动出现滚动条。我们也可以利用层的
特性模拟这种效果。滚动条属性通过CSS的控制，
可以让用户体验滚动效果。但是要注意，这些属
性只在IE中使用（Mozilla的Firefox不支持滚动
小技巧：
li标签前面的图标推荐使用background-image，
而不是list-style-image。因为backgroundimage:url norepeat x y可以定位X轴、Y轴，以文字
开始的坐下角为原始坐标(0,0),改变位置很灵活。
列表加锚记制作选项卡切换效果
a:hover
2
3
a:active
思考： 要想每个div里的链接颜色都不同，怎样做？
二、css列表
列表的基本语法
列表属性在CSS中用ul / li { list-style:----- }表示：
列表前的图标（list-style-image ）
list-style
列表位置（内外）（list-style-position） 列表的样式（list-style-type）
定义列表：
<dl> <dt>……</dt> <dd>……</dd> 锚记链接：
参考6定义列表选项卡技术.html
<ul id=“a”></ul>
<a href=“#a”>焦点新闻</a>
项目五超级链接-设置站点导航网页-PPT
面包屑导航
1 2
显示当前位置
面包屑导航应清晰地显示用户在网站中的当前位 置，以便用户了解自己所处的页面层级。
提供返回路径
面包屑导航应提供返回上一级的链接，使用户能 够轻松地返回到之前的页面或主页面。
3
简化路径
在显示面包屑导航时，可以简化路径，只显示关 键的页面层级，以避免过长的路径显示。
下拉菜单导航
DIV+CSS布局
使用DIV元素进行页面划分
利用DIV元素作为容器，将页面内容划分为不同的区块，每个区块可以独立设置样式和布 局。
CSS样式定义
通过编写CSS样式规则，可以为DIV元素及其内部内容设置样式，包括字体、颜色、背景 、边距等。
布局定位与浮动
使用CSS的定位和浮动属性，可以实现元素的精确定位和层叠效果，创建灵活的页面布局 。
测试超级链接有效性
链接可用性测试
使用自动化工具或手动检查，确保所有超级链接都能正确指向目 标页面。
跨浏览器测试
在不同浏览器和设备上测试超级链接，确保其在各种环境下都能正 常工作。
加载速度测试
测试超级链接的加载速度，确保用户能够快速访问目标页面。
解决超级链接问题
修复死链
定期检查并修复无效的超级链接，避免用户 访问时出现404错误。
处理重定向
对于需要重定向的超级链接，确保使用正确的HTTP 状态码和重定向方式。
优化锚文本
改进超级链接的锚文本，使其更具描述性和 相关性，提高用户体验和搜索引擎排名。
提高用户体验度
01
清晰的导航结构
设计简洁明了的导航菜单和面包 屑导航，帮助用户快速了解网站 结构和当前位置。
响应式设计
02
03
实验十一 用CSS设置超链接与导航菜单
实验十一用CSS设置超链接与导航菜单
【实验目的】
1.掌握用CSS设置超级链接的方法，及超级链接的4种伪类别的设置方法；
2.掌握制作按钮式超级链接的方法；
3.掌握制作荧光灯效果的菜单的方法；
4.掌握设置项目列表样式的方法；
5.掌握创建基于列表的导航菜单的方法。
6.掌握应用滑动门技术制作玻璃效果的菜单的方法
【实验内容】
1.创建按钮式超链接。
效果图如下：
2.制作荧光灯效果的菜单，实现下面效果的网页：
3.创建能横竖自由转换的菜单。
4.实现一个玻璃材质效果的水平菜单。
第8章用CSS设置超链接与导航菜单
设置了#menu容器后的效果
}
</style>
设置内外边距后的效果
8.3.3 设置单项的CSS样式
<style type="text/css"> #menu a, #menu a:visited { display:block; padding:4px 8px; color:#ccc; text-decoration:none; border-top:8px solid #060; } #menu a:hover { color:#FF0;
字时，重叠就少一些，而需要较少文字时，重叠就多一些。两个图像 可以滑动，重叠部分的宽度会根据内容自动调整，就像两扇推拉门一
样，因此这种技术就被称为“滑动门” 。
滑动门技术的原理示意图
8.7.2 设置菜单整体效果
设置菜单的整体效果。
完成基本设置的效果
8.7.3 使用“滑动门”技术设置玻璃 材质背景
间和精力来制作各式各样的导航条，从而体现网站的整体构架。
在传统方式下，制作导航菜单是很麻烦的工作。需要使用表格， 设置复杂的属性，还需要使用JavaScript实现相应鼠标指针经过或单 击的动作。如果用CSS来制作导航菜单，实现起来非常简单。
8.6.1 简单的竖直排列菜单
当项目列表的list-style-type属性值为“none”时，制作各式各
设置超链接的方式制作滑动门效果。
完成调整效果
小结
本章主要介绍了超链接文本的样式设计，以及对列
表的样式设计。对于超级链接，最核心的是4种类别的含
义和用法；对于列表，需要了解基本的设置方法。这二 者都是非常重要和常用的元素。要求把相关的基本要点 掌握熟练，为后面制作复杂的例子打好基础。
CSS设置链接与导航菜单
text-decoration: none;
border: 1px solid #EEEEEE; /* 边框实现阴影效果 */ border-bottom: 1px solid #717171; border-right: 1px solid #717171;
案例-样式要点分析
模仿按钮被按下的效果，建立鼠标指针经过时的样 式。
list-style-type属性值及显示效果
lower-latin: 小写拉丁文a, b, c, ... z upper-latin: 大写拉丁文A, B, C, ... Z armenian: 亚美尼亚数字 georgian: 乔治亚数字an, ban, gan, ..., he, tan, in, in-an, ... lower-alpha: 小写拉丁文a, b, c, ... z upper-alpha: 大写拉丁文A, B, C, ... Z none: 无(取消所有的list样式) inherit:继承
练习-部分样式代码
a.one:link
{color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00}
案例-创建按钮式超链接
按钮按下去的 效果
案例-样式要点分析
建立选择器a，设置超链接的统一样式，如：
案例-样式代码分析1
案例-样式代码分析2
其次，设置菜单选项的通用样式及访问样式：
#menu
a, #menu a:visited { display:block; padding:4px 8px; color:#ccc; text-decoration:none; border-top:8px solid #060; height:1em;
教学设计-建立超链接——制作导航条[1]
![教学设计-建立超链接——制作导航条[1]](https://img.taocdn.com/s3/m/14aa7a35a2161479171128be.png)
教学设计:建立超链接——制作导航条[1]教学设计思路：以网络为基础，通过自建的主页服务平台与网页设计互动学习论坛，以任务驱动的形式让每一位学生选择自己合适的进度进行学习，通过阶段考核（课堂考核）和总结性考核，促使学生自主完成作业，以主页服务平台的优秀作品展示促进学生的成就感，保证学生对网页设计选修课程的持续学习的能力和兴趣。
准备素材：内容：通过制作如图－所示的导航条所需图片供学生练习用的素材包下载地址知识目标：了解导航条的概念功能基本构成元素建立超链接--制作导航条了解[插入导航条窗口]各要素的含义了解导航条的创建删除操作过程能力目标：能够根据要求完成指定图片导航条的制作拓展性要求：能够独立制作完成自己网站导航条的制作（可选，以后设计网站过程中自行完成）培养学生的自主学习能力培养学生的审美能力情感目标：通过提供相关资源，树立我为人人人人为我的思想教学过程：教学程序教学内容要点教法设计教师活动学生活动时间传授新课了解导航条的概念基本属性与超级链接的联系及区别以网站内的文件链接知识复习作为引入授课：导航条的概念基本属性与超级链接的联系及区别听讲'引入培养学生的观察语言表达能力，复习信息技术基础课程中的一些基本知识，如如何下载图片等等埋下伏笔：有利于学生对［插入导航条］窗口中需要的各类图片的理解访问网站，鼠标在导航条各元素之间移动并点击观察'提问：有什么现象？该导航条的基本构成元素是什么（即如何判断导航条的类型）？思考与讨论介绍制作这种类型的导航条需要什么技术？引入如何通过创建图片导航条并演示如何调出创建导航条的对话框。
听讲，观察学生自主学习完成任务了解[插入导航条]窗口各要素的含义了解导航条的创建删除操作过程培养学生自主学习能力与协作精神培养学生搜集信息的能力通过论坛锻炼学生发布信息的能力，帮助他人解决问题的品格布置任务教师个别辅导组织学生提供资源互相交流。
根据学生活动内容安排，边想边操作边学边操作，互相探讨，可以有组长辅导'总结明了学习进度，重新确定教学进度，照顾学习进度稍慢的学生适度的总结加深学生对课堂操作的印象介绍学生完成情况就出现问题，精选事例讲解听讲'总结：大多数同学能完成任务,,,，少部分同学能在论坛中发贴询问相关问题并提供相关资源。
CSS网页导航栏设计指南
CSS网页导航栏设计指南导言在网页设计中，导航栏是一个重要的部分，它提供了用户在网页中进行导航的功能。
良好设计的导航栏能够提升用户体验，帮助用户快速找到所需内容。
本文将为你提供CSS网页导航栏设计的指南，帮助你创建出美观实用的导航栏。
一、选择合适的导航栏样式1. 固定导航栏固定导航栏将导航栏固定在网页顶部或侧边，保持导航栏的可见性。
这种样式适用于长页面和需要用户频繁导航的情况。
2. 悬浮导航栏悬浮导航栏在网页滚动时保持在页面顶部，但不固定在屏幕上方。
这种样式可以在用户阅读页面时提供便捷的导航。
3. 下拉导航栏下拉导航栏将子导航项目隐藏在主导航项下方，当用户将鼠标悬停在主导航项上时展开子导航项目。
这种样式适用于网站拥有大量页面或者子页面。
4. 响应式导航栏响应式导航栏会根据设备的屏幕大小自动调整布局，以适应不同的屏幕分辨率。
这种样式能够提供更好的移动设备上的导航体验。
二、设计导航栏的布局1. 导航栏的位置导航栏通常位于网页的顶部或侧边。
将导航栏放置在显眼的位置，可以帮助用户快速找到导航入口。
2. 导航栏的宽度导航栏的宽度可以根据网页布局的需要进行调整。
在固定导航栏中，宽度充满整个屏幕；在悬浮导航栏中，宽度与内容区域相同。
3. 导航栏的高度导航栏的高度应当适中，不要过小导致文字拥挤，也不要过大影响页面的可视区域。
4. 导航栏的背景颜色和样式选择适合网页整体风格的导航栏背景颜色和样式。
可以使用纯色背景、渐变背景或图片背景等。
三、导航栏文字和图标设计1. 导航栏链接文字导航栏的链接文字应当简洁明了，与用户常用词汇相符，并且要易于点击。
可以使用CSS样式修改链接的颜色、字体和下划线。
2. 导航栏图标图标可以用来增加导航栏的可视吸引力，并帮助用户更好地理解导航项的含义。
在选择图标时，考虑与网页整体风格的一致性，并确保图标清晰可辨认。
四、导航交互设计1. 悬停效果为导航栏的链接添加悬停效果，比如改变背景颜色或添加下划线，可以提升用户交互的可感知性。
HTML5+CSS3网页美化与布局单元5 网页超链接与导航栏的美化与布局
单元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 之后。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2、去掉超链接图片的边框：
<style> a:link img,a:visited img { border: #FFF 1px dotted } </style>
注意：如果边框设置为none，则鼠标经过 图片加边框会出现跳动，因此把边框线设为 背景色一样即可。
3、设置鼠标经过时img的样式：
a:hover { cursor: default; } a:hover img { border: #555 1px dotted }
a: link {color: 白色}
/* 未访问的链接 */ /* 已访问的链接 */ /* 鼠标移动到链接上 */ /* 选定的链接 */
a:visited {color: 蓝色}
a:hover {color: 红色} a:active {color: 绿色}
注意： 1. 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 2. 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 3. 伪类名称对大小写不敏感。
第7课 CSS-4
用css设置超链接与导航条
一、<a>超链接的四种状态
1. 在html语言中，超链接通过<a>标记来实 现的，其默认的显示效果为蓝色加下划线。
2. 利用css可以设置超链接各种状态下的样式， 包括字体、颜色和背景。 3. Css利用伪类选择器设置<a>标记的不同状 态。
超链接有四种状态：活动状态，已被访问状 态，未被访问状态，和鼠标悬停状态。
未设置超链接样式
2、设置<a>超链接各种状态下的CSS样式： <style> a{ /* 超链接整体外观 */ font-size:14px; font-family:“”; line-height:50px; padding:20px } a:link { /* 超链接正常状态下的样式 */ color:red; /* 红色 */ text-decoration:none; /* 无下划线 */ } a:visited { /* 访问过的超链接 */ color:black; /* 黑色 */ text-decoration:none; } a:hover { /* 鼠标指针经过时的超链接 */ color:yellow; /* 黄色 */ text-decoration:underline;/* 下划线 */ background-color:blue; }
5.2 用CSS设置图片符号及位置： list-style-image和list-style-position
1、设置列表的图片符号：
Ul { font-size:0.9em; color:#00458c;
list-style-image: url(list-img/li1.gif);
}
2、设置图片或符号的位置：
3、设置超链接 a 的整体样式：
#menu a { display:block; /*用块方式显示行内元素*/ padding:4px 8px; color:#ccc; text-decoration:none; border-top:8px solid #060; /*制作菜单分隔线*/ height:1em; }
4、设置鼠标悬停状态的CSS样式：
#menu a:hover { color:#FF0; /*改变文字颜色*/ border-top:8px solid #0E0; /*改变分隔线颜色*/ }
5、制作横竖自由转换的导航条
#menu a
{ display:block; /*用块方式显示行内元素 */ float：left /*制作横向导航条时需要*/ }
5.1 用CSS设置列表的符号： list-style-type属性
ie中有效的值：
值 none disc circle square decimal decimal-leading-zero lower-roman upper-roman 描述 无标记。 默认。标记是实心圆。 标记是空心圆。 标记是实心方块。 标记是数字。 0开头的数字标记。(01, 02, 03, 等。) 小写罗马数字(i, ii, iii, iv, v, 等。) 大写罗马数字(I, II, III, IV, V, 等。)
九、鼠标经过时图片加边框
1. 准备html代码：
<body> <a href="#" ><img src="cup.gif" /></a> <a href="#" ><img src="cup.gif" /></a> <a href="#" ><img src="cup.gif" /></a> </body>
1、准备代码：
<body> <div id=“menu”> <a href="home.htm">Home</a> <a href="east.htm">East</a> <a href="west.htm">West</a> <a href="north.htm">North</a> <a href="south.htm">South</a> </div> </body>
注意图片的选择器为 a:hover img ，同时 设置鼠标悬停a:hover的形状为default
思考：如何制作鼠标经过时图片替换
lower-alpha
upper-alpha
小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
1、设置空心圆的项目符号：
Ul { font-size:0.9em; color:#00458c; list-style-type: circle; /* 设置空心圆符号 */ }
Ul {
font-size:0.9em; color:#00458c; list-style-image: url(list-img/li1.gif);
list-style-position:inside;
}
3、设置<li>加点线下边框：
ul li { border-bottom: #999 1px dashed ;
</div> </body：
#navigation { width:800px; font-family:Arial; font-size:14px; }
4、设置<a>超链接整体和鼠标悬停状态下的样式：
#navigation a { line-height:30px; /*设置行高*/ color:#3F3; /*设置字体颜色*/ background-image:url(list-img/bg-g1.jpg); /*设置背景图片*/ padding:4px 10px; /*设置边框与文字的距离*/ text-decoration:none; } #navigation li a:hover { background-image:url(list-img/bg-g2.jpg); /*设置背景图片*/ color: #0FF; }
设置超链接样式后
效果2：制作横向或竖向的荧光灯效果导航条
1、准备代码：
<body> <div id="menu"> <a href="#" id="first"> Home </a> <a href="#"> Contact Us</a> <a href="#"> Web Dev</a> <a href="#"> Web Design</a> <a href="#" id="last"> Map </a> </div> </body>
未设置CSS样式
2、设置#menu盒子的css样式：
<style> #menu { /*设置menu盒子*/ border:1px solid #ccc; font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#000; } </style> 设置#menu的样式后
四、用CSS属性设置鼠标指针效果--cursor属性
cursor定制的鼠标属性值及指针效果
五、设置无序或有序列表的样式
准备html代码：
<body> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul> </body>