1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>五彩导航栏</title> 6 <style> 7 .nav a { 8 width:120px ; 9 height: 58px; 10 display: inline-block; 11 text-decoration: none; 12 line-height: 48px; 13 color: white; 14 text-align: center; 15 } 16 .nav .bg1 { 17 background-image: url(img/bg1.png); 18 background-repeat: no-repeat; 19 20 } 21 .nav .bg1:hover { 22 background-image:url(img/bg5.png) 23 } 24 25 26 .nav .bg2 { 27 background-image: url(img/bg11.png); 28 background-repeat: no-repeat; 29 30 } 31 .nav .bg2:hover { 32 background-image:url(img/bg2.png); 33 } 34 35 36 .nav .bg3 { 37 background-image: url(img/bg22.png); 38 background-repeat: no-repeat; 39 40 } 41 .nav .bg3:hover { 42 background-image:url(img/bg3.jpg); 43 } 44 45 46 .nav .bg4 { 47 background-image: url(img/bg4.png); 48 background-repeat: no-repeat; 49 50 } 51 .nav .bg4:hover { 52 background-image:url(img/bg22.png) 53 } 54 </style> 55 </head> 56 <body> 57 <div class="nav"> 58 59 <a href="#" class="bg1">五彩导航</a> 60 <a href="#" class="bg2">五彩导航</a> 61 <a href="#" class="bg3">五彩导航</a> 62 <a href="#" class="bg4">五彩导航</a> 63 64 </div> 65 </body> 66 </html>