🎅挂件馆🌟铭牌馆✨️靓标库🧚‍♂️名人堂🦄宝可梦🍎水果机🥊猜拳🏧黑市🏧银行💹抽奖
   🎁
👮曝光台📜淘帖🧩导读👛帮助💰️钱包💖关注切换到宽版
  • 首页Portal
  • 社区BBS
  • 圈子
  • 资源
  • 商城
  • 任务
  • 家园Space
  • 排行Ranklist
    • 拍卖
    热搜 周润发 梨花 黑金 子比主题 死亡笔记 克米主题 GitHub 美化教程
    立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题 – 首页添加一个多功能导航模块小工具 ...
    返回列表 发布新帖
    查看: 207|回复: 0

    [代码技巧] 子比主题 – 首页添加一个多功能导航模块小工具

    [复制链接]
    飞流
    连续签到LV.1
    起源之星
    任务·年会员
    累计签到LV.3
    +2
    00001 FLLTCN
    社区贡献
    344 214 23798
    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 196 颗
       贡献 : 13641 点
       金币 : 4 枚
    Icon在线时间 : 1924 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2026-7-22

    荣誉勋章

    连续签到LV.1起源之星任务·年会员累计签到LV.3

    送礼物：3 个 收礼物：1 个
    00001 FLLTCN 实名认证 特邀大神 诚信商家 信誉担保 精华作者+ 官方团队 vip vip-year 发表于 2025-10-10 16:08:45 | 查看全部 |阅读模式 浙江金华

    交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×
    给子比主题首页添加一个多功能的导航小工具，我感觉这个小工具还是不错的，放到首页，确实给自己子比主题美化了很多样式，喜欢的就下载配置一下吧

    tengfei_down - 2025-10-10T160523.055.webp

    部署教程


    首先我们要知道他这个多导航小工具一共分四个文件：”两个CSS文件”，”一个JS文件”，”一个HTML文件”
    我把文件全部放在了底部，然后我们把里面的CSS和JS目录改成你的即可，如下代码是HTML代码，如果不想本地可以用我的，如果是用我的那就直接将HTML代码放到：小工具-自定义HTML-放到你想放的地方
    里面的路径是我自己的，如果想本地，下载底部附件，放到你的服务器替换即可，如果不想放本地，可直接使用下面的HTML放到小工具
    1. <!--首页四个导航模块样式文件-->
    2. <meta charset="UTF-8">
    3. <link rel="stylesheet" href="https://tfbk.jzpix.cn/css/dhmk.css">
    4. <link rel="stylesheet" href="https://tfbk.jzpix.cn/css/iconfontdhmk.css">
    5. <script type="text/javascript" src="https://tfbk.jzpix.cn/js/iconfontdhmk.js"></script>
    6. <!--首页四个导航模块-->
    7. <div class="ads-box">
    8. <div class="home-first">
    9. <div class="container hide_sm">
    10. <div class="row ron">
    11.    <!--导航模块 1-->
    12.   <div class="col-1-4">
    13.    <div class="hf-widget hf-widget-1 hf-widget-software">
    14.   <h3 class="hf-widget-title">
    15.   <svg class="ydicon" aria-hidden="true">
    16.   <use xlink:href="#icon-huiyuan"></use>
    17.   </svg>
    18.   <a href="/user/" target="_blank" rel="noopener">会员中心</a><span>专属贴心服务</span>
    19.   </h3>
    20.   <div class="hf-widget-content">
    21.    <div class="scroll-h">
    22.   <ul>
    23.    <li><a href="/user/" target="_blank" rel="noopener">
    24.    <svg class="kuai" aria-hidden="true">
    25.   <use xlink:href="#icon-dingyue"></use>
    26.    </svg><span>升级会员</span></a></li>
    27.    <li><a href="/message/news" target="_blank" rel="noopener">
    28.    <svg class="kuai" aria-hidden="true">
    29.   <use xlink:href="#icon-xiaoxi"></use>
    30.    </svg><span>消息订单</span></a></li>
    31.    <li><a href="/renzheng/" target="_blank" rel="noopener">
    32.    <svg class="kuai" aria-hidden="true">
    33.   <use xlink:href="#icon-zhinan"></use>
    34.    </svg><span>身份认证</span></a></li>
    35.    <li><a href="/newposts/" target="_blank" rel="noopener">
    36.    <svg class="kuai" aria-hidden="true">
    37.   <use xlink:href="#icon-tougaofabu"></use>
    38.    </svg><span>资源投稿</span></a></li>
    39.   </ul>      
    40.    </div>
    41.   </div>
    42.    </div>
    43.   </div>
    44.   <!--导航模块 2-->
    45.   <div class="col-1-4">
    46.    <div class="hf-widget hf-widget-2">
    47.   <h3 class="hf-widget-title">
    48.   <svg class="ydicon" aria-hidden="true">
    49.   <use xlink:href="#icon-tishi"></use>
    50.   </svg>
    51.   <a href="/" target="_blank" rel="noopener">广告服务</a><span>广告位展示</span> </h3>
    52.   <div class="hf-widget-content">
    53.    <div class="no-scroll hf-tags">
    54.   <a class="style_orange" href="/" target="_blank" rel="noopener"><span>广告位 1</span></a>
    55.   <a class="" href="/" target="_blank" rel="noopener"><span>广告位 2</span></a>
    56.   <a class="" href="/" target="_blank" rel="noopener"><span>广告位 3</span></a>
    57.   <a class="" href="/" target="_blank" rel="noopener"><span>广告位 4</span></a>
    58.   <a class="" href="/" target="_blank" rel="noopener"><span>广告位 5</span></a>
    59.   <a class="" href="/" target="_blank" rel="noopener"><span>广告位 6</span></a>
    60.   <a class="" href="/" target="_blank" rel="noopener"><span>广告位 7</span></a>
    61.   <a class="" href="/" target="_blank" rel="noopener"><span>广告位 8</span></a>
    62.    </div>
    63.   </div>
    64.    </div>
    65.   </div>
    66.   <!--导航模块 3-->
    67.   <div class="col-1-4">
    68.    <div class="hf-widget hf-widget-1 hf-widget-hot-cats">
    69.   <h3 class="hf-widget-title">
    70.   <svg class="ydicon" aria-hidden="true">
    71.   <use xlink:href="#icon-kuaijiedaohang-ceping"></use>
    72.   </svg>
    73.   <a href="https://tfbk.jzpix.cn/" target="_blank" rel="noopener">快捷导航</a><span>腾飞资源教程</span> </h3>
    74.   <div class="hf-widget-content">
    75.    <div class="scroll-h">
    76.   <ul>
    77.    <li><a href="https://tfbk.jzpix.cn/category/yuanma" target="_blank" rel="noopener">
    78.    <i class="hhicon iconfont icon-moban"></i><span>网站源码</span></a></li>
    79.    <li><a href="https://tfbk.jzpix.cn/category/wpmb" target="_blank" rel="noopener">
    80. <i class="hhicon iconfont icon-yuanma"></i><span>主题模板</span></a></li>
    81. <li><a href="https://tfbk.jzpix.cn/category/wpjc" target="_blank" rel="noopener">
    82. <i class="hhicon iconfont icon-jiaocheng"></i><span>教程分享</span></a></li>
    83. <li><a href="https://tfbk.jzpix.cn/links" target="_blank" rel="noopener">
    84. <i class="hhicon iconfont icon-moban"></i><span>友情链接</span></a></li>
    85.   </ul>
    86.    </div>
    87.   </div>
    88.    </div>
    89.   </div>
    90.   <!--导航模块 4-->
    91.   <div class="col-1-4">
    92.    <div class="hf-widget hf-widget-4">
    93.   <h3 class="hf-widget-title">
    94.   <svg class="ydicon" aria-hidden="true">
    95.   <use xlink:href="#icon-dongtai"></use>
    96.   </svg>
    97.   <a href="https://tfbk.jzpix.cn/" target="_blank" rel="noopener">最新活动</a><span>注册会员享福利</span>      
    98.   </h3>
    99.   <div class="hf-widget-content">
    100. <div class="scroll-h">
    101. <ul>
    102. <li><h3><a href="https://tfbk.jzpix.cn/xin-zaobao" target="_blank" rel="noopener"> <i class="icon-time"></i> <span>每日新闻早报 60s</span><em>立即阅读</em></a></h3></li>

    104.   </ul>      
    105.    </div>
    106.   </div>
    107.    </div>
    108.   </div>
    109. </div>
    110. </div>
    111. </div>
    112. </div>
    113. <!--首页四个导航模块结束-->
    复制代码
    2025-10-10 16:08 上传
    文件大小:
    20.07 KB
    下载次数:
    0
    相关所需文件
    关注作者后下载 检测资源
    严禁发布违规违法的信息内容链接，违者经审查后予以警告或封号处理！

    # 子比主题

    本帖被以下淘专辑推荐:

    路虽远，行则将至；事虽难，做则必成。
    回复 送礼

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    飞流：这论坛到底有没有资本给我投资一下啊！
    		07-20 22:07
    系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。
    		02-21 02:22
    		01-24 12:40
    站内通告

    📢 六月份后均不在线，请悉知

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：1003810038钉推群：BAYR2383 站长QQ：3388700000

    解锁会员权限

    开通会员

    解锁海量优质VIP资源

    立刻开通
    我的主题
    搜索
    快速回复
    返回列表

    • 下载飞流灵通APP

    • QQ群

    返回顶部

    只需一步极速注册

    数字靓号爱好者聚集地

    资源交易安全省心放心

    原创内容精品资源大放送

    飞流论坛（FLLT.CN），一个专注于资源信息发布、虚拟网络交易、技术学习与娱乐社交的交流平台。

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    💥客户端|🧿小黑屋|📴手机页|飞流网 |网站地图

    GMT+8, 2026-7-22 22:21 , Processed in 0.072002 second(s), 70 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

    Copyright © 2024-2026 飞流网 版权所有 All Rights Reserved. X3.5

    快速回复 返回顶部 返回列表