宜宾网站建设公司

使用CSS怎么实现一个导航栏和下拉菜单

这篇文章将为大家详细讲解有关使用CSS怎么实现一个导航栏和下拉菜单，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联公司是专业的酒泉网站建设公司，酒泉接单;提供网站制作、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行酒泉网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

一、CSS导航栏

（1）导航栏的作用

熟练使用导航栏，对于网站排版非常重要,使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

（2）垂直导航栏

<1>代码如下



     
         
        垂直导航栏 
        
    
    
        
    
            
  • 主页
    • 
            
  • 新闻
    • 
            
  • 联系
    • 
            
  • 关于
    • 
        

        

          
垂直导航栏

          
垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏

          
垂直导航栏

          
垂直导航栏

          
垂直导航栏

          
垂直导航栏

          
垂直导航栏

          
垂直导航栏

          
垂直导航栏

        

    

body{
    margin:0;
}
ul{
    padding:0;
    margin:0;
    list-style-type:none;
    
    width:25%;
    background-color:#f1f1f1;
    
    position:fixed;
    height:100%;
    top:0;
    overflow:auto;
    
    /* border:1px solid #000; */
}
/* ul>li:not(:last-child){
    border-bottom:1px solid #000;
} */
ul a{
    display:block;
    
    text-decoration:none;
    color:#000;
    padding:8px 16px;
    
    text-align:center;
}
li a:hover:not(.active){
    background-color:#555;
    color:white;    
}
a.active{
    background-color:#4caf50;
    color:white;    
}
div{
    margin-left:25%;
    padding:1px 16px;
    height:100px;
    
}

<2>效果图如下：

使用CSS怎么实现一个导航栏和下拉菜单

（3）水平导航栏

<1>代码如下：



     
         
        水平导航栏 
        
    
    
        
    
            
  • 主页
    • 
            
  • 新闻
    • 
            
  • 联系
    • 
            关于
        

        
            
水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
水平导航栏；水平导航栏；水平导航栏；水平导航栏

            
     body{     margin:0; } ul{     padding:0px;     margin:0px;     list-style-type:none;     background-color:#333;     overflow:hidden;          position:fixed;     top:0px;     width:100%; } ul>li{     float:left;     border-right:1px solid #fff;     display:inline; } ul>li:last-child{     border-right:none;      } a{     padding:14px 16px;          display:block;     width:60px;          text-align:center;          text-decoration:none;     color:white;      } li a:hover:not(.active) {     background-color: #111; }      li a.active {     color: white;     background-color: #4CAF50; } .box{padding:20px; margin-top:30px; background-color:#1abc9c; height:1500px;}

<2>效果图如下：

使用CSS怎么实现一个导航栏和下拉菜单

二、下拉菜单

（1）下拉菜单的作用

下拉菜单可以使你的网页不在枯燥，可以通过css改变网页的美观，这也是网页排版必不可少的东西。

（2）下拉菜单

<1>代码如下：




    
    


    






    
        
            下拉菜单
        
        
            
    
                
  • 你好！
    • 
                
  • 我好！
    • 
                
  • 大家好！
    • 
            

        
        
    
body{     margin:0;     text-align:center; } .dropdown{          background-color:green;     text-align:center;     padding:20px;     display:inline-block;     cursor:pointer;     position:relative; } .di{     display:none;     position:absolute;     top:61px;     left:0; } .di ul{     list-style:none;     padding:0;     margin:0;     background-color: #f9f9f9;     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .di ul li{     min-width:104px;     padding:10px 15px;      } .dropdown:hover{     background-color:#3e8e41 } .dropdown:hover .di{     display:block;      } .di ul li:hover{     background-color: #f1f1f1 }

<2>效果图如下

使用CSS怎么实现一个导航栏和下拉菜单

css的选择器有哪些

css的选择器可以分为三大类，即id选择器、class选择器、标签选择器。它们之间可以有多种组合，有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等

关于使用CSS怎么实现一个导航栏和下拉菜单就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


本文标题：使用CSS怎么实现一个导航栏和下拉菜单
文章来源：http://ybzwz.com/article/pijjpp.html

其他资讯