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>