对联广告是通过position: fixed定位在页面左右两侧的浮动层，需脱离文档流、设置z-index、独立封装可关闭结构，并在移动端禁用或替换为底部横幅。

网页对联广告本质是固定在左右两侧、随页面滚动始终可见的浮动层，不是用传统表格或 Flex 布局“摆”出来的，而是靠 position: fixed + 精确定位实现的。

用 position: fixed 定位左右两个广告容器

对联广告必须脱离文档流，否则会被内容推走或折叠。fixed 是唯一可靠选择（sticky 不支持左右边缘粘性，absolute 会随滚动消失）。

• 左联：设 left: 0，再用 width 和 top 控制尺寸与垂直位置
• 右联：设 right: 0，同理控制宽高和偏移
• 必须显式设置 z-index（建议 ≥ 1000），否则可能被轮播图、弹窗等遮盖
• 注意：若页面有横向滚动条，right: 0 会贴到视口最右，而非页面最右——多数场景这是预期行为

广告内容区域需独立封装并可关闭

每个对联广告应是一个带关闭按钮的独立

，不能把图片直接塞进定位容器里——否则无法单独控制显示/隐藏、动画或事件。

• 结构示例：

  <div class="ad-banner ad-left">
    <div class="ad-content">
      <a href="...">@@##@@</a>
      <button class="ad-close">×</button>
    </div>
  </div>

• .ad-close 绑定点击事件，隐藏父容器（推荐用 display: none 而非 visibility: hidden，避免占位）
• 关闭状态应存入 localStorage，比如键名 ad_left_closed，下次加载时读取并跳过渲染

适配移动端要主动禁用或切换形式

手机屏幕宽度小，左右各放一个 banner 会严重挤压内容，且触控误点率高。不能靠媒体查询“缩放”对联，而应直接隐藏或替换为底部横幅。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 在 CSS 中用 @media (max-width: 768px) 将左右广告设为 display: none
• 如果业务强要求移动端也有广告，改用 position: fixed; bottom: 0; width: 100% 的底部横幅更合理
• 避免用 touchstart 模拟 click 关闭——iOS Safari 对 fixed 元素的 touch 事件有延迟，优先用 click

真正难的不是写出来，而是让关闭逻辑和 localStorage 同步不翻车：用户点了关闭但刷新后又出现，大概率是没处理好存储时机（应在 DOM 更新后立即写入，而不是仅绑定事件），或者 key 名拼错、作用域跨了 iframe。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！