✨️靓标库🧚‍♂️名人堂⚔️攻守道🎲骰子🥊猜拳🏧黑市🏧银行💹抽奖💝捐助
✨活动💥客户端🎫卡密📜淘帖🧩导读📢推广👛帮助💰️钱包💖关注
  • 首页
  • 社区
  • 资源
  • 拍卖
  • 排行Ranklist
  • 家园Space
  • 圈子
  • 任务
  • 商城
  • 文库
  • 需求
    • 立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 子比主题 – 首页左侧快捷导航美化
    返回列表 发布新帖
    查看: 89|回复: 0

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

    [复制链接]
    SunJu_FaceMall
    社区贡献

    315

    主题

    190

    回帖

    1万

    积分

    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 524 颗
       贡献 : 1849 点
       金币 : 12 枚
    Icon在线时间 : 1297 小时
    Icon注册时间 : 2024-11-22
    Icon最后登录 : 2025-12-9

    荣誉勋章

    会员LV.1会员LV.2会员LV.3会员LV.4会员LV.5会员LV.6会员LV.7会员LV.8会员LV.9会员LV.10

    风云·优秀版主
    飞流名人堂成员

    1

    实名认证 手机认证 vip vip-year FLLTCN发表于 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
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		10-30 17:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		10-09 09:07
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-24 09:00
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-11 11:40
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-02 09:17
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-27 08:56
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-20 15:12
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-03 10:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		06-30 08:57
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		06-18 09:14
    系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-11 09:40
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-10 09:31
    系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 13:44
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 09:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 08:52
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-08 09:24
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-07 09:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		02-27 09:35
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-26 09:06
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-25 08:49
    站内通告

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

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

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

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

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

    官方Q群：123129钉推群：BAYR2383 站长QQ：3220000000

    关于我们

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

    常用功能

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

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    投诉/建议/商务合作联系

    fl@fllt.cn

    严禁私下交易，被骗与本站无关。
    违反交易细则，取证立查严惩。
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    👮曝光Ta|🧿小黑屋|📴手机页|飞流网 ( 渝ICP备2025054677号-1|电信增值许可 渝B2-20250789 )|网站地图

    GMT+8, 2025-12-10 13:46 , Processed in 0.098967 second(s), 61 queries, MemCached On , Gzip On.

    Based on XJ-TX X3.5 Licensed

    飞流论坛 HanAnalytics icp Astro vhAstro-Theme

    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表