怎么用html和CSS3制作好看的导航栏

这篇文章主要介绍“怎么用html和CSS3制作好看的导航栏”，在日常操作中，相信很多人在怎么用html和CSS3制作好看的导航栏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用html和CSS3制作好看的导航栏”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联公司拥有网站维护技术和项目管理团队，建立的售前、实施和售后服务体系，为客户提供定制化的成都网站设计、成都网站建设、外贸网站建设、网站维护、多线服务器托管解决方案。为客户网站安全和日常运维提供整体管家式外包优质服务。我们的网站维护服务覆盖集团企业、上市公司、外企网站、商城建设、政府网站等各类型客户群体，为全球上千多家企业提供全方位网站维护、服务器维护解决方案。

 主要亮点:

  1 ul 水平显示

  2 li 去掉圆点

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

  4 li控制边框样式

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

  6 更改颜色透明度

  7 DIV制作边框阴影

先看效果图:

CSS Code复制内容到剪贴板

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.            /*margin:上下 左右*/     

16.            margin:50px auto;     

17.            border-radius:10px;     

18.            /*html + css3 渐变画图 */     

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;/* #fff */     

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;/* #fff */     

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;/*roll 旋转名称，1s旋转效果 */     

73.        }     

74.        @-webkit-keyframes roll /*roll旋转名称与上面一致*/     

75.        {     

76.            0% {-webkit-transform:rotate(0deg);}     

77.            100% {-webkit-transform:rotate(360deg);}     

78.        }     

79.         

80.      

81.      

82.         

83.        

         

    •                  

    •                网址     

    •                

           

      •                    

      •      

      •                        百度     

      •                    

           

      •                    

      •      

      •                        新浪     

      •                    

           

      •                

           

    •            

         

    •            

    •       

    •                新闻     

    •            

         

    •            

    •       

    •                视频     

    •            

         

    •            

    •       

    •                音乐     

    •            

         

    •            

    •       

    •                地图     

    •            

         

    •            

    •       

    •                问问     

    •            

         

    •                  

    •                关于     

    •            

         

    •        

         

84.