CSS项目实战之网站公告栏_顶部固定与颜色醒目设计

应使用 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 后续判断状态

响应式断点要按内容而非设备硬切

很多项目写 @media (max-width: 768px) 就缩字体、堆叠布局，但公告栏文字若只有 20 字，根本不需要在 ipad 上换行；若含链接和时间戳，反而在小屏需优先保信息完整。

立即学习“前端免费学习笔记（深入）”；

• 用 clamp(1rem, 2.5vw, 1.125rem) 控制字号，让文字在窄屏不挤、宽屏不虚
• 多行公告（含换行符或 <br>）在小屏建议用 white-space: normal + line-height: 1.4，别强制单行省略
• 关闭按钮在超小屏（max-width: 320px）可移至左侧，避免右侧空间不足导致截断

最易被忽略的是：固定定位后，公告栏的 height 必须可预测——如果内部用 flex 包裹动态内容又没设最小高，JS 插入新公告时可能引发布局抖动。写死 min-height 或用 fit-content 配合 max-height 更稳妥。