CSS 3之超链接特效

最新推荐文章于 2024-07-05 14:54:21 发布

菇毒

最新推荐文章于 2024-07-05 14:54:21 发布

阅读量1.2k

点赞数 2

分类专栏： web 前端学习 # CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125583380

版权

web 前端学习同时被 2 个专栏收录

90 篇文章 4 订阅

订阅专栏

CSS

34 篇文章 1 订阅

订阅专栏

超链接特效

1. 改变超链接基本样式
2. 设置超链接的背景图
3. 超链接按钮效果

超链接是由 <a></a>组成的，可以是文字或图片；

1. 改变超链接基本样式

通过使用伪类能对超链接进行修饰；
伪类是一种特殊的选择符，能被浏览器自动识别；
最大的用处是在不同状态下能对超链接定义不同的样式效果，是 CSS 3本身定义的一种类；
20220519
例子 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接样式</title>
		<style type="text/css">
			a{
				color: #C09853;
				text-decoration: none;
			}
			a:link{
				color: #353535;
				text-decoration: none;
			}
			a:hover{
				color: blue;
				text-decoration: underline;
			}
			a:active{
				color: #666666;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<center>
			<a href="#">电影</a>
			<a href="#">电视剧</a>
			<a href="#">综艺</a>
		</center>
	</body>
</html>

20220519
例子 2：给超链接加入提示内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接样式</title>
		<style type="text/css">
			a{
				color: #C09853;
				text-decoration: none;
			}
			a:link{
				color: #353535;
				text-decoration: none;
			}
			a:hover{
				color: blue;
				text-decoration: underline;
			}
			a:active{
				color: #666666;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<center>
			<a href="#" title="节假日购票享8.5折优惠">电影</a>
			<a href="#">电视剧</a>
			<a href="#">综艺</a>
		</center>
	</body>
</html>

20220519

2. 设置超链接的背景图

将图片作为背景图添加到超链接中，这样超链接能有更加精美的效果；
使用 background-image 属性来实现；
例子 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接样式</title>
		<style type="text/css">
			a{
				background-image: url(img/1.jpg);
				width: 95px;
				height: 35px;
				color: #0055AA;
				text-decoration: none;
			}
			a:hover{
				background-image: url(img/2.jpg);
				color: #006699;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<a href="#">篮球</a>
		<a href="#">排球</a>
		<a href="#">羽毛球</a>
	</body>
</html>

20220519

3. 超链接按钮效果

例子 3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接样式</title>
		<style type="text/css">
			a{
				font-family: 宋体;
				font-size: 3em;
				text-align: center;
				margin: 3px;
			}
			a:link,a:visited{
				color: #ACCD3C;
				padding: 5px 11px 5px 11px;
				background-color: #ccd8db;
				text-decoration: none;
				border-top: 2px solid #EEEEEE;
				border-left: 1px solid #EEEEEE;
				border-bottom: 1px solid #7274A7;
				border-right: 1px solid #7274A7;
			}
			a:hover{
				color: #821818;
				padding: 5px 8px 3px 12px;
				background-color: #E20A0A;
				border-top: 1px solid #7274A7;
				border-left: 1px solid #7274A7;
				border-bottom: 1px solid #EEEEEE;
				border-right: 1px solid #EEEEEE;
			}
		</style>
	</head>
	<body>
		<a href="#">新闻</a>
		<a href="#">财经</a>
		<a href="#">人文</a>
	</body>
</html>

20220519

菇毒

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS 3之超链接特效

通过使用伪类能对超链接进行修饰；伪类是一种特殊的选择符，能被浏览器自动识别；最大的用处是在不同状态下能对超链接定义不同的样式效果，是 CSS 3本身定义的一种类；例子 1：例子 2：给超链接加入提示内容将图片作为背景图添加到超链接中，这样超链接能有更加精美的效果；使用属性来实现；例子 2：例子 3：...
复制链接

扫一扫