7b2手机区块菜单,仅手机
将下放代码放入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;
}
}
图标下载在下方
声明:本站部分文章来源于网络,如有危害到您的合法权益请联系客服