资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS中的导航栏和下拉菜单

CSS中的导航栏和下拉菜单

2json / 1896人阅读

摘要：一导航栏导航栏的作用熟练使用导航栏，对于网站排版非常重要使用你可以转换成好看的导航栏而不是枯燥的菜单。下拉菜单代码如下下拉菜单你好我好大家好效果图如下眼睛累了吧，注意劳逸结合呀

一、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>效果图如下：

（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>效果图如下：

二、下拉菜单 （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>效果图如下

眼睛累了吧，注意劳逸结合呀[-_-]
GPU云服务器 云服务器 div+css导航菜单 下拉导航 导航菜单 三级导航菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116905.html

相关文章

  • 纯CSS实现下拉菜单导航

    摘要：需求当鼠标到按钮上时，出现下拉菜单导航条。设置是，默认宽度为内容宽度，则鼠标只会在到按钮区域时才会展开下拉菜单以上是我的一些想法以及实现，如有错误之处，欢迎各位前端大神留言评论拍砖。 前言：本题是网易云课堂的前端微专业《页面制作》课程的作业题，当时对题意理解错误没有实现题目要求，成了心中永远的痛，所谓念念不忘必有回响，在学校图书馆花了几个小时做出来并对相关知识点进行了总结，写了这篇博文...

    bingo 评论0 收藏0

  • 纯CSS实现下拉菜单导航

    摘要：需求当鼠标到按钮上时，出现下拉菜单导航条。设置是，默认宽度为内容宽度，则鼠标只会在到按钮区域时才会展开下拉菜单以上是我的一些想法以及实现，如有错误之处，欢迎各位前端大神留言评论拍砖。 前言：本题是网易云课堂的前端微专业《页面制作》课程的作业题，当时对题意理解错误没有实现题目要求，成了心中永远的痛，所谓念念不忘必有回响，在学校图书馆花了几个小时做出来并对相关知识点进行了总结，写了这篇博文...

    wapeyang 评论0 收藏0

  • 如何使用Flexbox和CSS Grid，实现高效布局

    摘要：代码如下页面内容样式接下来，将侧边栏和主内容区域使用一个包含起来。列和行布局部分横跨所有的列。也可以使用简写，起始值和结束值位于同一行上，并用斜杠分隔。设计方法总结以上的布局设计中，使用了来进行整体布局以及设计中的非线性部分。 CSS 浮动属性一直是网站上排列元素的主要方法之一，但是当实现复杂布局时，这种方法不总是那么理想。幸运的是，在现代网页设计时代，使用 Flexbox 和 CSS...

    eternalshallow 评论0 收藏0

  • CSS学习笔记(九) 界面组件之导航菜单

    摘要：为了让包围列表项，没有使用，而是使用了，是因为前者会导致后来添加到下拉菜单中的子菜单无法显示它们最终会显示在父元素的外面，结果会导致溢出而被隐藏。它与父元素之间的间隙，实际上下拉菜单中第一个链接的边框。 菜单由一组链接组成。用 HTML 中的列表元素（ul 或 ol）来分组链接不仅符合逻辑，而且即使没有额外的 CSS 也能适当显示链接的层次。默认情况下，由于列表（li）是块级元素...

    pingink 评论0 收藏0

  • css 导航菜单+下拉菜单

    摘要：一导航菜单横向导航代码如下横向导航菜单首页新闻联系关于效果图竖向导航代码如下首页新闻联系关于效果图二下拉菜单和切换实现代码如下下拉菜单你好我好大家好效果图持续更新，欢迎各位指教 一、导航菜单 1.横向导航 代码如下： 横向导航菜单 body{ margin:0; } ul{ ...

    W4n9Hu1 评论0 收藏0

发表评论

登陆后可评论

0条评论

2json

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<