将下放代码放入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) 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) 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) 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) 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) 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

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