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

最新推荐文章于 2023-11-22 08:54:49 发布

Start_Strive

最新推荐文章于 2023-11-22 08:54:49 发布

阅读量643

点赞数 2

文章标签： html css

原文链接：https://blog.csdn.net/weixin_43823808/article/details/111592559?utm_medium=distribute.pc_category.none-task-blog-hot-13.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-13.nonecase

版权

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>

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

Start_Strive

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
前端学习（六）——HTML5中通过CSS设置超链接及鼠标形状

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="descriptio
复制链接

扫一扫