可用 <details open> + <summary> 实现无 JS 可折叠提示条，真关闭需轻量 JS 删除节点；样式上用 position: fixed 与 body padding-top 协调布局，兼顾可访问性与响应式适配。
怎么用纯 HTML + CSS 实现可关闭的顶部提示条
不需要 JavaScript 也能做，但得靠 <details> + <summary> 模拟“关闭”行为；如果真要点击就消失（非折叠），必须加少量 JS——这是最轻量、兼容性好、不依赖框架的做法。
-
<details>默认展开时需用open属性，否则首次加载是收起状态 -
<summary>里放 × 按钮，用::marker隐藏默认三角，再用伪元素或内联 SVG 替代 - 直接写
display: none在 JS 里删节点更可靠，别用visibility: hidden——它还占布局空间
关闭按钮点击后提示条彻底消失的 JS 写法
监听点击事件最稳妥的方式是委托到父容器，避免多次绑定；删除自身节点比切 class 更干净，尤其当提示条可能动态插入时。
- 给提示条加唯一 class 如
top-alert，按钮用data-dismiss="alert" - JS 里用
document.addEventListener('click', e => { if (e.target.matches('[data-dismiss="alert"]')) { e.target.closest('.top-alert').remove(); } }) - 别用
onclick=""行内事件——维护性差，且 SSR 渲染时容易漏绑
样式上让提示条固定在顶部且不遮挡内容
关键不是 position: fixed，而是它和页面主体之间的间距协调；否则正文第一行会被盖住。
-
top: 0+left: 0+right: 0确保横跨全宽 - 给
<body>加padding-top: 48px（假设提示条高 48px），比用margin-top在首元素上更稳定 - 关闭按钮用
position: absolute右上角定位，top: 8px+right: 12px，避免影响行高计算
移动端适配和键盘可访问性容易被忽略的点
× 按钮必须能用键盘聚焦并回车触发，否则不满足 WCAG 2.1；小屏下文字换行和按钮点击热区也要留够空间。
立即学习“前端免费学习笔记（深入）”；
- 按钮必须有
type="button"，防止表单意外提交 - 加
tabindex="0"和aria-label="关闭提示"，支持键盘操作 - CSS 中用
min-height: 48px而非固定 height，让多行文字撑开区域 - 用
@media (max-width: 768px)把 padding-top 改成 56px，适配 iOS 安全域
<body> 开头、<header> 前面，确保 z-index 足够高且不被其他 fixed 元素遮挡。 
