<a>链接的不同状态

链接的不同状态

<!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>a链接的不同状态</title>
 </head>
 <body>
    <style>
        a:link{ /*默认时状态左上角(0,0),以下四状态必须按顺序来*/
            background-position:0px 0px;
        }
        a:visited{/*点击之后,切换整图位置*/
            background-position:-146px 0px;
        }
        a:hover{/*悬停时,切换整图位置*/
            background-position:-282px 0px;
        }
        a:active{/*点击时,切换整图位置*/
            background-position:-428px 0px;
        }


    </style>
    <a href="#" style="background-image:url(css/carama.png);
            border:1px gray solid;
            border-radius:50px;
            width:148px;
            height:126px;
            background-repeat:no-repeat;
            display:block;">      <!--将行级标签变成块级标签-->
            <!--display:none没有||block转换成块级||inline转换成行级-->
    </a>
 </body>
</html>

原图片:

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值