<a>链接的不同状态

it_heros

于 2015-12-28 11:05:57 发布

阅读量550

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： HTML a链接状态

本文链接：https://blog.youkuaiyun.com/sunshine_mood/article/details/50417626

HTML 专栏收录该内容

5 篇文章

订阅专栏

链接的不同状态

<!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>

原图片：