Banner
横幅提示
WebMobile上手难度: 容易
横跨页面顶部或底部的一条长条，用来放全局消息。
Live Demo
真的可以点网络连接已断开，内容可能不是最新的
页面内容在这里
你刚才看到的这个：网站顶部那条「网站将于今晚 2:00 维护」的黄色条、App 顶部「当前处于离线模式」的提示条。
它到底是什么
Banner 是 Alert 的「全局版」：它不属于任何具体表单或区域，而是整个应用/网站层面的消息——系统维护、网络异常、版本更新提示。
横幅banner顶部条通栏提示announcement bar
Anatomy · 它由什么组成
Strip条状容器
通栏，色块背景
Icon图标
可省略
Message消息
居中或左对齐
Dismiss关闭
可选 X，用户可关掉
Action操作
「去更新」「重试」
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 影响整个应用的状态（离线、维护中） | 用 |
| 与具体内容无关的全局通知 | 用 |
| 需要用户知晓但不打断操作 | 用 |
| 与某个输入框相关的错误 | 不用 |
Banner 应该出现在内容之前（顶部）。放在页面最底部等于没人看见。
不要用 Banner 做营销——那是落地页横幅的专利，不属于产品界面。
Similar Patterns
别搞混一句话区分：横跨页面顶部或底部的一条长条，用来放全局消息。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在页面顶部加一个全局 Banner：「网络连接已断开，内容可能不是最新的」+「重试」按钮，可手动关闭，关闭状态记到本次会话。
不要只对 AI 说
Bad → Better不要这样对 AI 说
顶部加个提示条。
改成这样说
加全局 Banner（通栏、role=status）：显示「网络连接已断开」+「重试」按钮，可手动关闭且状态存 sessionStorage，监听 online/offline 事件自动显示与替换文案。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。