代码
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
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