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

    [代码技巧] 子比主题 – 首页左侧快捷导航美化

    [复制链接]
    飞流 00001
    起源之星
    任务·年会员
    累计签到LV.3
    摩羯座
    +1
    社区贡献
    346 220 24789
    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 165 颗
       贡献 : 24991 点
       金币 : 4 枚
    Icon在线时间 : 1972 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2026-9-13
    送礼物：3 个 收礼物：1 个
    FLLTCN 实名认证 特邀大神 诚信商家 信誉担保 精华作者+ 官方团队 vip vip-year 发表于 2025-10-6 21:42:18 | 查看全部 |阅读模式 浙江金华

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

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

    ×
    一款非常好看的PC首页左侧快捷导航的美化，可以看一下下面图片的演示图，给自己的子比主题加一个列表美化的样式吧，喜欢的自行部署吧
    image.webp
    代码部署
    一共三个地方，跟着我的步骤走不会有任何问题，话不多说直接开始！
    index代码（第一步）
    我们先到：/wp-content/themes/zibll/index.php文件里面我们将下面的代码放到</main>的下面
    #号 zuixinfabu 不要动，后面跟的两个分类的bbmh和zbmh是分类别名。跳转至对应的卡片列表，如果你想要跳转到哪个小工具那个地方你加一个<div id=”标签名字”>，然后改下面的代码#标签即可！
    1. <ul id="menu" class="ontop show" style="background:var(--main-bg-color);">
    2.     <a class="scroll-link" href="javascript:(scrollTo('#zuixinfabu',-1));" rel="external nofollow" ><li title="最新发布"   style="color:var(--key-color);" class="">最新发布</li></a>
    3.     <a class="scroll-link" href="javascript:(scrollTo('#bbmh',-1));" rel="external nofollow" ><li title="B2美化"   style="color:var(--key-color);" class="">B2美化</li></a>
    4.     <a class="scroll-link" href="javascript:(scrollTo('#zbmh',-1));" rel="external nofollow" ><li title="子比美化"   style="color:var(--key-color);" class="">子比美化</li></a>
    5.     <a class="scroll-link" href="javascript:(scrollTo('#Onecad-tuijian',-1));" rel="external nofollow" ><li title="人气作者"   style="color:var(--key-color);" class="">人气作者</li></a>
    6.   <a class="scroll-link" href="javascript:(scrollTo('#syphb',-1));" rel="external nofollow" ><li title="排行榜"   style="color:var(--key-color);" class="">排行榜</li></a>
    7.   </ul>
    复制代码
    css代码（第二步）
    将下面的代码放到：子比主题–>>自定义CSS样式即可！
    1. /** 首页侧边导航直达条开始 **/

    3. @media (max-width: 768px) {
    4.      ul#menu {
    5.         display: none!important;
    6.     }  
    7. }

    9. ul#menu {
    10.     position: fixed;
    11.     left: 0;
    12.     top: 40%;
    13.     width: 120px;
    14.     transform: translateY(-45%);
    15.     background-color: #fff;
    16.     box-shadow: 0 4px 8px 0 rgb(108 0 255 / 10%);
    17.     border-radius: 0 8px 8px 0;
    18.     text-align: center;
    19.     color: #6d7278;
    20.     z-index: 999;
    21.     user-select: none;
    22. }

    24. #menu li {
    25.     position: relative;
    26.     padding: 13px 0;
    27.     cursor: pointer;
    28.     transition: color .2s;
    29. }



    33. #menu.ontop{
    34.     opacity: 0;
    35.     transition: .6s;
    36.     transform: translateY(-30%);
    37. }


    40. #menu.show{
    41.     opacity: 1;
    42.     transform: translateY(-45%);
    43.     visibility: unset;
    44. }
    45. /** 首页侧边导航直达条结束 **/

    47.     /* 单行文章列表美化——开始 */
    48.     .posts-item.card:last-child {
    49.     margin-bottom: 8px!important;
    50. }
    51.     .training-camp__wrapper .header__title-wrapper{
    52.             
    53.     font-size: 16px;
    54.     }
    55.         .sec-wrapper {
    56.             margin-bottom: 10px;
    57.         }

    59. .training-camp__wrapper .header__title-wrapper{
    60.     color:#22ab80;
    61. }
    62.         .training-camp__wrapper {
    63.      
    64.             background-image: linear-gradient(150deg,#cff0fb 20%,#cbf4e4 40%);
    65.             padding: 0 12px 12px;
    66.             border-radius: 16px;
    67.         }

    69.         button.button---AUM5ZP.text---pn4pHz.medium---OGt5iw.header__btn {
    70.             background: #ffffff00;
    71.             border: 1px solid #fc3c2d00;
    72.             border-radius: 0px;
    73.         }

    75.         .training-camp__wrapper .training-camp__header {
    76.             padding: 24px 0 24px 12px;
    77.             display: -webkit-flex;
    78.             display: flex;
    79.          
    80.             background: url(/pic/kuangwenlu.png) 100% 0/433px 126px no-repeat;
    81.         }

    83.         .training-camp__wrapper .header__title-wrapper {
    84.             display: -webkit-flex;
    85.             display: flex;
    86.             -webkit-align-items: center;
    87.             align-items: center;
    88.             
    89.         }

    91.         .training-camp__wrapper .title__img-wrapper {
    92.             height: 20px;
    93.         }

    95.         .training-camp__wrapper .header__btn-wrapper {
    96.             margin-left: auto;
    97.             display: -webkit-flex;
    98.             display: flex;
    99.         }

    101.         .training-camp__wrapper .header__btn-wrapper button[class*=button---] {
    102.             height: 20px;
    103.             line-height: 20px;
    104.             padding: 0 12px;
    105.         }

    107.         .training-camp__wrapper .header__btn {
    108.             display: -webkit-flex;
    109.             display: flex;
    110.             -webkit-align-items: center;
    111.             align-items: center;
    112.             font-size: 14px;
    113.             color: #22ab80;
    114.         }

    116.         .medium---OGt5iw {
    117.             height: 36px;
    118.             padding: 8px 24px;
    119.             font-size: 14px;
    120.         }

    122.         .outlined---BKvHAe, .text---pn4pHz {
    123.             background-color: initial;
    124.             color: #3e454d;
    125.         }

    127.         .button---AUM5ZP {
    128.             position: relative;
    129.             display: inline-block;
    130.             height: 36px;
    131.             padding: 8px 24px;
    132.             border-radius: 22px;
    133.             cursor: pointer;
    134.             border: unset;
    135.             font-size: 14px;
    136.             -webkit-user-select: none;
    137.             -moz-user-select: none;
    138.             user-select: none;
    139.         }

    141.         .ke-icon---zeGrGg+i {
    142.             display: inline-block;
    143.             vertical-align: middle;
    144.         }

    146.         .training-camp__wrapper>div.sec-bd {
    147.             background-color: var(--body-bg-color);
    148.            
    149.         }

    151.         .sec-wrapper .sec-bd {
    152.             position: relative;
    153.             display: -webkit-flex;
    154.             display: flex;
    155.             -webkit-flex-wrap: wrap;
    156.             flex-wrap: wrap;
    157.             
    158.         }

    160.         .training-camp__wrapper .sec-bd {
    161.             padding: 12px;
    162.             border-radius: 16px;
    163.         }

    165.         img.title-macyingyong {
    166.             /* width: 120px; */
    167.             height: 50px;
    168.         }
    169.      .posts-item.card {
    170.     padding: 35px 10px 10px 10px!important;
    171. }
    172.     .posts-item {
    173.     position: relative !important;
    174. }
    175.     .posts-item.card::before {
    176.     content: "";
    177.     display: block;
    178.     background: #fc625d;
    179.     top: 13px;
    180.     left: 15px;
    181.     border-radius: 50%;
    182.     width: 9px;
    183.     height: 9px;
    184.     box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
    185.     margin: 0px 2px -7px;
    186.     z-index: 1000;
    187.     position: absolute;
    188. }
    189.    
    190.    
    191.         /* 单行文章列表美化——结束 */
    复制代码

    首页配置（第三步）
    打开：子比主题–>>页面&显示–>>首页配置，将下面的代码放到显示标题里面即可
    image.webp
    1. <p id="zuixinfabu">最新发布</p>
    复制代码
    [/zhedie]
    # 子比主题

    本帖被以下淘专辑推荐:

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

    使用道具 举报

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

    本版积分规则

    飞流广播+ 发布

    		07-23 18:52
    飞流：这论坛到底有没有资本给我投资一下啊！
    		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-9-13 16:41 , Processed in 0.065370 second(s), 67 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

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

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