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

    [代码技巧] 子比主题 – 文章顶部添加按钮样式

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

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

    荣誉勋章

    起源之星任务·年会员累计签到LV.3摩羯座

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

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

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

    ×
    这是一款文章顶部添加按钮样式，当用户访问文章的时候可以看到这四个按钮，按钮的样式也非常简约，这个按钮也非常的实用，喜欢的自行部署！

    image.webp

    代码部署


    将下面的代码放到：子比主题–>>文章&列表–>>文章页面–>>文章插入内容（前后自己选择吧）
    1. <style>
    2.     .hoayue_button_container {
    3.         display: flex;
    4.         flex-wrap: wrap;
    5.         justify-content: center;
    6.         gap: 15px;
    7.         padding: 20px 0;
    8.         width: 100%;
    9.         box-sizing: border-box;
    10.     }

    12.     .hoayue_button_block {
    13.         display: flex;
    14.         align-items: center;
    15.         justify-content: center;
    16.         padding: 8px 16px;
    17.         font-weight: 500;
    18.         border-radius: 6px;
    19.         cursor: pointer;
    20.         transition: all 0.3s ease;
    21.         color: #333;
    22.         text-align: center;
    23.         user-select: none;
    24.         background: #f2f2f2;
    25.         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    26.         border: 1px solid #ddd;
    27.         text-decoration: none;
    28.         gap: 6px;
    29.         text-decoration: none;
    30.         flex: 1 0 22%;
    31.         box-sizing: border-box;
    32.     }

    34.     .hoayue_button_block:hover {
    35.         background: #e0e0e0;
    36.         transform: translateY(-2px);
    37.         box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    38.     }

    40.     .hoayue_button_icon {
    41.         width: 18px;
    42.         height: 18px;
    43.     }

    45.     @media (min-width: 1025px) {
    46.         .hoayue_button_container {
    47.             justify-content: space-between;
    48.         }
    49.         .hoayue_button_block {
    50.             flex: 1 0 calc(25% - 20px);
    51.             max-width: 23%;
    52.             font-size: 14px;
    53.             padding: 6px 14px;
    54.         }
    55.         .hoayue_button_icon {
    56.             width: 16px;
    57.             height: 16px;
    58.         }
    59.     }

    61.     @media (min-width: 768px) and (max-width: 1024px) {
    62.         .hoayue_button_block {
    63.             flex: 1 0 calc(25% - 20px);
    64.             max-width: 23%;
    65.             font-size: 16px;
    66.             padding: 8px 16px;
    67.         }
    68.         .hoayue_button_icon {
    69.             width: 18px;
    70.             height: 18px;
    71.         }
    72.     }

    74.     @media (max-width: 767px) {
    75.         .hoayue_button_block {
    76.             flex: 1 0 calc(50% - 10px);
    77.             font-size: 14px;
    78.             padding: 8px 14px;
    79.         }
    80.         .hoayue_button_icon {
    81.             width: 16px;
    82.             height: 16px;
    83.         }
    84.     }
    85. </style>
    86. <div class="hoayue_button_container">
    87.    
    88.     <a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
    89.          <!-- 图标替换为图片 -->
    90.         加入QQ群
    91.     </a>
    92.     <a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
    93.          <!-- 图标替换为图片 -->
    94.         关注微信公众号
    95.     </a>
    96.     <a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
    97.          <!-- 联系我们图标 -->
    98.         联系我们
    99.     </a>
    100.     <a href="/" class="hoayue_button_block" target="_blank" rel="noopener noreferrer">
    101.          <!-- 图标替换为图片 -->
    102.         请求更新
    103.     </a>
    104. </div>
    复制代码


    # 子比主题

    本帖被以下淘专辑推荐:

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

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    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-21 00:34 , Processed in 0.067064 second(s), 70 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

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

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