应使用 position: fixed 实现顶部公告栏固定，因其始终可见且不受父容器 overflow 影响；需设 top: 0、width: 100%、z-index ≥ 1000，并为 body 添加 padding-top 避免遮挡正文。
顶部固定用 position: fixed 而不是 sticky
多数人第一反应是用 position: sticky，但公告栏常需「始终可见、不随页面滚动消失」——sticky 在父容器外滚动时可能失效，尤其当父元素有 overflow: hidden 或高度限制时。真正可靠的方案是 position: fixed，配合 top: 0 和 width: 100%。
- 必须加
z-index（建议 ≥ 1000），否则会被导航栏、弹窗等遮盖 - 固定后会脱离文档流，记得给
加padding-top（值 = 公告栏高度），避免正文被遮挡 - 移动端要注意
viewport缩放导致的宽度错位，用left: 0; right: 0替代仅靠width: 100%
颜色醒目 ≠ 无脑加亮色背景
纯黄底黑字、荧光绿配白字看似“醒目”，实际可读性差、伤眼，且不符合 WCAG 对比度要求（正常文本至少 4.5:1）。真正有效的醒目，是通过「对比+留白+视觉权重」组合实现。
- 背景选深灰（如
#2c3e50）+ 白字 + 左侧加竖条高亮色（#e74c3c），比整块红底更克制且专业 - 关键文案用
font-weight: 600或text-shadow: 0 1px 2px rgba(0,0,0,.2)提升辨识度，而非只调大字号 - 禁用
opacity降透明度来“弱化次要信息”——这会直接拉低文字对比度，触发无障碍检测失败
关闭按钮要兼顾点击区与可访问性
公告栏右上角的 × 按钮，常因尺寸小、无焦点样式、缺少语义，导致触屏误点、键盘用户无法操作。
- 点击区域至少 44×44px（iOS 最小触控标准），用
padding扩展，别只靠字体大小撑开 - 必须用
<button type="button"></button>，不能用<div> 或 <code><span></span>，否则屏幕阅读器无法识别为可交互元素 - 添加
aria-label="关闭网站公告"，避免仅靠图标造成语义缺失 - 关闭后建议用
transform: translateY(-100%)+opacity: 0配合过渡，而不是直接display: none，便于 JS 后续判断状态 - 用
clamp(1rem, 2.5vw, 1.125rem)控制字号，让文字在窄屏不挤、宽屏不虚 - 多行公告（含换行符或
<br>）在小屏建议用white-space: normal+line-height: 1.4，别强制单行省略 - 关闭按钮在超小屏（
max-width: 320px）可移至左侧，避免右侧空间不足导致截断
响应式断点要按内容而非设备硬切
很多项目写 @media (max-width: 768px) 就缩字体、堆叠布局，但公告栏文字若只有 20 字，根本不需要在 iPad 上换行；若含链接和时间戳，反而在小屏需优先保信息完整。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是：固定定位后，公告栏的 height 必须可预测——如果内部用 flex 包裹动态内容又没设最小高，JS 插入新公告时可能引发布局抖动。写死 min-height 或用 fit-content 配合 max-height 更稳妥。
