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

    [代码技巧] 首页广告图片文字代码 – 网站通用广告位代码

    [复制链接]
    SunJu_FaceMall
    社区贡献

    315

    主题

    190

    回帖

    1万

    积分

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

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

    荣誉勋章

    会员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-10 16:05:03 | 查看全部 |阅读模式 浙江金华

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

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

    ×

    默认双端显示，可自行更改仅PC端显示或者仅移动端显示，子比适应，扒过来的，非常适合做广告位的站长，喜欢的话拿去用
    tengfei_down - 2025-10-10T160316.995.webp

    部署教程


    我按照子比主题的教程来，直接将代码放到：后台-外观-小工具-自定义HTML即可
    1. <style>
    2.     @media screen and (max-width: 1000px) {
    3.         .pc-wobbt {
    4.             display: none;
    5.         }
    6.     }

    8.     /* pc-wobbt 仅PC端显示 根据需求改放图片盒子代码
    9.     <div class="wobbt-img pc-wobbt">  */
    10.         @media screen and (min-width: 1000px) { .m-wobbt{display:none; }}
    11.         /* m-wobbt 仅移动端显示 根据需求该放图片盒子代码
    12.         <div class="wobbt-img m-wobbt">  */

    14.         .zib-widget{
    15.         padding: 10px;}
    16.         /*设置zibll主题内容整体间距*/
    17.         .wobbt{
    18.         width: 100%;}
    19.         .wobbt::after{
    20.         content: '';
    21.         display: block;
    22.         height: 0;
    23.         visibility:hidden;
    24.         clear: both;
    25.         }
    26.         /*解决float的浮动问题，方便，因为直接在父级div的css这里添加如下样式*/
    27.         .wobbt-left{
    28.         width: 49.5%;
    29.         float: left;  /*盒子左对齐*/
    30.         margin-right: 1%;
    31.         }
    32.         /*大盒子里面左边盒子*/
    33.         .wobbt-right{
    34.         width: 49.5%;
    35.         float: left;  /*盒子右对齐*/
    36.         }
    37.         /*大盒子里面右边盒子*/
    38.         .wobbt-img{
    39.         width: 100%;
    40.         height: auto;
    41.         max-height: 80px;
    42.         min-height: 45px;
    43.         margin-bottom: 8px;  /*图片盒子上下间隔*/
    44.         overflow: hidden;  /*设置图片放大不超过图片盒子*/
    45.         }
    46.         /*放图片专用盒子*/
    47.         .wobbt-img img{
    48.         width: 100%;
    49.         height: auto;
    50.         max-height: 80px;
    51.         min-height: 45px;
    52.         border-radius: 6px;  /*圆角角度*/
    53.         transition: all .2s ease .1s;  /*光标放到图片上的放大时间*/
    54.         }
    55.         /*对放图片盒子配置样式*/
    56.         .wobbt-img img:hover{
    57.         transform: scale(1.03);
    58.         }
    59.         .wobbt-img-dapeng img:hover{
    60.         transform: scale(1.03);
    61.         }
    62.         /*设置光标放到图片放大的倍数*/
    63.         td{
    64.          width: 20%;
    65.         }
    66.         /*单元格宽度*/
    67. </style>
    68. <!--图片广告-->
    69. <div class="wobbt">
    70. <div class="wobbt-img">
    71. <a href="https://网站地址
    72. " target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="横幅广告图1" height="100px"></a>
    73. </div>
    74. <div class="wobbt-left">
    75. <div class="wobbt-img">
    76. <a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="左边广告图1" height="100px"></a>
    77. </div>
    78. <div class="wobbt-img">
    79. <a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="左边广告图2" height="100px"></a>
    80. </div>
    81. </div>
    82. <!--左右小图-->
    83. <div class="wobbt-right">
    84. <div class="wobbt-img">
    85. <a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="右边广告图1" height="100px"></a>
    86. </div>
    87. <div class="wobbt-img">
    88. <a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="右边广告图2" height="100px"></a>
    89. </div>
    90. </div>
    91. <!--文字广告-->
    92. <table style="text-align:center;width:100%;margin-bottom: 10px;" cellspacing="0" cellpadding="0" bordercolor="#99999" border="1" bgcolor="#F8F8FF" align="center"><tbody><tr><td>
    93. <a href="https://网站地址" target="_blank" rel="noopener"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#0000FF;">文字广告位招租中</span></a></td>
    94. <td>
    95. <a href="https://网站地址" target="_blank" rel="noopener"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
    96. <td>
    97. <a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
    98. <td>
    99. <a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span> </a> </td>  
    100. <td>
    101. <a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#0000FF;">文字广告位招租中</span></a></td>
    102. </tr>
    103. <!--第一列-->
    104. <tr>
    105. <td>
    106. <a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
    107. <td>
    108. <a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#006400;">文字广告位招租中</span></a></td>
    109. <td>
    110. <a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
    111. <td>
    112. <a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#970de1;">文字广告位招租中
    113. </span> </a></td>  
    114. <td>
    115. <a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
    116. </tr>
    117. <!--第二列-->
    118. <tr>
    119. <td>
    120. <a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
    121. <td>
    122. <a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#006400;">文字广告位招租中</span></a></td>
    123. <td>
    124. <a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
    125. <td>
    126. <a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#000000;">文字广告位招租中</span> </a></td>  
    127. <td>
    128. <a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
    129. </tr>
    130. </tbody></table>
    131. </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-8 11:55 , Processed in 0.098478 second(s), 61 queries, MemCached On , Gzip On.

    Based on XJ-TX X3.5 Licensed

    飞流论坛 HanAnalytics icp Astro vhAstro-Theme

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