按钮练习

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             /*.btn:link{
 8                 
 9                 display: block;
10                 width: 120px;
11                 height: 120px;
12                 background-image: url(img/btn/link.png);
13                 background-repeat: no-repeat;
14             }
15             
16             .btn:hover{
17                 background-image: url(img/btn/hover.png);
18             }
19         
20             .btn:active{
21                 background-image: url(img/btn/active.png);
22             }*/
23             
24             /*使用整合的图片*/
25             .btn:link{
26                 display: block;
27                 width: 95px;
28                 height: 100px;
29                 background-image: url(img/btn/together.jpg);
30                 background-repeat: no-repeat;
31             }
32             .btn:hover{
33                 background-position: -78px;
34             }
35             .btn:active{
36                 background-position: -156px;
37             }
38         </style>
39     </head>
40     <body>
41         <a href="#" class="btn"></a>
42     </body>
43 </html>