details 不适合做巨幅广告——其语义为可选信息，浏览器默认展开行为、键盘触发、箭头图标、流内定位等均与广告需主动曝光、自定义动效、覆盖层定位等核心需求冲突。
details 不适合做巨幅广告 —— 它语义是“可选信息”，浏览器默认样式和行为（如箭头、键盘空格触发）与广告场景冲突，且无法控制展开方向、动画类型或视觉权重。
为什么不能用 details 做头部巨幅广告
巨幅广告需要主动吸引注意力、支持自定义动效（如滑入、淡入、缩放）、常带关闭按钮和点击跳转，而 details 的设计目标是“用户主动索取信息”，不是“强制曝光”。常见问题包括：
-
summary点击后内容从顶部向下展开，破坏头部视觉重心 - 无法禁用键盘空格/回车触发（对广告是干扰）
- 默认箭头图标无法替换成“×”关闭按钮或品牌 icon
- 不支持
z-index叠加在导航栏之上（details是普通流内元素）
推荐方案：绝对定位 + transform + opacity 动画
头部巨幅广告本质是「覆盖层」，必须脱离文档流，避免挤压 logo 或导航。关键不是写动画，而是结构和定位是否正确：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 广告容器设
position: absolute或position: fixed，父容器需position: relative作为定位上下文 - 初始状态用
transform: translateY(-100%)+opacity: 0，而非display: none（否则无法过渡） - 展开时同时过渡两个属性：
transition: transform 0.4s ease, opacity 0.4s ease - 关闭按钮必须用
button元素，并加type="button"防止表单提交 - 广告区域要加
aria-live="polite"，屏幕阅读器首次加载时能读出“顶部横幅广告已显示”
如何实现自动展开 + 手动关闭逻辑
纯 CSS 无法判断“是否首次访问”，所以 JS 是必要的。但逻辑极简，无需框架：
立即学习“前端免费学习笔记（深入）”；
- 页面加载后检查
localStorage.getItem('ad_closed')，若为'true'则跳过展示 - 调用
element.classList.add('open')触发 CSS 过渡，不要直接改style.transform - 关闭按钮绑定事件，执行：
localStorage.setItem('ad_closed', 'true')+element.classList.remove('open') - 别用
setTimeout延迟展开 —— 用户可能刚打开页面就滚动，应结合IntersectionObserver判断是否进入视口再触发
容易被忽略的移动端细节
巨幅广告在手机上极易误触、遮挡返回按钮、或与系统手势冲突：
- 广告高度建议不超过 viewport 高度的 60%，否则用户无法看到下方内容
- 关闭按钮热区不小于 44×44px，并加
touch-action: manipulation - 禁止在广告内使用
overflow: scroll—— iOS Safari 会禁用整个页面滚动 - 如果广告含视频或 GIF，务必加
loading="lazy"和decoding="async"，防首屏卡顿
