实践案例-五彩导航条

实践案例-五彩导航条

 

 

 

 

 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>

 

上一篇:《剑指offer》面试题16:不含重复字符的最长子字符串


下一篇:CSS 背景background,精灵spirit(移动背景图位置来实现)