基于html和CSS3制作酷炫的导航栏

 主要亮点:

  1 ul 水平显示

  2 li 去掉圆点

  3 li中字体水平、竖直居中

  4 li控制边框样式

  5 使用html + css3 渐变画图 制作背景图片

  6 更改颜色透明度

  7 DIV制作边框阴影

先看效果图:

1.      
2. html lang="en">     
3.      
4.        
5.       
6.       
7.       
8.       
9.       
10.         
11.        *{ margin:0;padding:0; }     
12.        body{background:url("images/bg_title.jpg") repeat-x,url("images/bg.jpg");}     
13.        #Logo{     
14.            width:895px;height:45px;     
15.                 
16.            margin:50px auto;     
17.            border-radius:10px;     
18.                 
19.                background-image:-webkit-linear-gradient(rgba(41,41,41,0.75) 0% ,rgba(54,54,54,0.72) 50%,rgba(24,23,23,0.94) 51%);     
20.            box-shadow:1px 1px 33px #fff;     
21.        }     
22.        #Logo ul li     
23.        {     
24.            width:127px; height:45px;     
25.            list-style:none;     
26.            float:left;     
27.            color:white;     
28.            font-size:18px;     
29.            font-family:"微软雅黑";     
30.            text-align:center;     
31.            line-height:45px;     
32.            border-right:1px solid #000;     
33.        }     
34.        #Logo ul li a     
35.        {     
36.            color:white;     
37.            font-size:18px;     
38.            font-family:"微软雅黑";     
39.            text-decoration:none;     
40.        }     
41.        #Logo ul li:hover     
42.        {     
43.            background:rgba(10,5,5,0.45);     
44.        }     
45.        #Logo ul li.first:hover     
46.        {     
47.            border-radius:10px 0px 0px 10px;     
48.        }     
49.        #Logo ul li.last:hover     
50.        {     
51.            border-radius:0px 10px 10px 0px;     
52.        }     
53.        #Logo ul li ul li      
54.        {     
55.            border:none;     
56.            border-top:1px solid #989898;     
57.            background:rgba(10,5,5,0.45);     
58.            border-radius:10px;     
59.        }     
60.        #Logo ul li ul     
61.        {     
62.            display:none;     
63.        }     
64.        #Logo ul li ul li:hover     
65.        {     
66.            background:rgba(10,5,5,0.8);     
67.            border-radius:10px;     
68.        }     
69.        #Logo ul li:hover ul     
70.        {     
71.            display:block;     
72.            -webkit-animation:roll 1s ease;     
73.        }     
74.        @-webkit-keyframes roll      
75.        {     
76.            0% {-webkit-transform:rotate(0deg);}     
77.            100% {-webkit-transform:rotate(360deg);}     
78.        }     
79.         
80.      
81.      
82.    "Logo">     
83.        
         
    •                  
    •                "#">网址     
    •                
           
      •                    
      •      
      •                        "http://www.baidu.com">百度     
      •                    
           
      •                    
      •      
      •                        "http://www.sina.com">新浪     
      •                    
           
      •                
           
    •            
         
    •            
    •       
    •                "#">新闻     
    •            
         
    •            
    •       
    •                "#">视频     
    •            
         
    •            
    •       
    •                "#">音乐     
    •            
         
    •            
    •       
    •                "#">地图     
    •            
         
    •            
    •       
    •                "#">问问     
    •            
         
    •                  
    •                "#">关于     
    •            
         
    •        
         
84.         
85.      
86. /html>  

代码超简单，希望对大家学习制作html和css3制作超酷导航栏有所帮助。