发表于： 2019-12-02 00:00:08
1 919
一、今天完成的事情
什么是hover？
a：hover表示当鼠标选定在a标签上时a标签的样式变化。
这是css中伪类的使用格式。
伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类：
:link用在未访问的连接上。
:visited用在已经访问过的连接上。
:active用于获得焦点（比如，被点击）的连接上。
:hover 用于鼠标光标置于其上的连接
超链接的实现方式：
1、超链接
<a>标签最简单的应用无外乎就是超链接功能了，用<a>标签嵌套一段文本，一段图像均可以实现超链接功能。
超链接还有四种状态分别用如下CSS样式来实现
<style>
a:link{ /*默认状态*/
color: black;
}
a:visited{ /*浏览过的*/
color:darkgrey;
}
a:hover{ /*悬浮状态*/
color:yellow;
}
a:active{ /*激活过的*/
color: red;
}
</style>
重点注意：编写时要严格按照上图顺序来编写
另外补充a标签的下划线可以用以下代码段来去除
<style>
a{
text-decoration:none;
}
</style>
2、锚点链接
下面介绍的是用a标签实现锚点链接的代码段
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>锚点链接</title>
</head>
<body>
<p id="part1">第一章</p>
<div style="height: 300px;background-color: red"></div>
<p id="part2">第二章</p>
<div style="height: 300px;background-color: yellow"></div>
<p id="part3">第三章</p>
<div style="height: 300px;background-color: gold"></div>
<p id="part4">第四章</p>
<div style="height: 300px;background-color: green"></div>
<p id="part5">第五章</p>
<div style="height: 300px;background-color: blue"></div>
<div style="position: fixed;top: 20px;right: 20px"><!-- 此处样式是为了让锚点链接悬浮在右上角 -->
<a href="#part1">第一章</a>
<a href="#part2">第二章</a>
<a href="#part3">第三章</a>
<a href="#part4">第四章</a>
<a href="#part5">第五章</a>
</div>
</body>
</html>
实现效果即为点击第一章跳转到第一章，点击第二章跳转到第二章以此类推
二、遇到的困难
暂时都解决了
三、明天要做的事情
把任务八第二页做完
四、收获
有一些小的细节需要特别去注意的，应该慢慢的开始注意细节方面的东西，往往一些小细节不注意就会影响大的布局，特别是一些长宽位置之类的简单东西，掌握不明白就不一定在什么时候有一个大的影响。
返回列表
评论