首页 > 其他分享> > 前端学习（六）——HTML5中通过CSS设置超链接及鼠标形状

前端学习（六）——HTML5中通过CSS设置超链接及鼠标形状

2020-12-24 14:01:09 作者：互联网

1.CSS中设置超链接
在这里插入图片描述
1.1 实例一：

<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中设置鼠标形状

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>

运行结果如下：
这里当我们把鼠标悬浮在图片和不同的字体之上时，鼠标就会变成相应的形状，各不相同，根据喜好自行设置即可。

标签：size,color,text,decoration,HTML5,font,underline,CSS,超链接
来源： https://blog.csdn.net/Start_Strive/article/details/111623665