zoukankan      html  css  js  c++  java
  • elementui更改导航栏样式

     本来是这样,有下划线有点击背景,但是业务需求不需要,就想办法进行隐藏,控制台可以观察效果找出相应的类进行格式书写

    以下效果:

     放上代码

    <style>
    .el-menu-demo{
        height: 40px;
        /* border-bottom-color:none!important; */
        background-color:rgba(0,0,0,0);
        float:right;
        margin-right: 8.54%;
    
    }
    /* 点击出来的下划线进行隐藏 */
    .el-menu-item.is-active {
        border-bottom: none!important;
        color: rgba(0,0,0,0);
    }
    /* 整体的下划线进行隐藏 */
    .el-menu.el-menu--horizontal{
      border-bottom: none;
    }
    /* 导航栏的间距等样式 */
    .el-menu-item {
      padding: 0 62px;
      font-size: 16px;
    }
    
    /* 点击出来的下划线动效残留进行隐藏 */
    .el-menu--horizontal>.el-menu-item{
        border-bottom: none;
    }
    /* 点击以后的背景色进行隐藏 */
    .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
        background-color: rgba(0,0,0,0);
    }
    </style>

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    word上怎么打钩
    POI操作excel常用方法总结
    web.xml中Filter过滤器标签说明
    IDEA使用操作说明(自己总结)
    windows 64位上oracle 11g安装
    List<T>与List<?>的区别
    java分页之假分页
    CDN之Web Cache
    HTTP之缓存技术
    HTTP之Cookie和Session
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11957814.html
Copyright © 2011-2022 走看看