对联广告代码怎么写：页面两侧广告的实现方法

对联广告通常指固定在页面内容左右两侧的广告位：用户滚动页面时，广告仍停留在视口中；屏幕较窄时，广告则需要隐藏或改用其他展示方式。它的视觉形式简单，实际实现却不只是给两个元素加上 position: fixed：还要考虑页面宽度、广告关闭、移动端遮挡、键盘操作、广告链接属性，以及广告平台对展示方式的要求。

本文从适用场景和布局边界讲起，提供一份可以直接改造的示例。示例使用占位文案和链接，不连接真实广告服务，也不包含追踪代码；接入广告平台时，应按平台提供的代码、政策和参数说明进行替换。

一、什么是对联广告，适合放在哪里

对联广告一般成对出现，分别位于正文区域左侧和右侧。常见形式包括品牌推广、活动入口、站点自有内容推荐，以及由广告平台提供的展示素材。它适合桌面端宽屏页面：视口两边有足够空间，广告不会挤压正文，也不必覆盖主要操作区域。

下面这些场景通常不适合直接采用固定侧边广告：

• 窄屏和移动端：左右留白有限，固定广告容易盖住正文、菜单、表单或悬浮按钮。应隐藏侧栏广告，或另行设计经评估的移动端广告位。
• 宽度不稳定的应用界面：后台、在线编辑器和复杂工具页面往往有侧边栏、弹窗或可拖拽面板，固定广告可能与交互区域冲突。
• 内容本身需要宽幅显示：例如数据表格、地图或图像查看器，侧边广告可能妨碍主要任务。
• 广告供应方不允许该种展示方式：即使代码本身正常，平台也可能对广告尺寸、位置、刷新、遮挡、关闭方式或移动端展示另有规则。应先查看对应产品的现行政策，不要自行假定平台允许。

侧边广告属于页面布局和广告合规共同决定的功能。开发人员可以控制自己的 DOM 与 CSS，但不能据此推断某个广告平台一定批准该展示形式，也不能保证广告一定填充或产生收益。

二、实现前先确定尺寸和边界

写代码前，建议先明确以下信息：

• 正文最大宽度：示例以 1100 像素为正文容器最大宽度。实际项目应使用页面真实的内容宽度。
• 广告素材尺寸：示例使用 120 × 300 像素作为演示占位尺寸。这不是广告平台的通用标准，也不是任何平台的尺寸限制；实际尺寸要以素材和平台文档为准。
• 最小展示视口：左右广告、正文及间距必须能同时容纳。示例在视口宽度小于 1360 像素时隐藏侧栏广告。这个阈值只是与本例布局相匹配的设计值，不是规范要求；项目应根据正文宽度、广告尺寸和留白重新计算。
• 纵向可视空间：广告不能遮住重要内容，也不能伸出视口造成无法访问。可以限制最大高度，并允许广告内容在自身区域内滚动，或根据平台要求采用其他处理。
• 关闭策略：若提供关闭按钮，应保证按钮可见、可用，并避免它落在广告链接的点击区域内。是否必须提供关闭功能，须结合广告形式和平台规范判断。

一个简单的宽度估算是：正文最大宽度 + 左右广告宽度 + 两侧间距 + 视口边缘留白。若视口无法满足这个总宽度，就应隐藏侧栏或切换布局，而不是将广告压到正文上方。

三、可运行示例：固定定位、响应式隐藏和关闭

下面的代码可放入普通网页进行测试。将示例中的占位卡片替换成自己的广告素材或广告平台允许使用的代码。示例假定页面内容的最大宽度为 1100 像素，两侧广告各宽 120 像素，广告与正文之间留 12 像素；低于 1360 像素时隐藏两侧广告。

<style>
  :root {
    --content-width: 1100px;
    --side-ad-width: 120px;
    --side-ad-gap: 12px;
    --page-gutter: 12px;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    color: #222;
    line-height: 1.6;
  }

  .page-content {
    width: min(
      var(--content-width),
      calc(100% - 2 * var(--page-gutter))
    );
    margin: 0 auto;
    padding: 24px 0 80px;
  }

  .side-ad {
    position: fixed;
    top: 120px;
    z-index: 20;
    width: var(--side-ad-width);
    max-height: calc(100vh - 24px);
    overflow: auto;
    padding: 8px;
    border: 1px solid #bbb;
    background: #fff;
    color: #222;
  }

  .side-ad--left {
    left: calc(
      (100vw - var(--content-width)) / 2
      - var(--side-ad-width)
      - var(--side-ad-gap)
    );
  }

  .side-ad--right {
    right: calc(
      (100vw - var(--content-width)) / 2
      - var(--side-ad-width)
      - var(--side-ad-gap)
    );
  }

  .side-ad__label {
    margin: 0 0 6px;
    font-size: 12px;
  }

  .side-ad__close {
    display: block;
    margin: 0 0 6px auto;
    min-width: 32px;
    min-height: 32px;
    cursor: pointer;
  }

  .side-ad__creative {
    display: grid;
    width: 100%;
    min-height: 260px;
    place-items: center;
    padding: 8px;
    background: #f1f1f1;
    text-align: center;
  }

  .side-ad__creative a {
    color: #0645ad;
  }

  @media (max-width: 1359px) {
    .side-ad {
      display: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .side-ad {
      scroll-behavior: smooth;
    }
  }
</style>

<main class="page-content">
  <h1>页面正文</h1>
  <p>在这里放置页面主要内容。请在桌面端调整浏览器宽度，检查正文与两侧广告是否重叠。</p>
  <p>实际项目可以有更多正文内容，也可以在不同断点切换不同广告布局。</p>
</main>

<aside class="side-ad side-ad--left"
       aria-label="左侧广告"
       data-side-ad>
  <button class="side-ad__close"
          type="button"
          aria-label="关闭左侧广告">
    关闭
  </button>
  <p class="side-ad__label">广告</p>
  <div class="side-ad__creative">
    <a href="https://example.com/campaign"
       target="_blank"
       rel="sponsored noopener noreferrer">
      示例广告内容
    </a>
  </div>
</aside>

<aside class="side-ad side-ad--right"
       aria-label="右侧广告"
       data-side-ad>
  <button class="side-ad__close"
          type="button"
          aria-label="关闭右侧广告">
    关闭
  </button>
  <p class="side-ad__label">广告</p>
  <div class="side-ad__creative">
    <a href="https://example.com/campaign"
       target="_blank"
       rel="sponsored noopener noreferrer">
      示例广告内容
    </a>
  </div>
</aside>

<script>
  document.querySelectorAll("[data-side-ad]").forEach((ad) => {
    const closeButton = ad.querySelector(".side-ad__close");

    closeButton?.addEventListener("click", () => {
      ad.hidden = true;
    });
  });
</script>

四、代码逐段说明

1. 正文宽度决定广告位置

.page-content 使用 min() 限制最大宽度，并在窄屏保留页面边距。两侧广告的位置则以视口中心和正文最大宽度为基准计算：广告的内侧边缘位于正文边缘之外，间隔由 --side-ad-gap 控制。

这种写法适用于正文在宽屏下居中、宽度固定上限的布局。如果项目的正文宽度不是 1100 像素，或广告的宽度不是 120 像素，应同步调整 CSS 变量及断点。只改广告宽度、不改定位公式，可能导致广告与正文重叠。

示例中的定位公式使用了正文的最大宽度。屏幕宽度接近断点时，正文可能尚未达到最大宽度，但断点足够大时两侧广告仍有留白。若调整了正文宽度、广告宽度或页面边距，就应在断点附近实际测试，而不是只在大屏上看效果。

2. 为什么使用固定定位

position: fixed 会让广告相对视口定位，页面滚动时保持在视口中的同一位置。示例将其顶部设为 120 像素，这只是演示值。如果页面有固定导航栏，应根据导航高度调整位置；还要检查广告是否遮挡正文中的重要控件。

z-index 用于控制广告与页面其他元素的层叠顺序。不要为了让广告“永远在最上面”而随意设置极大的数值：弹窗、无障碍提示、导航菜单等也需要合理层级。项目应统一管理层叠上下文，并检查祖先元素的 transform、filter 等属性，因为它们可能改变固定定位元素的行为。

3. 为什么在窄屏隐藏

媒体查询中的断点会直接将广告设为 display: none。这样在本示例的窄屏布局中，广告不会覆盖页面正文，也不会作为可见侧栏参与交互。断点不是通用推荐值，应根据真实页面测量：正文所需宽度、广告宽度、广告与正文间距以及边缘留白都要计入。

不要只按某一款手机的屏幕尺寸选择断点。窗口缩放、分屏模式、浏览器侧栏和嵌入式网页都会改变可用视口宽度。建议从较宽桌面逐步缩小窗口，观察广告何时开始挤压内容，并在那个范围内决定切换策略。

4. 关闭按钮与无障碍

示例使用原生 button，而不是用没有键盘语义的 div 模拟按钮。按钮有清楚的文字，并通过 aria-label 指明关闭的是哪一侧广告；用户可以用键盘聚焦并触发。关闭后设置 hidden，元素从页面呈现中隐藏。

关闭按钮位于广告链接之外，可以避免点击关闭时意外触发广告跳转。生产环境还应确认焦点样式清晰可见，不要用 CSS 无条件删除浏览器默认焦点提示。若关闭按钮由第三方素材内部控制，不能随意改写其 DOM，应按供应方提供的接口和规范处理。

5. 示例链接上的属性

广告链接使用 rel="sponsored" 标记商业或赞助链接关系。链接以新标签页打开时，noopener 可阻止新页面通过 window.opener 操作来源页面；noreferrer 会在支持的浏览器中抑制引荐来源信息。是否需要保留或调整这些属性，应结合站点需求、隐私要求和广告平台文档决定。

rel 属性并不能验证目标网址，也不能替代对广告素材、跳转地址或供应商的审查。示例中的 example.com 只是占位地址，发布前应替换成经确认的目标链接，或者直接由广告服务返回合规素材。

五、接入广告平台时的注意事项

上面的卡片只是静态占位内容，不会自动产生广告，也不会模拟任何广告平台的接口。接入平台时，应区分“页面容器代码”和“平台提供的广告代码”：外层容器负责布局，实际广告素材、脚本、参数及请求方式则应按平台文档配置。

• 不要猜测参数名称或尺寸。广告产品可能有各自的广告位编号、尺寸、展示模式、授权要求和脚本加载顺序。只使用供应方文档中明确支持的参数。
• 不要随意改动供应方代码。给第三方广告代码套容器时，先确认该代码允许如何嵌套、定位和缩放。未经支持的 CSS 覆盖可能导致渲染异常，也可能违反平台规则。
• 明确广告身份。广告区域应以适当方式让用户识别，不能将广告伪装成导航、下载按钮、系统提示或正文链接。
• 尊重用户选择与地区要求。如果站点使用广告追踪、个性化广告或其他非必要存储，应按适用法律、用户同意机制和平台要求处理。具体义务取决于站点、用户所在地及所用技术，不能仅凭这段 CSS 判断是否合规。
• 检查广告加载失败的表现。第三方脚本可能被拦截、超时或返回空素材。容器应避免留下大块空白或遮住内容；如何折叠空广告位，应采用平台允许的方式，并测试脚本失败的情形。
• 留意内容安全策略。如果站点设置了 Content Security Policy（CSP），广告服务的脚本、图片、框架或连接请求可能需要相应授权。应按实际供应商域名和请求类型配置策略，不要为了让广告加载而无条件放宽整站安全限制。

广告平台的产品和政策可能变化，涉及尺寸、关闭按钮、刷新频率、诱导点击、脚本加载以及移动端展示等要求时，应以接入当时适用的官方文档和协议为准。本文不提供平台专属参数，也不把示例尺寸说成平台限制。

六、常见错误与排查办法

错误一：广告盖住正文，却只调高 z-index

提高层级只会让广告更明显地压在内容上，并不能解决布局冲突。应先核对正文最大宽度、广告宽度、左右间距和断点。若可用宽度不足，就隐藏侧栏或改用其他布局，而不是继续叠加层级。

错误二：在所有屏幕上都显示两侧广告

桌面端可用的左右空间，在手机、窄窗口和分屏中通常不存在。强行展示会遮挡正文或形成难以点击的窄条。至少要有明确的窄屏策略，并用真实视口尺寸检查，不要依赖缩放网页来“塞下”广告。

错误三：广告高度超过视口

广告素材高度、顶部偏移和底部留白加起来可能大于视口高度。示例使用 max-height: calc(100vh - 24px) 限制外层高度，并设置 overflow: auto，以免容器无限伸出屏幕。若广告内容不应在容器内滚动，应改为根据实际素材尺寸和视口条件控制展示，不要照搬这一处理。

错误四：关闭按钮放进广告链接里

如果按钮嵌套在可点击的广告链接中，用户点击关闭时可能同时触发跳转；用非按钮元素模拟关闭也会影响键盘和辅助技术操作。使用独立的原生按钮，并将其与广告链接分开，是更稳妥的基础做法。

错误五：把用户输入拼进 HTML 字符串

如果广告标题、链接或其他内容来自后台、接口或用户输入，不要未经处理就通过 innerHTML 插入页面。未经转义的字符串可能带来跨站脚本风险。优先使用模板系统的自动转义，或创建 DOM 节点后通过 textContent 设置纯文本；链接目标还应校验协议和允许的来源。广告平台返回的代码也不应被当成可信的普通字符串随意拼接执行。

错误六：把广告占位文案当作真实投放

示例中的“示例广告内容”只是用于查看布局。真实广告通常由平台脚本、素材接口或站点自己的广告系统提供。仅有一条链接不会自动获得广告服务，也不会自动满足广告披露、计费或追踪要求。

错误七：忽略 sticky header、弹窗和其他悬浮组件

广告自身位置正确，也可能与固定导航、聊天入口、cookie 提示或对话框冲突。应在实际页面中检查层叠顺序与空间占用；重要对话框打开时是否隐藏广告、如何处理焦点等，也应纳入交互设计。

七、上线前检查清单

• 宽屏下正文与左右广告之间有明确间距，广告没有压住导航和正文控件。
• 在断点附近缩放窗口，确认广告切换时没有突然重叠或出现横向滚动条。
• 窄屏下广告按预期隐藏或切换，没有遮挡表单、菜单和页面主要操作。
• 广告素材在最大高度、加载失败、脚本被拦截等情况下不会造成严重布局问题。
• 关闭按钮可以用键盘操作，名称清晰，点击关闭不会同时触发广告跳转。
• 广告区域可识别，链接目标已检查，新窗口链接的关系属性符合站点与供应方要求。
• 第三方脚本、数据请求、同意机制和 CSP 配置已经按实际集成方案审核。
• 广告尺寸、参数、刷新与展示方式均以对应平台的现行文档为准，没有把演示值误当成平台规则。

总结

对联广告的核心不在于“左右各放一个固定元素”，而在于让广告只在有足够空间的视口中出现，并且不干扰正文和用户操作。先根据正文与广告的真实尺寸确定定位公式和断点，再处理关闭、键盘访问、链接安全及广告加载失败等情况。本文代码适合作为自有占位布局的起点；真正接入广告服务时，应使用平台支持的素材和参数，并逐项核对适用政策。