B2 pro主题手机端三行五列导航 美化代码

Wordpress 2年前 (2022) acg
195 次浏览 0

以下是首页模块自定义代码~

<div class="mrxu_link edu_link">
<dl>
<dd class="xu_link_1"><a href="/kcfl/tgzq"><i></i><p>推广专区</p></a></dd>
<dd class="xu_link_2"><a href="/kcfl/mfxm"><i></i><p>免费项目</p></a></dd>
<dd class="xu_link_3"><a href="/kcfl/rjxy"><i></i><p>软件协议</p></a></dd>
<dd class="xu_link_4"><a href="/kcfl/zmt"><i></i><p>自媒体</p></a></dd>
<dd class="xu_link_5"><a href="/kcfl/bfyl"><i></i><p>爆粉引流</p></a></dd>
<dd class="xu_link_6"><a href="/kcfl/dyks"><i></i><p>抖音快手</p></a></dd>
<dd class="xu_link_7"><a href="/kcfl/wsbx"><i></i><p>微商必学</p></a></dd>
<dd class="xu_link_8"><a href="/kcfl/tbds"><i></i><p>淘宝电商</p> </a></dd>
<dd class="xu_link_9"><a href="/kcfl/sqyx"><i></i><p>社群营销</p></a></dd>
<dd class="xu_link_10"><a href="/kcfl/seo"><i></i><p>SEO</p></a></dd>
<dd class="du_link_1"><a href="/kcfl/tbyl"><i></i><p>贴吧引流</p></a></dd>
<dd class="du_link_2"><a href="/kcfl/pskc"><i></i><p>Ps课程</p></a></dd>
<dd class="du_link_3"><a href="/kcfl/gzh"><i></i><p>公众号</p></a></dd>
<dd class="du_link_4"><a href="/kcfl/wzxm"><i></i><p>网赚项目</p></a></dd>
<dd class="du_link_5"><a href="/kcfl/waxz"><i></i><p>文案写作</p></a></dd>
</dl>
</div>

以下是图标素材:建议大家自己去找图标替换下就可以了~

B2 pro主题手机端三行五列导航 美化代码

CSS代码:

<style>
.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(替换成自己的图片路径/pic/icon/00001.png) center no-repeat;
background-size: 45px;
}
.mrxu_link dl dd.xu_link_2 i {
background: url(替换成自己的图片路径/pic/icon/00002.PNG) center no-repeat;
background-size: 45px;
}
.mrxu_link dl dd.xu_link_3 i {
background: url(替换成自己的图片路径/pic/icon/00003.png) center no-repeat;
background-size: 45px;
}
.mrxu_link dl dd.xu_link_4 i {
background: url(替换成自己的图片路径/pic/icon/00004.png) center no-repeat;
background-size: 45px;
}
.mrxu_link dl dd.xu_link_5 i {
background: url(替换成自己的图片路径/pic/icon/00006.png) center no-repeat;
background-size: 45px;
}
.mrxu_link dl dd.xu_link_6 i {
background: url(替换成自己的图片路径/pic/icon/00014.png) center no-repeat;
background-size: 45px;
}
.mrxu_link dl dd.xu_link_7 i {
background: url(替换成自己的图片路径/pic/icon/00007.png) center no-repeat;
background-size: 45px;
}
.mrxu_link dl dd.xu_link_8 i {
background: url(替换成自己的图片路径/pic/icon/00012.png) center no-repeat;
background-size: 45px;
}
.mrxu_link dl dd.xu_link_9 i {
background: url(替换成自己的图片路径/pic/icon/00009.png) center no-repeat;
background-size: 45px;
}
.mrxu_link dl dd.xu_link_10 i {
background: url(替换成自己的图片路径/pic/icon/00010.png) 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;
}
</style>

版权声明:acg 发表于 2022-04-13 13:36:55。
转载请注明:B2 pro主题手机端三行五列导航 美化代码 | ACGPK精选导航网

暂无评论

暂无评论...