图片广告
码支付
广告
广告
广告
广告
广告

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

31767

教程简介：

1、替换Header.php文件,路径为主题下b2/Modules/Templates
2、将css复制到主题下(后台-->主题-->自定义-->额外css中)
3、图片替换到根目录下即可/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;
}
/*导航头部结束*/

相关图片：

图片[1]筑梦博客-专注于技术分享7b2主题美化 菜单栏美化以及添加VIP图标筑梦博客-专注于技术分享筑梦博客

源码下载：

  此处内容已隐藏，请评论后刷新页面查看.
© 版权声明
版权声明 1 本网站名称：筑梦博客
2 本站永久网址：https://blog.xwawl.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ1402771410进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
7 本站发布资源仅限用于学习和研究交流目的，不得用于商业或者非法用途。
8 您必须在下载后24个小时之内，从您的设备中彻底删除上述内容。
9如果您喜欢该程序，请支持正版软件。
10对违反上述要求引起的一切后果由用户自负。
11 本站提供的源码、模板、插件等等资源，均不包含技术服务。
THE END
网站教程
# 美化# 7B2# 图标# VIP# 菜单栏
喜欢就支持一下吧
点赞7打赏一下 分享
筑梦的头像筑梦博客-专注于技术分享筑梦博客钻石会员
完整的chatgpt商业版源码筑梦博客-专注于技术分享筑梦博客
完整的chatgpt商业版源码
完整的chatgpt商业版源码
1年前 5044
BewlyBewly开源插件下载 B站网页端美化插件筑梦博客-专注于技术分享筑梦博客
BewlyBewly开源插件下载 B站网页端美化插件
BewlyBewly开源插件下载 B站网页端美化插件
6个月前 2099
电脑版_印章大师本地版5.0下载安装-免费使用筑梦博客-专注于技术分享筑梦博客
电脑版_印章大师本地版5.0下载安装-免费使用
电脑版_印章大师本地版5.0下载安装-免费使用
1年前 1462
2023最新Zibll子比主题V7.1版本源码 开心版筑梦博客-专注于技术分享筑梦博客
2023最新Zibll子比主题V7.1版本源码 开心版
2023最新Zibll子比主题V7.1版本源码 开心版
1年前 1409
Unlock Music音乐解锁：移除扣扣/酷狗音乐加密保护筑梦博客-专注于技术分享筑梦博客
Unlock Music音乐解锁：移除扣扣/酷狗音乐加密保护
Unlock Music音乐解锁：移除扣扣/酷狗音乐加密保护
6个月前 1358
黑神话悟空离线完整版+修改器，黑神话悟空破解版免安装学习版筑梦博客-专注于技术分享筑梦博客
黑神话悟空离线完整版+修改器，黑神话悟空破解版免安装学习版
黑神话悟空离线完整版+修改器，黑神话悟空破解版免安装学习版
27天前 1342
相关推荐
BewlyBewly开源插件下载 B站网页端美化插件筑梦博客-专注于技术分享筑梦博客
BewlyBewly开源插件下载 B站网页端美化插件
BewlyBewly开源插件下载 B站网页端美化插件
6个月前 2099
子比主题(zibll)为用户头像添加漂亮炫酷的头像框教程筑梦博客-专注于技术分享筑梦博客
子比主题(zibll)为用户头像添加漂亮炫酷的头像框教程
子比主题(zibll)为用户头像添加漂亮炫酷的头像框教程
6个月前 282
WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标筑梦博客-专注于技术分享筑梦博客
WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标
WordPress子比主题 文章列表右上角添加置顶+新文章发布ICON图标
6个月前 225
子比主题美化 – 一个好看的网站赞助页面的修改教程筑梦博客-专注于技术分享筑梦博客
子比主题美化 – 一个好看的网站赞助页面的修改教程
子比主题美化 – 一个好看的网站赞助页面的修改教程
3个月前 195
宝塔Linux面板9.1.0开心版 升级企业版命令筑梦博客-专注于技术分享筑梦博客
宝塔Linux面板9.1.0开心版 升级企业版命令
宝塔Linux面板9.1.0开心版 升级企业版命令
35天前 194
WordPress美化弹窗插件：Better Popup 让美化更简单筑梦博客-专注于技术分享筑梦博客
WordPress美化弹窗插件：Better Popup 让美化更简单
WordPress美化弹窗插件：Better Popup 让美化更简单
6个月前 192
评论 共3条

请登录后发表评论