elementui更改导航栏样式

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

放上代码
<style>
.el-menu-demo{
height: 40px;
/* border-bottom-color:none!important; */
background-color:rgba(,,,);
float:right;
margin-right: 8.54%; }
/* 点击出来的下划线进行隐藏 */
.el-menu-item.is-active {
border-bottom: none!important;
color: rgba(,,,);
}
/* 整体的下划线进行隐藏 */
.el-menu.el-menu--horizontal{
border-bottom: none;
}
/* 导航栏的间距等样式 */
.el-menu-item {
padding: 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(,,,);
}
</style>
elementui更改导航栏样式的更多相关文章
- iOS学习——更改导航栏的返回按钮的标题与颜色
转载自:修改navigationController返回按钮颜色和文字 今天在做项目时遇到这个问题,试了很多方法都失败了.最后终于找到正确的方案了,在这里分享给大家. 引言 在iOS开发过程中,Nav ...
- 更改导航栏的背景和文字Color
更改导航栏的背景和文字Color方法一: [objc] view plaincopy//set NavigationBar 背景颜色&title 颜色 [self.navigationCon ...
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- element-ui使用导航栏跳转路由用法
element-ui使用导航栏跳转路由用法 最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...
- 微信小程序------导航栏样式、tabBar导航栏
一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...
- 微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...
- React Navigation 导航栏样式调整+底部角标消息提示
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...
- elementUI的导航栏在刷新页面的时候选中状态消失的解决
首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...
- React-Native 之 GD (二)自定义共用导航栏样式
1.自定义导航栏样式 步骤一:从效果图中可以看出,导航栏的样式都差不多,因为我们前面已经设置了 Navigator ,这边的话我们还需要自定义 Navigator 的样式,可以看到所有的 Naviga ...
随机推荐
- selenium WebDriver 清空input的方式
做自动测试时,经常会出现某些文本框带有默认值的形式,此时我们为了输入我们预期的数据,就需要我们对默认值清楚后做处理.本文章提供四种方法 //方法1 public static void setElem ...
- 001-poi-excel-基础、单元格使用操作
一.概述 Apache POI是Apache软件基金会的开源项目,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. .NET的开发人员则可以利用NPOI (POI ...
- 30 Flutter自定义Dialog
MyDialog.dart import 'dart:async'; import 'package:flutter/material.dart'; class MyDialog extends Di ...
- 10--STL无序容器(Unordered Containers)
一:无序容器简介 Unordered Containers也是一种关联式容器.其中元素是分散,没有定性的排列(不是图中那样松散).其中元素可能在某一次操作后改变原来的位置. 哈希表的链地址法,更能表现 ...
- git 关于Git每次进入都需要输入用户名和密码的问题解决
解决办法: git bash进入你的项目目录,输入: git config --global credential.helper store 然后你会在你本地生成一个文本,上边记录你的账号和密码.当然 ...
- LeetCode_83. Remove Duplicates from Sorted List
83. Remove Duplicates from Sorted List Easy Given a sorted linked list, delete all duplicates such t ...
- delphi ADOQUery中错误解决方法"无法为更新定位行。一些值可能已在最后...
使用delphi中的ADOQuery控件中自带的,insert ,edit,delete此操作时,有时会出现下面的错误提示,提示错误信息:"无法为更新定位行.一些值可能已在最后一次读取后已更 ...
- laravel门面DB返回数组配置
在数据库配置文件中添加 'fetch' => PDO::FETCH_ASSOC, //但是这个配置好像是全局的,不能针对单个数据库连接进行配置 也可以在方法内使用php内置函数get_objec ...
- css3实现左右锯齿效果
要实现的效果:css3实现左右锯齿效果 <!DOCTYPE html> <html> <head> <meta charset=" utf-8&qu ...
- 《Django企业开发实战 高效Python Web框架指南》胡阳
链接:https://pan.baidu.com/s/1NmN_IT5RvevCMt9bZCW1-g提取码:2ki9