开发者学堂课程【移动 Web 前端开发：导航条-样式自定义】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8454
导航条-样式自定义
样式自定义的实际操作
.wjs_nav{
border:none;
border-bottom:1px solid #ccc;
background:#fff;
margin-bottom:0;
}
.wjs_icon_phone:before{
content:”\e908”;
}
.wjs_icon_tel:before{
content:”\e908”;
}
.wjs_icon_logo:before{
content:”\e908”;
}
.wjs_icon_name:before{
content:”\e908”;
}
<span class=”wjs_icon wjs_icon_logo”>
<span class=”wjs_icon wjs_icon_name”>
.wjs_nav .wjs_icon_logo{
font-size:50px;
}
.wjs_nav .wjs_icon_name{
font-size:36px;
}
.wjs_nav .navbar-nav > li > a:focus{
color:#333;
background-color:transparent;
border-bottom:3px solid #e92322;
}
修改主菜单的背景色等，
直接在 标签上写所需背景色：
background-color="rgba(70, 76, 91, 1)" text-color="#ccc">
管理1
配置1
修改子菜单的背景色：
.el-menu-item {
background-color: #333 !important;
}
字体颜色：
.el-aside {
color: #333;
}
鼠标悬浮时，子菜单的样式：
.el-menu-item:hover{
outline: 0 !important;
color: #409EFF !important;
}
.el-menu-item.is-active {
color: #fff !important;
background: #409EFF !important;
}
鼠标悬浮时，主菜单的样式：
.el-submenu__title:focus, .el-submenu__title:hover{
outline: 0 !important;
color: #409EFF !important;
background: none !important;
}
修改第三方组件的 CSS
>>> .el-menu-item:hover{
outline: 0 !important;
color: #409EFF !important;
}
/deep/ .el-menu-item:hover{
outline: 0 !important;
color: #409EFF !important;
}
::v-deep .el-menu-item:hover{
outline: 0 !important;
color: #409EFF !important;
}
