1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a.one{ 8 display:inline-block; 9 height:58px; 10 width:120px; 11 text-align:center; 12 text-decoration:none; 13 color:#fff; 14 line-height:50px; 15 background:url("images/bg1.png"); 16 } 17 a.one:hover{ 18 background:url("images/bg2.png"); 19 } 20 a.two{ 21 display:inline-block; 22 height:58px; 23 width:120px; 24 text-align:center; 25 text-decoration:none; 26 color:#fff; 27 line-height:50px; 28 background:url("images/bg3.png"); 29 } 30 a.two:hover{ 31 background:url("images/bg4.png"); 32 } 33 a.three{ 34 display:inline-block; 35 height:58px; 36 width:120px; 37 color:#fff; 38 text-align:center; 39 line-height:50px; 40 text-decoration:none; 41 background:url("images/bg5.png"); 42 } 43 a.four{ 44 display:inline-block; 45 height:58px; 46 width:120px; 47 color:#fff; 48 text-align:center; 49 line-height:50px; 50 text-decoration:none; 51 background:url("images/bg6.png"); 52 } 53 </style> 54 </head> 55 <body> 56 <a href="#" class="one">五彩导航</a> 57 <a href="#" class="two">五彩导航</a> 58 <a href="#" class="three">五彩导航</a> 59 <a href="#" class="four">五彩导航</a> 60 </body> 61 </html>
原文：https://www.cnblogs.com/twinkle-/p/9096195.html