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

    [代码技巧] 子比主题 – 随机背景文字三栏组合广告位

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

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

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

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

    ×
    这是一款子比主题随机背景文字三栏组合广告位，效果非常好看，左边两张图片，右边是随机背景文字的一个广告位的代码，有技术的自己适配一下手机端，我手机端给隐藏了，喜欢的自行部署吧！

    image.webp

    代码部署


    HTML代码
    直接将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML代码即可
    1. <div class="ercdh">
    2.     <div class="ercdh_1 ">
    3.         <div class="sbaner">
    4.             <a href="https://www.tfbkw.com/" target="_blank">
    5.                
    6.             </a>
    7.         </div>
    8.         <div class="sbaner">
    9.             <a href="https://www.tfbkw.com/" target="_blank">
    10.                
    11.             </a>
    12.         </div>
    13.     </div>
    14.     <div class="ercdh_2">
    15.         <!-- 待写标签统计 -->
    16.         <section class="bqct mhs-flex-container">
    17.             <a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
    18.         </section>
    19.         <section class="bqct mhs-flex-container">
    20.             <a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
    21.         </section>
    22.         <section class="bqct mhs-flex-container">
    23.             <a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
    24.         </section>
    25.         <section class="bqct mhs-flex-container">
    26.             <a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
    27.         </section>
    28.         <section class="bqct mhs-flex-container">
    29.             <a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
    30.         </section>
    31.         <section class="bqct mhs-flex-container">
    32.             <a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
    33.         </section>
    34.         <section class="bqct mhs-flex-container">
    35.             <a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
    36.         </section>
    37.         <section class="bqct mhs-flex-container">
    38.             <a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
    39.         </section>
    40.         <section class="bqct mhs-flex-container">
    41.             <a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
    42.         </section>
    43.         <section class="bqct mhs-flex-container">
    44.             <a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
    45.         </section>
    46.     </div>
    47. </div>
    复制代码

    CSS代码
    丢到：子比主题–>>自定义CSS样式即可
    1.     .ercdh {
    2.         display: flex;
    3.         overflow: hidden;
    4.     }
    5.    
    6.     .ercdh_1 {
    7.         display: grid;
    8.         grid-template-columns: repeat(2, 1fr);
    9.         gap: 10px;
    10.         padding-right: 30px;
    11.         position: relative;
    12.         width: 50%;
    13.     }
    14.    
    15.     .sbaner {
    16.         height: 80px;
    17.     }
    18.    
    19.     .ercdh_2 {
    20.         flex: 1;
    21.         padding-left: 30px;
    22.         display: grid;
    23.         grid-template-columns: repeat(5, 1fr);
    24.         gap: 0 15px;
    25.     }
    26.    
    27.     .mhs-flex-container {
    28.         display: flex;
    29.         justify-content: flex-start;
    30.         align-items: center;
    31.         align-self: auto;
    32.     }
    33.    
    34.     .random-color {
    35.         transition: background-color 0.5s;
    36.         color: #ececec;
    37.     }
    38.    
    39.     .bqct {
    40.         font-size: 14px;
    41.         display: flex;
    42.     }
    43.    
    44. .bqct a {
    45.     width: 100%;
    46.     border-radius: 6px;
    47.     background-color: var(--main-bg-color);
    48.     text-align: center;
    49.     font-weight: 400;
    50.     transition: background-color .3s, color .3s;
    51.     line-height: 30px;
    52.     color: #707070;
    53.     text-decoration: none;
    54. }
    55.    
    56.     .bqct a:hover {
    57.         color: #f1f2f3;
    58.     }
    59.    
    60.     .sbaner:after {
    61.         content: "";
    62.         display: inline-block;
    63.         background: #ececec;
    64.         position: absolute;
    65.         width: 1px;
    66.         height: 44px;
    67.         right: 0;
    68.         top: 50%;
    69.         -webkit-transform: translateY(-50%);
    70.         transform: translateY(-50%);
    71.     }
    72.    
    73.     .html-box img {
    74.         height: 80px;
    75.     }
    76. @media screen and (max-width: 1221px) { .ercdh{display:none; }
    77. }
    复制代码

    JS代码
    直接丢到：子比主题–>>自定义javascript代码即可！
    1.     function getRandomColor() {
    2.         const letters = '0123456789ABCDEF';
    3.         let color = '#';
    4.         for (let i = 0; i < 6; i++) {
    5.             color += letters[Math.floor(Math.random() * 16)];
    6.         }
    7.         return color;
    8.     }

    10.     document.addEventListener('DOMContentLoaded', () => {
    11.         const sections = document.querySelectorAll('.random-color');
    12.         sections.forEach(section => {
    13.             section.addEventListener('mouseover', () => {
    14.                 section.style.backgroundColor = getRandomColor();
    15.             });
    16.             section.addEventListener('mouseout', () => {
    17.                 section.style.backgroundColor = '';
    18.             });
    19.         });
    20.     });
    复制代码

    # 子比主题

    本帖被以下淘专辑推荐:

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

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    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-8-17 10:29 , Processed in 0.063736 second(s), 67 queries, MemCached On , Gzip On.

    飞流论坛 HanAnalytics icp

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

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