• CSS 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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    20220519

  • 相关阅读:
    [一篇读懂]C语言十讲：单链表的新建、查找
    java基础讲义03
    五、C#—字符串
    【第三篇】- 深入学习Git 工作流程
    【MySQL进阶之路丨第十六篇】一文带你精通MySQL函数
    Lombok
    Facebook公共主页新版和经典版的切换以及注意事项
    【数据结构】二叉树
    【行为型模式】解释器模式
    Mysql 数据库基础(重点）
  • 原文地址：https://blog.csdn.net/weixin_43960383/article/details/125583380