五彩导航栏

最新推荐文章于 2024-03-14 12:40:51 发布

weixin_30940783

最新推荐文章于 2024-03-14 12:40:51 发布

阅读量976

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuyang-ly/p/7519760.html

 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             width: 120px;
10             height: 58px;
11             background: url("bg1.png");
12             text-align: center;
13             text-decoration: none;
14             color: white;
15             line-height: 54px;
16         }a.one:hover{
17             background: url("bg2.png");
18         }
19         a.two{
20             display: inline-block;
21             width: 120px;
22             height: 58px;
23             background: url("bg3.png");
24             text-align: center;
25             text-decoration: none;
26             color: white;
27             line-height: 54px;
28         }
29         a.two:hover{
30             background: url("bg4.png");
31         }
32         a.three{
33             display: inline-block;
34             width: 120px;
35             height: 58px;
36             background: url("bg5.png");
37             text-align: center;
38             text-decoration: none;
39             color: white;
40             line-height: 54px;
41         }
42         a.three:hover{
43             background: url("bg6.png");
44         }
45         a.four{
46             display: inline-block;
47             width: 120px;
48             height: 58px;
49             background: url("bg7.png");
50             text-align: center;
51             text-decoration: none;
52             color: white;
53             line-height: 54px;
54         }
55         a.four:hover{
56             background: url("bg2.png");
57         }
58     </style>
59 </head>
60 <body>
61      <a href="#" class="one">五彩导航</a>
62      <a href="#" class="two">五彩导航</a>
63      <a href="#" class="three">五彩导航</a>
64      <a href="#" class="four">五彩导航</a>
65 </body>
66 </html>