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

    [代码技巧] 子比主题 – 添加创意横幅图片广告位

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

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

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

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

    ×
    这是一款子比主图创意横幅图片广告位，点击之后可以直达到会员页面，鼠标放到横幅上可以显示右上角联系我们，我觉得还是比较不错的一款广告美化，喜欢的自行部署！
    效果展示
    image.webp
    代码部署
    代码就两部分，很简单，第一步我们把下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML即可
    1. <div class="n_banner_inner">
    2.   <div class="img-info">!
    3.     <div class="info">也想出现在这里？
    4.       <a rel="nofollow noopener noreferrer" href="/" target="_blank">联系我们</a>吧</div>
    5.   </div>
    6.   <a href="=/user" target="_blank" rel="noopener noreferrer">
    7.     <div class="Banner-adTag">广告</div>
    8.    
    9.   </a>
    10. </div>
    复制代码
    第二步我们我们将代码放到：子比主题–>>自定义CSS样式即可！
    1.     /*定位*/
    2.     .n_banner_inner {
    3.         position: relative;
    4.     }
    5.     /*提示信息*/
    6.     .n_banner_inner .img-info {
    7.         position: absolute;
    8.         right: 12px;
    9.         top: 9px;
    10.         padding: 0;
    11.         text-align: right;
    12.         color: #fff;
    13.     }
    14.     .n_banner_inner .img-info i {
    15.         position: relative;
    16.         display: inline-block;
    17.         color: #007bff;
    18.         font-size: 20px;
    19.         line-height: 19px;
    20.         text-align: center;
    21.         z-index: 9;
    22.         font-style: inherit;
    23.     }
    24.     .n_banner_inner .img-info .info {
    25.         position: absolute;
    26.         bottom: 5px;
    27.         right: 0;
    28.         width: 0;
    29.         padding: 5px 0;
    30.         overflow: hidden;
    31.         background: #007bff;
    32.         border-radius: 10px;
    33.         line-height: 10px;
    34.         text-align: center;
    35.         font-size: 10px;
    36.         color: #fff;
    37.         white-space: nowrap;
    38.         -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    39.         -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    40.         -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    41.         -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    42.         transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    43.     }
    44.     .n_banner_inner .img-info .info a {
    45.         color: #fff;
    46.     }
    47.     .n_banner_inner .tirr {
    48.         max-width: 100%;
    49.         height: auto;
    50.         transition: 0.5s;
    51.         border-radius: 5px;
    52.     }
    53.     /*触发Hover*/
    54.     .n_banner_inner:hover .info {
    55.         width: auto;
    56.         padding: 5px 23px 5px 12px;
    57.         -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    58.         -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    59.         -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    60.         -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    61.         transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    62.         font-size: 12px;
    63.         z-index: 1;
    64.     }
    65.     .n_banner_inner img:hover {
    66.         filter: brightness(50%);
    67.     }
    68.     /*出发声明hover*/
    69.     .n_banner_inner .info:hover a {
    70.         color: red;
    71.         text-decoration: none;
    72.     }
    73.     /*左下角广告*/
    74.     .n_banner_inner .Banner-adTag {
    75.         position: absolute;
    76.         left: 5px;
    77.         bottom: 5px;
    78.         width: 50px;
    79.         border: 1px solid #ebebeb;
    80.         border-radius: 3px;
    81.         color: #ebebeb;
    82.         opacity: 0.5;
    83.         font-size: 12px;
    84.         line-height: 20px;
    85.         text-align: center;
    86.     }
    87.     @media screen and (max-width: 768px) {
    88.         .n_banner_inner .img-info {
    89.             display: none;
    90.         }
    91.     }
    92.   .container {
    93.     width: 100%;
    94. }
    95. .zib-widget {
    96.     clear: both;
    97.     background: var(--main-bg-color);
    98.     padding: 0px;
    99.     box-shadow: 0 0 0px var(--main-shadow);
    100.     border-radius: var(--main-radius);
    101.     margin-bottom: 20px;
    102. }
    复制代码
    # 子比主题

    本帖被以下淘专辑推荐:

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

    使用道具 举报

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

    飞流论坛 HanAnalytics icp

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

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