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

    [代码技巧] 子比主题 – 自适应多样式广告位小工具

    [复制链接]
    SunJu_FaceMall
    社区贡献

    315

    主题

    190

    回帖

    1万

    积分

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

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

    荣誉勋章

    会员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-9 00:20:19 | 查看全部 |阅读模式 浙江金华

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

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

    ×
    这是一款子比主题自适应多样式的广告位小工具，我觉得这个小工具还是不错的，适配了手机端和电脑端，对于想卖广告位的站长非常的方便，话不多说直接开始！

    tengfei_down (70).webp

    代码部署


    将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML即可！
    1. <style>
    2.     a{text-decoration:none}
    3.     .ad{background:#fff0;overflow:hidden;clear:both;border-radius:6px;}
    4.     .ad a{margin:2px;display:block;border-radius:3px;}
    5.     .ad img{max-width:100%;border-radius:8px;}
    6.     .ad li{float:left;width:50%;list-style:none;}
    7.     @media(max-width:999px) {
    8.     .ad{margin: 0 0 10px 0;}
    9.     .ad li{width:100%;}
    10.     }
    11.     .txtguanggao{
    12.         width: 100%;
    13.         overflow: hidden;
    14.         display: block;
    15.         margin-top: -1px;
    16.     }
    17.     .txtguanggao a{
    18.         width: calc((100% - 20px) / 4);
    19.         float: left;
    20.         border-radius: 2px;
    21.         line-height: 35.35px;
    22.         height: 35.35px;
    23.         text-align: center;
    24.         font-size: 14px;
    25.         color: #fff;
    26.         display: inline-block;
    27.         background-color: rgb(255, 153, 159);
    28.         margin: 2.5px;
    29.         transition-duration: .3s;
    30.     }
    31.     .txtguanggao a:nth-child(1) { background-color: #dc3545; }
    32.     .txtguanggao a:nth-child(2) { background-color: #007bff; }
    33.     .txtguanggao a:nth-child(3) { background-color: #28a745; }
    34.     .txtguanggao a:nth-child(4) { background-color: #ffc107; }
    35.     .txtguanggao a:nth-child(5) { background-color: #28a745; }
    36.     .txtguanggao a:nth-child(6) { background-color: #ffc107; }
    37.     .txtguanggao a:nth-child(7) { background-color: #dc3545; }
    38.     .txtguanggao a:nth-child(8) { background-color: #007bff; }
    39.     .txtguanggao a:hover { background:#FF2805; color:#FFF; }
    40.     @media screen and (max-width: 1000px) {
    41.     .txtguanggao a {
    42.         width: calc((100% - 10px) / 2);
    43.         float: left;
    44.         border-radius: 2px;
    45.         line-height: 35.35px;
    46.         height: 35.35px;
    47.         text-align: center;
    48.         font-size: 14px;
    49.         color: #fff;
    50.         display: inline-block;
    51.         background-color: rgb(255, 153, 159);
    52.         margin: 2.5px;
    53.         transition-duration: .3s;
    54.     }
    55.     }
    56.     @media screen and (min-width: 1000px) {
    57.     .txtguanggao a {
    58.         width: calc((100% - 20px) / 4);
    59.     }
    60.     }
    61.     </style>
    62.    
    63.     <div class="ad">
    64.     <!--·····顶部自适应图片广告开始·····-->
    65.     <a href="https://www.tfbkw.com" target="_blank" >
    66.     <picture>
    67.     <!--↓↓↓电脑设备尺寸：1500x141px↓↓↓-->
    68.     <source media="(min-width: 45em)" srcset="https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01mzG05q1QbInS6gEow_!!2210123621994.png" width="100%">
    69.     <!--↓↓↓手机设备尺寸：900x268px↓↓↓-->
    70.     <source media="(min-width: 18em)" srcset="https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01mzG05q1QbInS6gEow_!!2210123621994.png" width="100%">
    71.     <!--↓↓↓当图片无法加载时显示备用图片↓↓↓-->
    72.    
    73.    
    74.     </picture>
    75.     </a>
    76.     <!--·····顶部自适应图片广告结束·····-->
    77.    
    78.     <!--自适应文字广告-->
    79.     <li><a href="https://www.tfbkw.com/" target="_blank" style="line-height:60px;height:60px;color:#fff;background:#e73038;text-align:center;font-size:24px;">大文字广告位</a></li>
    80.     <li> <a href="https://www.tfbkw.com/"  target="_blank" style="line-height:60px;height:60px;color:#fff;background:#ff8100;text-align:center;font-size:24px;">大文字广告位</a></li>
    81.     </div>
    82.    
    83.     <!--底部小文字广告-->
    84.     <div class="txtguanggao">
    85.     <a href="https://www.tfbkw.com/" target="_blank" class="dh">超低价文字广告位</a>
    86.     <a href="https://www.tfbkw.com/" target="_blank" class="dh">超低价文字广告位</a>
    87.     <a href="https://www.tfbkw.com/" target="_blank" class="dh">超低价文字广告位</a>
    88.     <a href="https://www.tfbkw.com/" target="_blank" class="dh">超低价文字广告位</a>
    89.     <a href="https://www.tfbkw.com/" target="_blank" class="dh">超低价文字广告位</a>
    90.     <a href="https://www.tfbkw.com/" target="_blank" class="dh">超低价文字广告位</a>
    91.     <a href="https://www.tfbkw.com/" target="_blank" class="dh">超低价文字广告位</a>
    92.     <a href="https://www.tfbkw.com/" target="_blank" class="dh">超低价文字广告位</a>
    93.     </div>
    复制代码

    # 子比主题

    本帖被以下淘专辑推荐:

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

    使用道具 举报

    相关帖子
    返回列表 发布新帖
    高级模式
    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-11-13 01:33 , Processed in 0.076629 second(s), 61 queries, MemCached On , Gzip On.

    Based on XJ-TX X3.5 Licensed

    飞流论坛 HanAnalytics icp Astro vhAstro-Theme

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