繁体
注册登录

WordPress网站B2主题首页分类菜单样式美化

Jaysun

1.手机区块菜单

1.webp.jpg

将下放代码放入b2主题设置->模块管理->首页->首页内容模块布局->调用内容->自定义；

其他主题自行自定义。

Html代码：

五个

<div class="mrxu_link newmrxu_link">
<dl>
<dd class="xu_link_1"><a href="#"><i></i><p>图片</p></a></dd>
<dd class="xu_link_2"><a href="#"><i></i><p>影视</p></a></dd>
<dd class="xu_link_3"><a href="#"><i></i><p>音乐</p></a></dd>
<dd class="xu_link_4"><a href="#"><i></i><p>贴吧</p></a></dd>
<dd class="xu_link_5"><a href="#"><i></i><p>视频</p></a></dd>                                                 
</dl>
</div>

十个

<div class="mrxu_link newmrxu_link">
<dl>
<dd class="xu_link_1"><a href="#"><i></i><p>图片</p></a></dd>
<dd class="xu_link_2"><a href="#"><i></i><p>影视</p></a></dd>
<dd class="xu_link_3"><a href="#"><i></i><p>音乐</p></a></dd>
<dd class="xu_link_4"><a href="#"><i></i><p>贴吧</p></a></dd>
<dd class="xu_link_5"><a href="#"><i></i><p>视频</p></a></dd>
</dl>

<dl>
<dd class="xu_link_1"><a href="#"><i></i><p>图片</p></a></dd>
<dd class="xu_link_2"><a href="#"><i></i><p>影视</p></a></dd>
<dd class="xu_link_3"><a href="#"><i></i><p>音乐</p></a></dd>
<dd class="xu_link_4"><a href="#"><i></i><p>贴吧</p></a></dd>
<dd class="xu_link_5"><a href="#"><i></i><p>视频</p></a></dd>
</dl>
</div>

CSS代码：

@media screen and (max-width:768px) {
	.newmrxu_link {
	margin:0 auto;
	background:#fff;
	border-radius:12px;
}
.mrxu_link {
	padding:5px;
}
.mrxu_link dl dd {
	display:inline-block;
	width:18%;
	margin-bottom:10px;
	margin-top:10px;
}
.mrxu_link dl dd a {
	display:block;
}
.mrxu_link dl dd.xu_link_1 i {
	background:url(//mrxu.net/wp-content/themes/b2child/img/icon/icon1.png.webp) center no-repeat;
	background-size:30px;
}
.mrxu_link dl dd a i {
	display:block;
	width:30px;
	height:30px;
	margin:0 auto 5px;
}
.mrxu_link dl dd a p {
	height:20px;
	line-height:20px;
	font-size:12px;
	color:#666;
	text-align:center;
	overflow:hidden;
}
dl {
	display:flex;
	justify-content:center;
}
.mrxu_link dl dd.xu_link_2 i {
	background:url(//mrxu.net/wp-content/themes/b2child/img/icon/icon2.png.webp) center no-repeat;
	background-size:30px;
}
.mrxu_link dl dd.xu_link_3 i {
	background:url(//mrxu.net/wp-content/themes/b2child/img/icon/icon3.png.webp) center no-repeat;
	background-size:30px;
}
.mrxu_link dl dd.xu_link_4 i {
	background:url(//mrxu.net/wp-content/themes/b2child/img/icon/icon4.png.webp) center no-repeat;
	background-size:30px;
}
.mrxu_link dl dd.xu_link_5 i {
	background:url(//mrxu.net/wp-content/themes/b2child/img/icon/icon5.png.webp) center no-repeat;
	background-size:30px;
}
}

图标：


1、https://mrxu.net/wp-content/themes/b2child/img/icon/icon1.png

2、https://mrxu.net/wp-content/themes/b2child/img/icon/icon2.png

3、https://mrxu.net/wp-content/themes/b2child/img/icon/icon3.png

4、https://mrxu.net/wp-content/themes/b2child/img/icon/icon4.png

5、https://mrxu.net/wp-content/themes/b2child/img/icon/icon5.png

图片自行保存到本地！！！


样式（2）

1.webp (1).jpg

图标文件：下载

Html代码：

<div class="mrxu_link">
  <dl>
    <dd class="xu_link_1"><a href="#"><i></i>
        <p>海报</p>
      </a></dd>
    <dd class="xu_link_2"><a href="#"><i></i>
        <p>插画</p>
      </a></dd>
    <dd class="xu_link_3"><a href="#"><i></i>
        <p>电商</p>
      </a></dd>
    <dd class="xu_link_4"><a href="#"><i></i>
        <p>品牌</p>
      </a></dd>
    <dd class="xu_link_5"><a href="#"><i></i>
        <p>logo</p>
      </a></dd>
    <dd class="xu_link_6"><a href="#"><i></i>
        <p>包装</p>
      </a></dd>
    <dd class="xu_link_7"><a href="#"><i></i>
        <p>视频</p>
      </a></dd>
    <dd class="xu_link_8"><a href="#"><i></i>
        <p>画册</p>
      </a></dd>
    <dd class="xu_link_9"><a href="#"><i></i>
        <p>ip</p>
      </a></dd>
    <dd class="xu_link_10"><a href="#"><i></i>
        <p>全部</p>
      </a></dd>
  </dl>
</div>

Css代码：

  .mrxu_link {
	   border-radius: 17px;
	   box-shadow: 1px 0px 7px #94cbfb66;
    	padding: 5px;
    }
    .mrxu_lin1k dl {
    	box-shadow: 1px 1px 1px #e7f4ff;
    	border-radius: 12px;
    	background-color: #fff;
    	margin-top: 10px;
    	margin-bottom: 10px;
		 border-radius: 17px;
    }
    .mrxu_link dl dd {
    	display: inline-block;
    	width: 18.5%;
    	margin-bottom: 6px;
    	margin-top: 6px;
    }
    .mrxu_link dl dd a {
    	display: block;
    }
    .mrxu_link dl dd a i {
    	display: block;
    	width: 45px;
    	height: 45px;
    	margin: 0 auto 5px;
    }
    .mrxu_link dl dd a p {
    	height: 20px;
    	line-height: 20px;
    	font-size: 12px;
    	color: #666;
    	text-align: center;
    	overflow: hidden;
    }
    .mrxu_link dl dd.xu_link_1 i {
    	background: url(image/10019.png.webp) center no-repeat;
    	background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_2 i {
    	background: url(image/100255.png.webp) center no-repeat;
    	background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_3 i {
    	background: url(image/10028.png.webp) center no-repeat;
    	background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_4 i {
    	background: url(image/10018.png.webp) center no-repeat;
    	background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_5 i {
    	background: url(image/10022.png.webp) center no-repeat;
    	background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_6 i {
    	background: url(image/10021.png.webp) center no-repeat;
    	background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_7 i {
    	background: url(image/10025.png.webp) center no-repeat;
    	background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_8 i {
    	background: url(image/zx.png.webp) center no-repeat;
    	background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_9 i {
    	background: url(image/10018.png.webp) center no-repeat;
    	background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_10 i {
    	background: url(image/10020.png.webp) center no-repeat;
    	background-size: 45px;
    }
.justify a img{
        float: left;
}
.load-more.box-in.box.b2-radius.mg-t {
    background: none;
}
.post-list .load-more .post-load-button {
    width: auto;
    border: 0;
    transition: all .3s;
    padding: 12px 40px;
    font-size: 15px;
    letter-spacing: .5px;
    background-color: var(--primary-color);
    background-image: -webkit-gradient(linear, left top, right top, from(#006eff), to(#13adff));
    background-image: -webkit-linear-gradient(left, #006eff, #13adff);
    background-image: -o-linear-gradient(left, #006eff 0, #13adff 100%);
    background-image: linear-gradient(90deg, #006eff, #13adff);
    -webkit-box-shadow: 0 5px 10px 0 rgba(16, 110, 253, .3);
    box-shadow: 0 5px 10px 0 rgba(16, 110, 253, .3);
    color: #fff!important;
}

.mrxu_link a {
    color: inherit;
    text-decoration: none;
    vertical-align: top;
}

样式（3）

1.webp (2).jpg

1.webp (3).jpg

Html代码：

<div id="html-box-shuangtu" class="html-box">
  <div class="mrxu_num">
  </div>
  <div class="mrxu_num1"><a href="#"><img src="https://img.ahap.cn/files/2022/02/20220225111054327.png.webp">
    </a></div>
  <div class="mrxu_num2"><a href="#"><img src="https://img.ahap.cn/files/2022/02/20220225111054741.png.webp">
    </a></div>
</div>

Css代码：

.mrxu_num1 {
    box-shadow: 1px 1px 3px #c8def1;
    width: 49%;
    height: 80px;
    float: left;
    overflow: hidden;

    border-radius: 12px;
    margin-right: 7px;
}
.thumb, a, a:active, a:visited {
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.html-box img {
    display: flex;
    width: 100%;
}
html :where(img) {
    height: 80px;
}
.mrxu_num2 {
    box-shadow: 1px 1px 3px #c8def1;
    width: 49%;
    height: 80px;
    float: revert;

    overflow: hidden;
    border-radius: 12px;
}

样式（3）

1.webp (4).jpg

图标文件下载

Html代码：

<div class="fast-pass-part">
  <div class="part-container">
    <div class="one-shortcut">
      <img src="image/shortcut-1.d8725ea9.png.webp" alt="">
      <div>
        <p class="name">行业指南</p>
        <div class="recommend-keys">
          <div class="recommend-key">民宿、餐饮、员工宿舍
            <img
              src="data:image/png;base64,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"
              class="new-icon2">
          </div>
        </div>
      </div>
    </div>
    <div class="one-shortcut">
      <img src="image/shortcut-2.23896414.png.webp" alt="">
      <div>
        <p class="name">数据库</p>
        <div class="recommend-keys">
          <div class="recommend-key">餐饮、民宿、经营数据
            <img
              src="data:image/png;base64,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"
              class="new-icon2">
          </div>
        </div>
      </div>
    </div>
    <div class="one-shortcut">
      <img src="image/shortcut-3.bd8c5bae.png.webp" alt="">
      <div>
        <p class="name">创业资料</p>
        <div class="recommend-keys">
          <div class="recommend-key">甜品店、服装店、便利店
          </div>
        </div>
      </div>
    </div>
    <div class="one-shortcut">
      <img src="image/shortcut-4.e63b781a.png.webp" alt="">
      <div>
        <p class="name">品牌监测</p>
        <div class="recommend-keys">
          <div class="recommend-key">子分类名称
          </div>
        </div>
      </div>
    </div>
    <div class="one-shortcut">
      <img src="image/shortcut-5.bd8281ad.png.webp" alt="">
      <div>
        <p class="name">行业交流</p>
        <div class="recommend-keys">
          <div class="recommend-key">分享、提问、学习
          </div>
        </div>
      </div>
    </div>
    <div class="one-shortcut">
      <img src="image/shortcut-8.2cca9834.png.webp" alt="">
      <div>
        <p class="name">行业研报</p>
        <div class="recommend-keys">
          <div class="recommend-key">最新研究报告
          </div>
        </div>
      </div>
    </div>
    <div class="one-shortcut">
      <img src="image/shortcut-9.50947a90.png.webp" alt="">
      <div>
        <p class="name">商业观察</p>
        <div class="recommend-keys">
          <div class="recommend-key">最新资讯
          </div>
        </div>
      </div>
    </div>
    <div class="one-shortcut">
      <img src="image/shortcut-10.a53d5475.png.webp" alt="">
      <div>
        <p class="name">深度分析服务</p>
        <div class="recommend-keys">
          <div class="recommend-key">市场分析、品牌定位
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="part-mask"></div>
</div>

Css代码：

VIP专属内容
本站VIP 免费查看
开通会员
开通本站VIP可查看该内容
该内容VIP会员可见，您未登录，请先登录

相关阅读

  • 子比主题美化 给会员设置对应的分类和页面的访问权限
  • 子比主题美化 为免费/付费资源更换背景底色
  • 子比主题美化 站内自定义消息邮件通知插件
  • 子比主题美化 文章付费文字转图标样式
  • 网站侧边栏填加个联系信息 主页地址
  • 子比主题美化 给网站增加一个兽语加密功能
  • 子比主题美化 给评论增加正则拦截验证代码
  • 子比主题美化 两种样式的ajax加载更多按钮美化
    • 您需要 登录账户 后才能发表评论

    发表评论

    快捷回复： 表情：
    AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
    评论列表 （暂无评论，765人围观）

    还没有评论，来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码