子比主题美化 – 二次元六小格多功能导航

效果演示

子比主题美化 – 二次元六小格多功能导航-狐狸库

具体操作

以下代码放入后台模块 >> 小工具 >> 自定义HTML

<div id="html-box-pckjl1" class="html-box"> <div class="banxin Mrxu-block">
        <div class="Mrxu-circulation">
            <ul>
                <li class="color1">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="#">
                            <p class="Mrxu-name">动漫</p>
                            <p class="Mrxu-hint">提供最新动漫</p>
                            <i class="icon1"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="#">热血</a>
                            <a href="#">卡通</a>
                            <a href="#">新番</a>
                            <a href="#">百合</a>
                            <a href="#">搞笑</a>
                            <a href="#">国产</a>
                        </div>
                    </div>
                </li>
                <li class="color2">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="#">
                            <p class="Mrxu-name">漫画</p>
                            <p class="Mrxu-hint">一笔一纸一世界</p>
                            <i class="icon2"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="#">恋爱</a>
                            <a href="#">玄幻</a>
                            <a href="#">恐怖</a>
                            <a href="#">剧情</a>
                            <a href="#">科幻</a>
                            <a href="#">悬疑</a>
                        </div>
                    </div>
                </li>
                <li class="color3">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="#">
                            <p class="Mrxu-name">游戏</p>
                            <p class="Mrxu-hint">一鼠一键一片天</p>
                            <i class="icon3"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="#">单机</a>
                            <a href="#">手机</a>
                            <a href="#">网络</a>
                            <a href="#">MMO</a>
                            <a href="#">桌游棋牌</a>
                            <a href="#">GMV</a>
                        </div>
                    </div>
                </li>
                <li class="color4">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="#">
                            <p class="Mrxu-name">番剧</p>
                            <p class="Mrxu-hint">最新番剧更新</p>
                            <i class="icon4"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="#">连载</a>
                            <a href="#">完结</a>
                            <a href="#">时间表</a>
                            <a href="#">索引</a>
                            <a href="#">里番</a>
                            <a href="#">同人</a>
                        </div>
                    </div>
                </li>
                <li class="color5">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="#">
                            <p class="Mrxu-name">COS</p>
                            <p class="Mrxu-hint">漂亮小姐姐</p>
                            <i class="icon5"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="#">动漫</a>
                            <a href="#">游戏</a>
                            <a href="#">明星</a>
                            <a href="#">影视剧人</a>
                            <a href="#">小说</a>
                            <a href="#">同人</a>
                        </div>
                    </div>
                </li>
                <li class="color6">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="#">
                            <p class="Mrxu-name">福利</p>
                            <p class="Mrxu-hint">性感大姐姐</p>
                            <i class="icon6"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="#">桜井宁宁</a>
                            <a href="#">五更百鬼</a>
                            <a href="#">弥音音</a>
                            <a href="#">小鸟酱</a>
                            <a href="#">抖娘-利世</a>
                            <a href="#">七月喵子</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <ul class="Mrxu-classify">
            <li>
                <a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tupian"></use></svg>照片</a>
            </li>
            <li>
                <a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-yingshi"></use></svg>录像</a>
            </li>
            <li>
				<a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianpu"></use></svg>商品</a> 
            </li>
            <li>
                <a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-paizhao"></use></svg>拍照</a>
            </li>
            <li>
                <a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-huodong"></use></svg>活动</a>
            </li>
            <li>
                <a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-liwu"></use></svg>礼物</a>
            </li>
            <li>
                <a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-youhuiquan"></use></svg>优惠券</a>
            </li>
            <li>
                <a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-kabao"></use></svg>钱包</a>
            </li>
            <li>
                
				<a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-kehu"></use></svg>客服</a>
            </li>
            <li>
                <a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-rili"></use></svg>签到</a>
            </li>
        </ul>
     </div>
	 </div></div></div></div>

CSS代码

zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式

引入阿里矢量图标

<script type="text/javascript" src="//at.alicdn.com/t/font_2696731_fbdj49dums.js"></script>

第二种:只显示上方区块

子比主题美化 – 二次元六小格多功能导航-狐狸库

Html代码

<div class="banxin Mrxu-block">
        <div class="Mrxu-circulation">
            <ul>
                <li class="color1">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="#">
                            <p class="Mrxu-name">首页</p>
                            <p class="Mrxu-hint">我的网站首页</p>
                            <i class="icon1"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                        </div>
                    </div>
                </li>
                <li class="color2">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="https://huliku.com/circle">
                            <p class="Mrxu-name">论坛</p>
                            <p class="Mrxu-hint">狐狸库网论坛</p>
                            <i class="icon2"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="https://huliku.com/circle/square">圈子论坛</a>
                            <a href="https://huliku.com/circle/yunhe">运河人家</a>
                            <a href="https://huliku.com/circle/info">信息发布</a>
                            <a href="https://huliku.com/circle/itquan">IT知识</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                        </div>
                    </div>
                </li>
                <li class="color3">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="https://huliku.com/circle">
                            <p class="Mrxu-name">快讯</p>
                            <p class="Mrxu-hint">狐狸库网快讯</p>
                            <i class="icon3"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="https://huliku.com/newsflashes/web">互联网</a>
                            <a href="https://huliku.com/newsflashes/life">生活帮</a>
                            <a href="https://huliku.com/newsflashes/news">新闻控</a>
                            <a href="#">狐狸库</a>
                            <a href="https://huliku.com/newsflashes/jining">狐狸库</a>
                            <a href="#">GMV</a>
                        </div>
                    </div>
                </li>
                <li class="color4">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="https://huliku.com/shop">
                            <p class="Mrxu-name">商铺</p>
                            <p class="Mrxu-hint">狐狸库网商铺</p>
                            <i class="icon4"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                        </div>
                    </div>
                </li>
                <li class="color5">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="https://huliku.com/topics">
                            <p class="Mrxu-name">文档</p>
                            <p class="Mrxu-hint">狐狸库网文档</p>
                            <i class="icon5"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                        </div>
                    </div>
                </li>
                <li class="color6">
                    <div class="Mrxu-content">
                        <a class="Mrxu-top" href="https://huliku.com/liuyan">
                            <p class="Mrxu-name">留言</p>
                            <p class="Mrxu-hint">欢迎大家留言</p>
                            <i class="icon6"></i>
                        </a>
                        <div class="Mrxu-link">
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                            <a href="#">狐狸库</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
     </div>

Css代码

温馨提示: 本文最后更新于2024/01/03 21:16:37若文章内容或图片失效,请留言联系站长反馈!
!
也想出现在这里? 联系我们
创意广告
子比主题美化 - 二次元六小格多功能导航-狐狸库
子比主题美化 – 二次元六小格多功能导航
此内容为付费资源,请付费后查看
300积分
网络收集
虚拟资源
自动发货
永久使用
本站资源均为作者提供和网友推荐收集整理而来,仅供学习和研究使用,请在下载后24小时内删除,谢谢合作!
付费资源
© 版权声明
THE END
点赞0赞赏 分享
评论 共7条

请登录后发表评论

    请登录后查看评论内容