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 ...
随机推荐
- SringCloud学习成长之路 八 消息总线
Spring Cloud Bus 将分布式的节点用轻量的消息代理连接起来.它可以用于广播配置文件的更改或者服务之间的通讯,也可以用于监控.本文要讲述的是用Spring Cloud Bus实现通知微服务 ...
- PPT做交互效果
1 做交互效果(点击一个按钮,弹出某个框或者跳转到某个页面)其实就是若干个PPT页面,利用给按钮增加超链接或者动作 达到点击一个按钮 跳转到另外一个PPT的效果. 2 选择一个形状组件(或者其他组件) ...
- AES加密(java和C#)
需求:Java和C#进行数据交互,互相采用AES/CBC/PKCS5Padding进行加解密 Java加密和解密的代码如下: /** * 加密 1.构造密钥生成器 2.根据 ecnodeRules 规 ...
- python调用shell命令
1.subprocess介绍 官方推荐 subprocess模块,os.system(command) 这个废弃了 亲测 os.system 使用sed需要进行字符转义,非常麻烦 python3 su ...
- Linux清除痕迹
Linux清除痕迹 第一种方法: 在退出会话前直接执行: #history -r 清除当前会话的命令历史记录 第二种方法: 在vim中执行自己不想让别人看到的命令 随便用vim打开一个文件 :set ...
- Web前端开发工具
WebStorm: dreamweaver; Hbuilder: sublime text: 前端神器brackets.
- some code about numpy and notes about copy&broadcasting
import numpy as np np.__version__ #版本 #由于python的list不要求存储同样的类型,但是效率不高. L = [i for i in range(10)] L[ ...
- MacOS这idea快捷键
Control + Space 基本的代码补全(补全任何类.方法.变量) Control + Shift + Space 智能代码补全(过滤器方法列表和变量的预期类型) Command + Shift ...
- 终端、虚拟终端、shell、控制台、tty的区别
终端与控制台的区别? 最近开始接触Linux,终端.虚拟终端.shell.控制台.tty等概念让我很混乱,有必要认识清楚. 今天看到有人问终端和控制台的区别,而且这个问题比较有普遍性,因此想抽出一点时 ...
- python3.7 完美安装
在安装python3.7的过程中,我发现如果不加注意,pip3是无法被安装的.而这就不能算是完整安装python3了. 所以,我总结一下,如何完美安装python3.7. 依赖 yum insta ...