a标签
语法结构
<a href="链接" target="_blank">文字描述</a>
注意事项
- 链接分为本地链接和网页链接，其中网页链接要写全，例如
https://www.baidu.com，本地链接分为相对路径和绝对路径。 - target有四个属性，_blank，_self,_parent,_top,其中常用的是_blank,_self 。默认打开方式是_self.意思是在本窗口打开。_blank是在新窗口打开。
<html>
<body>
<a href="http://www.baidu.com" target="_self">默认打开方式：本页面打开</a>
<a href="http://www.baidu.com" target="_blank">打开方式：新窗口打开</a>
</body>
</html>
锚点
语法结构
<a href="#d1">描述</a>
其中#d1为id名
实现回到顶部的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#d1{
height: 800px;
background-color: aquamarine;
}
#d2{
height: 800px;
background-color: red;
}
#d3{
height: 800px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<a href="#d1">d1</a>
</body>
</html>
伪类
CSS 伪类用于向某些选择器添加特殊的效果。
语法结构
选择器:伪类 {
declaration1;
declaration2;
…
}
伪类总结
- link伪类，用于向未被访问的链接添加样式
<html>
<head>
<meta charset="UTF-8">
<style>
a:link{
color:red;
}
</style>
</head>
<body>
<a href="www.baidu.com" target="_blank">点我</a>
</body>
</html>
- visited伪类，用于向访问过的链接添加样式
- hover伪类，用于向鼠标悬停时添加样式
- active伪类，用于向点击时的链接添加样式
其中hover非常重要
hover伪类
hover
hover 原本是a标签中的一个伪类，由于其特殊的性质，鼠标悬停触发
，我们可以使用其进行一系列特效的设置，标签使用 hover ，只能触发自身以及后代的效果。
示例
题目：点击盒子的时候改变盒子颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div{
width:200px;
height:200px;
background-color:red;
}
div:hover{
background-color:green;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
重要的属性
| 属性 | 说明 | 注意 |
|---|---|---|
| transition: 0.7s | 当css属性值发生改变时让改变以规定的时间执行单位 s | 必须给显示该效果的盒子设置 |
| text-decoration: underline | 装饰线 | 参考文字设置 |
| border-radius: 25px | 用于设置圆角 | 四个参数的时候就是左上、右上、右下、左下的圆角像素值 |
小练习
-
制作一个鼠标触动后变化的状态条
[图片上传失败...(image-dc4d55-1660224735416)]
进度条.gif
