工信版（中职）Web前端设计基础 项目八-1电子课件
2022-10-25
|
16页
|
75人阅读
|
6人下载
普通
资源信息
| 学段 | 中职 |
|---|---|
| 学科 | 职教专业课 |
| 课程 | 程序设计基础 |
| 教材版本 | - |
| 年级 | 高一 |
| 章节 | - |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学 |
| 学年 | 2022-2023 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 1.14 MB |
| 发布时间 | 2022-10-25 |
| 更新时间 | 2023-07-09 |
| 作者 | 匿名 |
| 品牌系列 | - |
| 审核时间 | 2022-10-25 |
| 下载链接 | https://m.zxxk.com/soft/35574038.html |
| 价格 | 0.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
YCF
（中职）Web前端设计基础 项目八-1电子课件
1
单击此处编辑母版文本样式
第二级
第三级
第四级
第五级
CSS 3创建网页菜单
项目八
授课教师：姓名
WEB前端设计基础
学习情境一
授课教师：姓名
单击此处编辑母版标题样式
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
Contents
1.项目描述
2.知识准备
3.项目实施
4.项目拓展
5.项目小结
6.技能训练
一 项目描述
本项目学习要点
用CSS 3美化项目列表；
用CSS 3制作网页菜单。
用CSS 3美化超链接；
二 知识准备
CSS 3美化超链接；
CSS 3美化项目列表。
CSS 3美化超链接
1.改变超链接的基本样式
伪类是CSS本身定义的一种类，使用伪类可以定义超链接在不同状态下的样式效果。超链接的伪类有四种状态，详细信息如表所示。
想要定义未被访问的超链接样式，可以通过a:link来实现，要设置被访问过的超链接样式，可以通过a:visited来实现，要设置鼠标经过和激活时的样式用a:hover和a:active来实现。
属性 说明
a:link 定义a元素未访问时的样式
a:visited 定义a元素访问后的样式
a:hover 定义鼠标经过显示的样式
a:active 定义鼠标单击激活时的样式
CSS 3美化超链接
1.改变超链接的基本样式
a:link{CSS样式}
a:visited{CSS样式}
a:hover{CSS样式}
a:actived{CSS样式}
定义这四个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。
格式为：
CSS 3美化超链接
2.设置带有提示信息的超链接
超链接的文字比较简洁，有时候不能表达这个超链接的含义，通常是为超链接添加上一些介绍性信息，即提示信息。要设置这样的信息，可以通过超链接信息的描述标记title来实现，title属性的值为提示的内容。
格式如下：
<a href="" title="提示信息的文本内容"></a>
CSS 3美化超链接
2.设置带有提示信息的超链接
【例8-1】超链接基本样式和提示信息实例，代码如下所示（示例文件8-1.html）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接基本样式和提示信息</title>
<style>
#nav1{padding:20px;}
a{color:#545454;text-decoration: none;margin:3px;padding: 3px;}
a:link{color:#545454;}
a:visited{color:#545454;}
a:hover{color:#f60;text-decoration: underline;}
a:active{color:#f63;}
</style>
</head>
<body>
<div id="nav1">
<a href="#">首页</a>|
<a href="#">产品展示</a>|
<a href="#">售后服务</a>|
<a href="#">联系我们</a>|
<a href="#" title="我们是一个团结的集体">关于我们</a>
</div>
</body>
</html>
在chrome浏览器中预览
CSS 3美化超链接
3.设置超链接的背景图
超链接不仅可以使用文字，也可是使用背景图片加文字和背景颜色加文字的形式来显示，这样的超链接会更加精美。超链接添加背景图片，使用background-image来实现，超链接添加背景颜色，使用background-color来实现。
CSS 3美化超链接
3.设置超链接的背景图
【例8-2】设置超链接的背景颜色实例，代码如下所示（示例文件8-2.html）。
<style type="text/css">
.nav{margin:20px;font-size:14px;font-family: 微软雅黑;}
a{
color:#333;
text-decoration:none;
display: block;
float: left;
text-align: center;
height:30px;
line-height:30px;
width:100px;
background-color:#efefef;
margin-left:6px;
}
a:hover{ background
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。