1.CSS中设置超链接

可能大家看着上面这个伪类语法不太好理解，其实它就是我们平时访问某一个网页时，把鼠标放在某个链接上面，然后那个链接就会改变其颜色样式。废话不多说，下面直接上实例代码：👇👇👇

1.1 实例一：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<meta name="generator" content="EditPlus®"/>
		<meta name="author" content=""/>
		<meta name="keywords" content=""/>
		<meta name="description" content=""/>
		<title>超链接下划线</title>
		<style>
			a{color: red; font-size: 16px; text-decoration: none;}		
			a:hover{text-decoration: underline;}
		</style>
	</head>
	
	<body>
		<a href="https://www.baidu.com">我是一个a标签，悬浮添加下划线</a>
	</body>
</html>

运行结果如下：

1.2 实例二：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>超链接下划线</title>
		<style>
			a{color: black; font-size: 16px; text-decoration: none;}
			a:hover{color: red; text-decoration: underline;}
		</style>
	</head>
	
	<body>
		<a href="https://www.tencent.com">我是一个a标签，悬浮字体变红并添加下划线</a>
	</body>
</html>

运行结果如下：

1.3 实例三：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>仿京东读书页面</title>
		<style>
			a{color: dodgerblue; font-size: 16px; margin:0 8px; text-decoration: none;}
			a:hover{color: crimson; text-decoration: underline;}
		</style>
	</head>
	
	<body>
		<a href="https://www.jd.com/">社科经典</a><a href="https://www.jd.com/">文学名著</a><a href="https://www.jd.com/">政治军事</a>
	</body>
</html>

运行结果如下：

2.CSS中设置鼠标形状

这里的鼠标形状是通过标签 cursor 来设置的，常见的一些鼠标形状如上图所示。下面我们来看一个实例：👇👇👇

2.1 实例一：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="gb2312"/>
		<title>设置鼠标形状</title>
		<style type="text/css">
			img {
				border: 0px;
			}
			p {
				font-size: 14px;
			}
			a {
				color: crimson;
				text-decoration: none;
			}
			a:hover {
				color: dodgerblue;
				text-decoration: underline;
				cursor: help;
			}
			span {
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<p><a href="#"><img src="E:\计算机专业学习资料和文件\HTML\image\hetao.jpg" alt="无漂白薄皮核桃" /></a></p>
		<p><a href="#">楼兰蜜语新疆野生</a>&nbsp;&nbsp;<a href="#">无漂白薄皮核桃</a></p>
		<p><span>500gx2包 ￥48.8</span></p>
		<p style="cursor: wait;">等待的结果</p>
	</body>
</html>