CSS Image Rollovers翻转效果Image Sprites图片精灵

代码

 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 3 
 4  < head >
 5  < meta  http-equiv ="X-UA-Compatible"  content ="IE=EmulateIE7"   />
 6  < meta  content ="text/html; charset=utf-8"  http-equiv ="Content-Type"   />
 7  < title > CSS Image Rollovers,Image Sprites  </ title >
 8  < meta  name ="Author"  content ="涂聚文"   />
 9  < meta  name ="Keywords"  content = "自定义字体 缔友计算机信息技术有限公司 捷为工作室 www.dupcit.com,Image Sprites ,Image Rollovers"   />
10  < meta  name ="Description"  content ="自定义字体 缔友计算机信息技术有限公司 捷为工作室,Image Rollovers,Image Sprites"   />
11  < link  rel ="shortcut icon"  href ="http://www.dupcit.com/favicon.ico"  type ="image/x-icon"   />
12  < link  rel ="icon"  href ="http://www.dupcit.com/favicon.ico"  type ="image/ico"   />
13 
14  < style  type ="text/css" >
15 
16      .rollover a  {
17          display : block ;
18          width :  90px ;
19          padding : 10px 10px 10px 7px ;
20          font :  bold 13px sans-serif ; ;
21          color : #333 ;
22          background :  url("rollover-image.gif") 0 0 no-repeat ;
23          text-decoration :  none ;
24           }
25      .rollover a:hover  {     
26          background-position :  0 -35px ;
27          color :  #049 ;
28           }
29      .rollover a:active  {
30          background-position :  0 -70px ;
31          color : #fff ;
32           }
33      #navlist { position : relative ; }
34  #navlist li { margin : 0 ; padding : 0 ; list-style : none ; position : absolute ; top : 0 ; }
35  #navlist li, #navlist a { height : 44px ; display : block ; }
36 
37  #home { left : 0px ; width : 46px ; }
38  #home { background : url('img_navsprites.gif') 0 0 ; }
39 
40  #prev { left : 63px ; width : 43px ; }
41  #prev { background : url('img_navsprites.gif') -47px 0 ; }
42 
43  #next { left : 129px ; width : 43px ; }
44  #next { background : url('img_navsprites.gif') -91px 0 ; }  
45 
46  </ style >
47 
48  </ head >
49  < body >< h2 > CSS Rollover Example </ h2 >
50  < p >< a  href ="pure-css-image-rollovers" >< < Back </a ></ p >
51 
52 
53  < div  class ="rollover" >
54       < a  href ="#" > Item 1 </ a >
55       < a  href ="#" > Item 2 </ a >
56       < a  href ="#" > Item 3 </ a >
57       < a  href ="#" > Tutorio </ a >
58  </ div >
59 
60  < p > View the source to see how this was done, visit  < a  href ="ure-css-image-rollovers" > The Pure Css Image rollover tutorial </ a >
61   for an explanation </ p >
62 
63 
64  < ul  id ="navlist" >
65     < li  id ="home" >< a  href ="default.asp" ></ a ></ li >
66     < li  id ="prev" >< a  href ="css_intro.asp" ></ a ></ li >
67     < li  id ="next" >< a  href ="css_syntax.asp" ></ a ></ li >
68  </ ul >
69 
70 
71  </ body >
72  </ html >
73 

 

转载于:https://www.cnblogs.com/geovindu/archive/2010/11/22/1884375.html