多态图标(3)-HTML使用CSS切换

最新推荐文章于 2022-12-09 09:38:27 发布

玖零大壮

最新推荐文章于 2022-12-09 09:38:27 发布

阅读量2.3k

点赞数

分类专栏： # c#

本文链接：https://blog.csdn.net/mybelief321/article/details/50184959

版权

c# 专栏收录该内容

15 篇文章 6 订阅

订阅专栏

前言

本节实现的目标是使用HTML的CSS实现图标的状态的切换，效果图如下

HTML标签 <a> 四态

本demo使用html中的<a>标签来演示，<a>也是有四态，如下：

a:link /*未访问时的状态*/

a:visited /*已访问过的状态*/

a:hover /*鼠标移动到链接上时的状态*/

a:active /*鼠标按下去时的状态*/

本节只实现了其中的三态转换，分别为：link、hover、active，图标如下

该图标为90x30尺寸

HTML代码

上图为demo的文件夹内容，其中img文件夹里存放的是上图所示的三态图标，其中test.html内容如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			.test a{background: url(img/testweb.png) no-repeat scroll 0 0 transparent; 	
			width: 30px;
			display: block;
		    height: 30px;
		    line-height: 12em;
		    overflow: hidden;
    }
    		.test a:hover{
    			background-position: -30px 0px;
    		}
    		
    		.test a:active{
    			background-position: -60px 0px;
    		}
		</style>
	</head>
	<body>
		<div class="test">
			<a >关闭</a>
		</div>
	</body>
</html>

该工程点此下载

你可以看到代码其实不多，因为我也是小白，好记性不如烂笔头，接下来我将上面用到的知识整理一下

玖零大壮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
多态图标(3)-HTML使用CSS切换

前言本节实现的目标是使用HTML的CSS实现图标的状态的切换，效果图如下HTML标签四态本demo使用html中的标签来演示，也是有四态，如下： a:link /*未访问时的状态*/ a:visited /*已访问过的状态*/ a:hover /*鼠标移动到链接上时的状态*/ a:active /*鼠标按下去时的状态*/
复制链接

扫一扫