7b2主题美化 菜单栏美化以及添加VIP图标

1269845

效果图

图片[1]-7b2主题美化 菜单栏美化以及添加VIP图标-AA源码网 | 源码收藏

教程

  • 替换Header.php文件,路径为主题下b2/Modules/Templates
  • 将css复制到主题下(后台-->主题-->自定义-->额外css中)
  • 图片替换到根目录下即可/www/wwwroot/站点/pic中

CSS代码

/*导航头部开始*/
@media screen and (max-width:768px) {
       
    .site-header{
    height:70px!important;
}
}
.jiaobiao_color1{
    color:#fff;
    background-color:#03bbff;
}
.jiaobiao_color2{
    color:#fff;
    background-color:#ca26ff;
}
.jiaobiao_color3{
    color:#fff;
    background-color:#7bdcb5;
}
.jiaobiao_color4{
    color:#fff;
    background-color:#ff2a8e;
}
.jiaobiao_color5{
    color:#fff;
    background-color:#ff8f21;
}
.jiaobiao_color6{
    color:#fff;
    background-color:#00ce41;
}
@media screen and (max-width: 768px){
.header, .header .wrapper {
    height: 44px!important;
}
.change-theme {
display:none!important;
    
}
.logo-center .login-button .b2-account-circle-line, .logo-left .login-button .b2-account-circle-line, .menu-center .login-button .b2-account-circle-line, .logo-top .login-button .b2-account-circle-line {
    color: #121212!important;
}
}
.logo img {
    display: block;
    height: 45px;
}
.has_children .sub-menu a {
    display: block;
    align-items: center;
    text-align: center;
}
.sub-menu {
    top: 55px;
    width: 125px;
}
.b2-menu-3 .sub-menu-0 a {
    line-height: 20px;
}
.top-menu ul li.depth-0 > a {
    font-size: 15px;
    display: flex;
    letter-spacing: 3px;
    align-items: center;
    position: relative;
    z-index: 2;
    height: 70px;
}
.top-menu ul li.depth-0 > a .hob {
    width: 10px;
    height: 3px;
    border-radius: 5px;
    bottom: 6px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: -5px;
    right: 0;
    text-align: center;
    /* width: 100%; */
    /* height: 3px; */
    /* border-radius: 5px; */
    /* top: 0px; */
    /* position: absolute; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* left: 0; */
    /* right: 0; */
    /* text-align: center; */
}
.b2-menu-1 .sub-menu-0 li a img {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  margin: auto;
}
.top-menu-ul > li.depth-0 + li.depth-0 > a .hob {
    left: 0px; 
    right: 0px; 
}
.site-header{
    height:100px;
}
.site.up .site-header-in {
    transform: translate(0,-100px);
    transition: transform .3s,background-color .3s ease-out;
}
.top-style-blur {
    top: 0px;
    border-top: 1px solid #f5f6f7;
}
.top-style-blur {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 1px;
    background: #fff;
}
.header, .header .wrapper {
    height: 70px;
}
.header-banner .ym-menu a, .header-banner, .social-top .site-title, .top-search-button button, .top-search input, .login-button .b2-account-circle-line {
    color: #ffffff!important;
    fill: #ffffff!important;
}
.header-banner-content {
    height: 30px;
}
.header-banner {
    background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
}
.change-theme {
    display: flex;
    margin: 0 10px;
    align-items: center;
    float: left;
    margin-top: 6px;
}
.login-button {
    display: block;
    align-items: center;
}
.social-top .header-login-button button {
    margin-left: 0;
    background: none;
    border: 0;
    color: inherit;
    background: rgb(255 255 255 / 100%);
}
button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text {
    color: #ff3c56;
}
.header-login-button .emptya{
    background: #ff3c56;
    border: 1px solid #ff3c56!important;
    border-radius: 5px;
}
.header-login-button button {
    margin-left: 0px;
    padding: 6px 6px;
}
button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text {
    color: var(--b2color)!important;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
    font-size: 16px;
    line-height: 22px;
    color: #663f32;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: 4px;
}
.Onecad_benefitTag_benefits-wrapper {
    position: relative;
    margin-right: 5px;
    /* width: 48px; */
    display: flex;
    justify-content: center;
    height: 53px;
}
.benefitTag__benefits-icon___3aeab {
  display:inline-block;
  width:32px;
  height:32px;
}
.benefitTag__benefits-text___5d19f {
  font-size:12px;
  color:#4d3626;
  font-weight:600;
  position:absolute;
  bottom:0;
  left:50%;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
  white-space:nowrap;
}
.benefitTag__popover___fbaea {
  min-width:0;
  max-width:200px;
  z-index:9;
}
.Onecad_memberWrapper {
    position: relative;
    padding: 5px 20px 20px;
    /* background-image: linear-gradient(135deg,#f2d6c2,#f2c8aa); */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    background-color: #ffffff87;
    backdrop-filter: blur(10px);
    align-items: center;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 5px 40px 0px rgba(17,58,93,.1);
    
}
.Onecad_memberWrapper .Onecad_memberCard_member-header {
  position:relative;
  padding-top:12px;
  font-weight:700;
  white-space:nowrap;
  text-align:center;
  margin-bottom:16px;
  width: 300px;
  box-sizing:border-box;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
  font-size:16px;
  line-height:22px;
  color:#663f32;
  letter-spacing:0;
  font-weight:600;
  margin-bottom:4px;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc {
  font-size:12px;
  color:#663f32;
  letter-spacing:0;
  line-height:17px;
  font-weight:400;
}
.Onecad_memberWrapper.Onecad_memberCard_none .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
  height:25px;
  width:180px;
  margin-left:auto;
  margin-right:auto;
}
.Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header,.Onecad_memberWrapper.memberCard__will-expired___3128d .Onecad_memberCard_member-header {
  background:hsla(0,0%,100%,.8);
  padding:16px 0;
  border-radius:8px;
}
.Onecad_memberWrapper.memberCard__expired___9de29 {
  background:#dadde0;
}
.Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header,  .Onecad_memberWrapper .Onecad_memberCard_member-benefits {
  position:relative;
  width: 100%;
  box-sizing:border-box;
  /* padding:12px 16px; */
  background:hsla(0,0%,100%,.8);
  border-radius:8px;
  margin-bottom:16px;
  white-space:nowrap;
  overflow:hidden;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits li {
  /* display:inline-block; */
  float: left;
  width: 25%;
  margin: 10px 0;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 {
  position:absolute;
  top:50%;
  width:12px;
  height:28px;
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
  background-color:rgba(230,163,115,.2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .25s;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 .memberCard__icon-font___9846a,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 .memberCard__icon-font___9846a {
  color:#4d3626;
  font-size:12px;
  -webkit-transform:scale(.5);
  transform:scale(.5);
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917:hover,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46:hover {
  background-color:rgba(230,163,115,.16);
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 {
  left:0;
  border-radius:0 4px 4px 0;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 {
  right:0;
  border-radius:4px 0 0 4px;
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1 {
  position:relative;
  width:152px;
  height:32px;
  background-image:linear-gradient(134deg,#4d5580,#3d4466);
  font-size:14px;
  color:#fff3eb;
  font-weight:600;
  display:flex;
  align-items:center;
  border-radius: 5px;
  justify-content:center;
  cursor:pointer;
}
.Onecad_memberWrapper>button{
    border: 0!important;
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1:hover {
  background-image:linear-gradient(134deg,rgba(77,85,128,.9),rgba
(61,68,102,.9));
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1:active {
  background-image:linear-gradient(134deg,rgba(77,85,128,.8),rgba
(61,68,102,.8));
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1 .memberCard__tips___3220a {
    top: -10px;
    right: -15px;
    position: absolute;
    background-image: linear-gradient(90deg,#ff9580,#f36);
    border-radius: 6px;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
    font-weight: 100;
    padding: 2px 8px;
    font-size: 12px;
}
.Onecad_memberCard_benefitsLiWrapper {
  position:relative;
  left:0;
  transition:left .3s linear;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc {
  font-size:12px;
  color:#663f32;
  letter-spacing:0;
  line-height:17px;
  font-weight:400;
}
.Onecad_header_vip_topi {
  padding:2px 6px 0 6px;
  right: 0px;
  line-height:24px;
  color:#fff;
  text-align:center;
  position: absolute;
  top: 1px;
  box-sizing:border-box;
  border-radius:16px;
  font-size:19px;
  white-space:nowrap;
  -webkit-transform:scale(.5);
}
.Onecad_header_vip {
  padding: 0px 20px;
    position: relative;
    width: 25px;
    height: 25px;
    margin-right: 20px;
  background:url(/pic/vipiconhover.svg) no-repeat 
50%/25px;
}
.Onecad_header_vip>i {
    position: absolute;
    top: -15px;
}
.Onecad_header_vip:hover .Onecad_member_tip[data-status=true] {
  display:block;
}
.Onecad_member_tip {
position: absolute;
    padding-top: 70px;
    margin-top: -23px;
    right: -14px;
    display: none;
    z-index: 8000;
}
.Onecad_header_vip  i {
    font-style: normal;
    font-weight: 400;
}
/*导航头部结束*/
/*导航头部开始*/
@media screen and (max-width:768px) {
       
    .site-header{
    height:70px!important;
}
}
.jiaobiao_color1{
    color:#fff;
    background-color:#03bbff;
}
.jiaobiao_color2{
    color:#fff;
    background-color:#ca26ff;
}
.jiaobiao_color3{
    color:#fff;
    background-color:#7bdcb5;
}
.jiaobiao_color4{
    color:#fff;
    background-color:#ff2a8e;
}
.jiaobiao_color5{
    color:#fff;
    background-color:#ff8f21;
}
.jiaobiao_color6{
    color:#fff;
    background-color:#00ce41;
}
@media screen and (max-width: 768px){
.header, .header .wrapper {
    height: 44px!important;
}
.change-theme {
display:none!important;
    
}

.logo-center .login-button .b2-account-circle-line, .logo-left .login-button .b2-account-circle-line, .menu-center .login-button .b2-account-circle-line, .logo-top .login-button .b2-account-circle-line {
    color: #121212!important;
}


}

.logo img {
    display: block;
    height: 45px;
}
.has_children .sub-menu a {
    display: block;
    align-items: center;
    text-align: center;
}
.sub-menu {
    top: 55px;
    width: 125px;

}
.b2-menu-3 .sub-menu-0 a {
    line-height: 20px;
}
.top-menu ul li.depth-0 > a {
    font-size: 15px;
    display: flex;
    letter-spacing: 3px;
    align-items: center;
    position: relative;
    z-index: 2;
    height: 70px;
}
.top-menu ul li.depth-0 > a .hob {
    width: 10px;
    height: 3px;
    border-radius: 5px;
    bottom: 6px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: -5px;
    right: 0;
    text-align: center;
    /* width: 100%; */
    /* height: 3px; */
    /* border-radius: 5px; */
    /* top: 0px; */
    /* position: absolute; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* left: 0; */
    /* right: 0; */
    /* text-align: center; */
}
.b2-menu-1 .sub-menu-0 li a img {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  margin: auto;
}
.top-menu-ul > li.depth-0 + li.depth-0 > a .hob {
    left: 0px; 
    right: 0px; 
}
.site-header{
    height:100px;
}
.site.up .site-header-in {
    transform: translate(0,-100px);
    transition: transform .3s,background-color .3s ease-out;
}
.top-style-blur {
    top: 0px;
    border-top: 1px solid #f5f6f7;
}
.top-style-blur {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 1px;
    background: #fff;
}
.header, .header .wrapper {
    height: 70px;
}
.header-banner .ym-menu a, .header-banner, .social-top .site-title, .top-search-button button, .top-search input, .login-button .b2-account-circle-line {
    color: #ffffff!important;
    fill: #ffffff!important;
}
.header-banner-content {
    height: 30px;
}
.header-banner {
    background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
}
.change-theme {
    display: flex;
    margin: 0 10px;
    align-items: center;
    float: left;
    margin-top: 6px;
}

.login-button {
    display: block;
    align-items: center;
}
.social-top .header-login-button button {
    margin-left: 0;
    background: none;
    border: 0;
    color: inherit;
    background: rgb(255 255 255 / 100%);
}
button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text {
    color: #ff3c56;
}
.header-login-button .emptya{
    background: #ff3c56;
    border: 1px solid #ff3c56!important;
    border-radius: 5px;
}
.header-login-button button {
    margin-left: 0px;
    padding: 6px 6px;
}
button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text {
    color: var(--b2color)!important;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
    font-size: 16px;
    line-height: 22px;
    color: #663f32;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: 4px;
}
.Onecad_benefitTag_benefits-wrapper {
    position: relative;
    margin-right: 5px;
    /* width: 48px; */
    display: flex;
    justify-content: center;
    height: 53px;
}
.benefitTag__benefits-icon___3aeab {
  display:inline-block;
  width:32px;
  height:32px;
}
.benefitTag__benefits-text___5d19f {
  font-size:12px;
  color:#4d3626;
  font-weight:600;
  position:absolute;
  bottom:0;
  left:50%;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
  white-space:nowrap;
}
.benefitTag__popover___fbaea {
  min-width:0;
  max-width:200px;
  z-index:9;
}

.Onecad_memberWrapper {
    position: relative;
    padding: 5px 20px 20px;
    /* background-image: linear-gradient(135deg,#f2d6c2,#f2c8aa); */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    background-color: #ffffff87;
    backdrop-filter: blur(10px);
    align-items: center;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 5px 40px 0px rgba(17,58,93,.1);
    
}
.Onecad_memberWrapper .Onecad_memberCard_member-header {
  position:relative;
  padding-top:12px;
  font-weight:700;
  white-space:nowrap;
  text-align:center;
  margin-bottom:16px;
  width: 300px;
  box-sizing:border-box;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
  font-size:16px;
  line-height:22px;
  color:#663f32;
  letter-spacing:0;
  font-weight:600;
  margin-bottom:4px;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc {
  font-size:12px;
  color:#663f32;
  letter-spacing:0;
  line-height:17px;
  font-weight:400;
}
.Onecad_memberWrapper.Onecad_memberCard_none .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
  height:25px;
  width:180px;
  margin-left:auto;
  margin-right:auto;
}
.Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header,.Onecad_memberWrapper.memberCard__will-expired___3128d .Onecad_memberCard_member-header {
  background:hsla(0,0%,100%,.8);
  padding:16px 0;
  border-radius:8px;
}
.Onecad_memberWrapper.memberCard__expired___9de29 {
  background:#dadde0;
}
.Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header,  .Onecad_memberWrapper .Onecad_memberCard_member-benefits {
  position:relative;
  width: 100%;
  box-sizing:border-box;
  /* padding:12px 16px; */
  background:hsla(0,0%,100%,.8);
  border-radius:8px;
  margin-bottom:16px;
  white-space:nowrap;
  overflow:hidden;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits li {
  /* display:inline-block; */
  float: left;
  width: 25%;
  margin: 10px 0;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 {
  position:absolute;
  top:50%;
  width:12px;
  height:28px;
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
  background-color:rgba(230,163,115,.2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .25s;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 .memberCard__icon-font___9846a,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 .memberCard__icon-font___9846a {
  color:#4d3626;
  font-size:12px;
  -webkit-transform:scale(.5);
  transform:scale(.5);
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917:hover,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46:hover {
  background-color:rgba(230,163,115,.16);
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 {
  left:0;
  border-radius:0 4px 4px 0;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 {
  right:0;
  border-radius:4px 0 0 4px;
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1 {
  position:relative;
  width:152px;
  height:32px;
  background-image:linear-gradient(134deg,#4d5580,#3d4466);
  font-size:14px;
  color:#fff3eb;
  font-weight:600;
  display:flex;
  align-items:center;
  border-radius: 5px;
  justify-content:center;
  cursor:pointer;
}
.Onecad_memberWrapper>button{
    border: 0!important;
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1:hover {
  background-image:linear-gradient(134deg,rgba(77,85,128,.9),rgba

(61,68,102,.9));
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1:active {
  background-image:linear-gradient(134deg,rgba(77,85,128,.8),rgba

(61,68,102,.8));
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1 .memberCard__tips___3220a {
    top: -10px;
    right: -15px;
    position: absolute;
    background-image: linear-gradient(90deg,#ff9580,#f36);
    border-radius: 6px;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
    font-weight: 100;
    padding: 2px 8px;
    font-size: 12px;
}
.Onecad_memberCard_benefitsLiWrapper {
  position:relative;
  left:0;
  transition:left .3s linear;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc {
  font-size:12px;
  color:#663f32;
  letter-spacing:0;
  line-height:17px;
  font-weight:400;
}

.Onecad_header_vip_topi {
  padding:2px 6px 0 6px;
  right: 0px;
  line-height:24px;
  color:#fff;
  text-align:center;
  position: absolute;
  top: 1px;
  box-sizing:border-box;
  border-radius:16px;
  font-size:19px;
  white-space:nowrap;
  -webkit-transform:scale(.5);
}
.Onecad_header_vip {
  padding: 0px 20px;
    position: relative;
    width: 25px;
    height: 25px;
    margin-right: 20px;
  background:url(/pic/vipiconhover.svg) no-repeat 

50%/25px;
}
.Onecad_header_vip>i {
    position: absolute;
    top: -15px;
}
.Onecad_header_vip:hover .Onecad_member_tip[data-status=true] {
  display:block;
}
.Onecad_member_tip {
position: absolute;
    padding-top: 70px;
    margin-top: -23px;
    right: -14px;
    display: none;
    z-index: 8000;
}
.Onecad_header_vip  i {
    font-style: normal;
    font-weight: 400;
}
/*导航头部结束*/
/*导航头部开始*/
@media screen and (max-width:768px) {
       
    .site-header{
    height:70px!important;
}
}
.jiaobiao_color1{
    color:#fff;
    background-color:#03bbff;
}
.jiaobiao_color2{
    color:#fff;
    background-color:#ca26ff;
}
.jiaobiao_color3{
    color:#fff;
    background-color:#7bdcb5;
}
.jiaobiao_color4{
    color:#fff;
    background-color:#ff2a8e;
}
.jiaobiao_color5{
    color:#fff;
    background-color:#ff8f21;
}
.jiaobiao_color6{
    color:#fff;
    background-color:#00ce41;
}
@media screen and (max-width: 768px){
.header, .header .wrapper {
    height: 44px!important;
}
.change-theme {
display:none!important;
    
}

.logo-center .login-button .b2-account-circle-line, .logo-left .login-button .b2-account-circle-line, .menu-center .login-button .b2-account-circle-line, .logo-top .login-button .b2-account-circle-line {
    color: #121212!important;
}


}

.logo img {
    display: block;
    height: 45px;
}
.has_children .sub-menu a {
    display: block;
    align-items: center;
    text-align: center;
}
.sub-menu {
    top: 55px;
    width: 125px;

}
.b2-menu-3 .sub-menu-0 a {
    line-height: 20px;
}
.top-menu ul li.depth-0 > a {
    font-size: 15px;
    display: flex;
    letter-spacing: 3px;
    align-items: center;
    position: relative;
    z-index: 2;
    height: 70px;
}
.top-menu ul li.depth-0 > a .hob {
    width: 10px;
    height: 3px;
    border-radius: 5px;
    bottom: 6px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: -5px;
    right: 0;
    text-align: center;
    /* width: 100%; */
    /* height: 3px; */
    /* border-radius: 5px; */
    /* top: 0px; */
    /* position: absolute; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* left: 0; */
    /* right: 0; */
    /* text-align: center; */
}
.b2-menu-1 .sub-menu-0 li a img {
	width: 50px;
	height: 50px;
	border-radius: 100%;
	margin: auto;
}
.top-menu-ul > li.depth-0 + li.depth-0 > a .hob {
    left: 0px; 
    right: 0px; 
}
.site-header{
    height:100px;
}
.site.up .site-header-in {
    transform: translate(0,-100px);
    transition: transform .3s,background-color .3s ease-out;
}
.top-style-blur {
    top: 0px;
    border-top: 1px solid #f5f6f7;
}
.top-style-blur {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 1px;
    background: #fff;
}
.header, .header .wrapper {
    height: 70px;
}
.header-banner .ym-menu a, .header-banner, .social-top .site-title, .top-search-button button, .top-search input, .login-button .b2-account-circle-line {
    color: #ffffff!important;
    fill: #ffffff!important;
}
.header-banner-content {
    height: 30px;
}
.header-banner {
    background-image: linear-gradient(to right, #00c6fb 0%, #005bea 100%);
}
.change-theme {
    display: flex;
    margin: 0 10px;
    align-items: center;
    float: left;
    margin-top: 6px;
}

.login-button {
    display: block;
    align-items: center;
}
.social-top .header-login-button button {
    margin-left: 0;
    background: none;
    border: 0;
    color: inherit;
    background: rgb(255 255 255 / 100%);
}
button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text {
    color: #ff3c56;
}
.header-login-button .emptya{
    background: #ff3c56;
    border: 1px solid #ff3c56!important;
    border-radius: 5px;
}
.header-login-button button {
    margin-left: 0px;
    padding: 6px 6px;
}
button.empty, .button.empty, li.current-menu-item > a, .top-menu-hide:hover .more, .header .top-menu ul li.depth-0:hover > a .b2-jt-block-down, button.text {
    color: var(--b2color)!important;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
    font-size: 16px;
    line-height: 22px;
    color: #663f32;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: 4px;
}
.Onecad_benefitTag_benefits-wrapper {
    position: relative;
    margin-right: 5px;
    /* width: 48px; */
    display: flex;
    justify-content: center;
    height: 53px;
}
.benefitTag__benefits-icon___3aeab {
	display:inline-block;
	width:32px;
	height:32px;
}
.benefitTag__benefits-text___5d19f {
	font-size:12px;
	color:#4d3626;
	font-weight:600;
	position:absolute;
	bottom:0;
	left:50%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	white-space:nowrap;
}
.benefitTag__popover___fbaea {
	min-width:0;
	max-width:200px;
	z-index:9;
}

.Onecad_memberWrapper {
    position: relative;
    padding: 5px 20px 20px;
    /* background-image: linear-gradient(135deg,#f2d6c2,#f2c8aa); */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    background-color: #ffffff87;
    backdrop-filter: blur(10px);
    align-items: center;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 5px 40px 0px rgba(17,58,93,.1);
    
}
.Onecad_memberWrapper .Onecad_memberCard_member-header {
	position:relative;
	padding-top:12px;
	font-weight:700;
	white-space:nowrap;
	text-align:center;
	margin-bottom:16px;
	width: 300px;
	box-sizing:border-box;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
	font-size:16px;
	line-height:22px;
	color:#663f32;
	letter-spacing:0;
	font-weight:600;
	margin-bottom:4px;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc {
	font-size:12px;
	color:#663f32;
	letter-spacing:0;
	line-height:17px;
	font-weight:400;
}
.Onecad_memberWrapper.Onecad_memberCard_none .Onecad_memberCard_member-header .Onecad_memberCard_member-title {
	height:25px;
	width:180px;
	margin-left:auto;
	margin-right:auto;
}
.Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header,.Onecad_memberWrapper.memberCard__will-expired___3128d .Onecad_memberCard_member-header {
	background:hsla(0,0%,100%,.8);
	padding:16px 0;
	border-radius:8px;
}
.Onecad_memberWrapper.memberCard__expired___9de29 {
	background:#dadde0;
}
.Onecad_memberWrapper.memberCard__expired___9de29 .Onecad_memberCard_member-header,  .Onecad_memberWrapper .Onecad_memberCard_member-benefits {
	position:relative;
	width: 100%;
	box-sizing:border-box;
	/* padding:12px 16px; */
	background:hsla(0,0%,100%,.8);
	border-radius:8px;
	margin-bottom:16px;
	white-space:nowrap;
	overflow:hidden;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits li {
	/* display:inline-block; */
	float: left;
	width: 25%;
	margin: 10px 0;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 {
	position:absolute;
	top:50%;
	width:12px;
	height:28px;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	background-color:rgba(230,163,115,.2);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all .25s;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 .memberCard__icon-font___9846a,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 .memberCard__icon-font___9846a {
	color:#4d3626;
	font-size:12px;
	-webkit-transform:scale(.5);
	transform:scale(.5);
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917:hover,.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46:hover {
	background-color:rgba(230,163,115,.16);
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__leftBtn___ec917 {
	left:0;
	border-radius:0 4px 4px 0;
}
.Onecad_memberWrapper .Onecad_memberCard_member-benefits .memberCard__rightBtn___0cc46 {
	right:0;
	border-radius:4px 0 0 4px;
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1 {
	position:relative;
	width:152px;
	height:32px;
	background-image:linear-gradient(134deg,#4d5580,#3d4466);
	font-size:14px;
	color:#fff3eb;
	font-weight:600;
	display:flex;
	align-items:center;
	border-radius: 5px;
	justify-content:center;
	cursor:pointer;
}
.Onecad_memberWrapper>button{
    border: 0!important;
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1:hover {
	background-image:linear-gradient(134deg,rgba(77,85,128,.9),rgba

(61,68,102,.9));
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1:active {
	background-image:linear-gradient(134deg,rgba(77,85,128,.8),rgba

(61,68,102,.8));
}
.Onecad_memberWrapper .memberCard__joinBtn___a50c1 .memberCard__tips___3220a {
    top: -10px;
    right: -15px;
    position: absolute;
    background-image: linear-gradient(90deg,#ff9580,#f36);
    border-radius: 6px;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
    font-weight: 100;
    padding: 2px 8px;
    font-size: 12px;
}
.Onecad_memberCard_benefitsLiWrapper {
	position:relative;
	left:0;
	transition:left .3s linear;
}
.Onecad_memberWrapper .Onecad_memberCard_member-header .Onecad_memberCard_member-desc {
	font-size:12px;
	color:#663f32;
	letter-spacing:0;
	line-height:17px;
	font-weight:400;
}

.Onecad_header_vip_topi {
	padding:2px 6px 0 6px;
	right: 0px;
	line-height:24px;
	color:#fff;
	text-align:center;
	position: absolute;
	top: 1px;
	box-sizing:border-box;
	border-radius:16px;
	font-size:19px;
	white-space:nowrap;
	-webkit-transform:scale(.5);
}
.Onecad_header_vip {
	padding: 0px 20px;
    position: relative;
    width: 25px;
    height: 25px;
    margin-right: 20px;
	background:url(/pic/vipiconhover.svg) no-repeat 

50%/25px;
}
.Onecad_header_vip>i {
    position: absolute;
    top: -15px;
}
.Onecad_header_vip:hover .Onecad_member_tip[data-status=true] {
	display:block;
}
.Onecad_member_tip {
position: absolute;
    padding-top: 70px;
    margin-top: -23px;
    right: -14px;
    display: none;
    z-index: 8000;
}
.Onecad_header_vip  i {
    font-style: normal;
    font-weight: 400;
}
/*导航头部结束*/

文件下载

此处内容已隐藏，请评论后刷新页面查看.
温馨提示：若内容/图片/下载链接失效，请在下方留言或登录后私信站长。

本文结束END
© 版权声明
本网站名称：AA源码网
默认解压密码：aaym.net
①本站所有资源免费，收取的费用仅为抵扣人工测试和服务器日常维护带来的消耗成本，请须知。
②因源码、模板、插件等程序具有可复制性，一经出售概不退款。
③本站部分资源来源网络或者用户投稿，如有侵权请联系删除（aaym@foxmail.com）
④本站资源仅用于个人学习和交流，如用于商业使用请选择正版程序。使用非正版程序须在24小时内卸载删除。
➣详细的版权声明请点击文章版权声明查看。
**下载/阅读均默认代表您已详细阅读版权声明并同意承担可能造成的所有损失及后果！

THE END
网站源码
# 教程# 主题# css# 7B2主题美化# 菜单栏美化
喜欢就支持一下吧
点赞45赞赏 分享
阿夜的头像-AA源码网 | 源码收藏SVIP
相关推荐
评论 共1条

请登录后发表评论

    只看作者
用户封面
阿夜的头像-AA源码网 | 源码收藏SVIP
文章目录
热门文章
04月21日，星期一, 每天60秒读懂全世界！-AA源码网 | 源码收藏
0条讨论
04月21日，星期一, 每天60秒读懂全世界！
TOP1
04月22日，星期二, 每天60秒读懂全世界！-AA源码网 | 源码收藏
04月22日，星期二, 每天60秒读懂全世界！
37天前0条讨论
TOP2
04月23日，星期三, 每天60秒读懂全世界！-AA源码网 | 源码收藏
04月23日，星期三, 每天60秒读懂全世界！
36天前0条讨论
TOP3
04月24日，星期四, 每天60秒读懂全世界！-AA源码网 | 源码收藏
04月24日，星期四, 每天60秒读懂全世界！
35天前0条讨论
TOP4
04月25日，星期五, 每天60秒读懂全世界！-AA源码网 | 源码收藏
04月25日，星期五, 每天60秒读懂全世界！
34天前0条讨论
TOP5
04月26日，星期六, 每天60秒读懂全世界！-AA源码网 | 源码收藏
04月26日，星期六, 每天60秒读懂全世界！
33天前0条讨论
TOP6
标签云
龙年主题龙年鼠标点击爱心特效鼠标点击出现文字特效鼠标样式插件鼠标样式鼠标右键菜单自定义默认黑网黄钻低价开通地址鸿蒙软件魔方财务模板下载魔方财务免费模板魔方财务主题魔众短链接系统魏锦宸鬼谷八荒高颜值高质量高级玩法高级安全认证
最新评论
cyvip2的头像-AA源码网 | 源码收藏

cyvip2昨天0

水帖美如花，养护靠大家！
cyvip2的头像-AA源码网 | 源码收藏

cyvip2前天0

路过一下，我只是来打酱油的！
a445149490的头像-AA源码网 | 源码收藏

a4451494903天前0

水帖美如花，养护靠大家！
qwe12312312的头像-AA源码网 | 源码收藏

qwe123123124天前0

这个站很不错，值得推荐！
小影月的头像-AA源码网 | 源码收藏

小影月徽章-忠诚玩家-AA源码网 | 源码收藏5天前0

总是会在人生的不同阶段反复爱上大佬的文章~
isky007的头像-AA源码网 | 源码收藏

isky0076天前0

水帖美如花，养护靠大家！
isky007的头像-AA源码网 | 源码收藏

isky0076天前0

从头到脚都是完美的
啊嘞嘞嘞的头像-AA源码网 | 源码收藏

啊嘞嘞嘞7天前0

识别码识别码

当前时间：