1.手机区块菜单
将下放代码放入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)
图标文件:下载
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)
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)
图标文件下载
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代码:
还没有评论,来说两句吧...