为什么需要友好提示页
维护一开，首页、登录、接口会一起停。用户还是原来的收藏、原来的域名，点进去如果是浏览器自带的错误页，第一反应往往是「网站挂了」，下一次就不来了。
说白了：停机是你的安排，用户不知道。友好提示页把「现在不能用」变成「现在在升级，过一会再来」。客服少接一堆「打不开」的电话，品牌也不会被一次 502 带走。
有预计时长更好。本例写成 6 小时，用户能判断今晚还是明天再试，不会隔三分钟狂刷。
友好提示页能起哪些作用
这一页就干三件事：告诉用户现在是维护、大概要多久、请稍后再试。配图先稳住视线，中文给国内用户，英文给看不懂中文的人，同一屏说完，不用跳第二页。
作用可以收成这几条：
1、说明状态：不是故障，是维护升级。
2、给出预期：括号里的时长，用户自己能排时间。
3、拦住误操作：页上没有登录、下单入口，免得维护期还往死接口上撞。
4、留住站点感：用自己的图和文案，别把人丢给服务器默认错误页。
我第一次看也卡了一下，这么简单一页为什么还要单独做。后来发现：Nginx 默认 502、IIS 默认错页，文案还是英文技术句，用户看完只会关标签。自己做一页，至少知道「过几小时再来」。
提示页用到哪些文件
没有 JS。html 和 css 文件名一致，样式用 <link> 引进来。viewport 写在 head 里，手机端那节的媒体查询才生效。
页面就这三样：一个 html、一份 css、一张图。图和两行字包在 .upgrade-box 里，中文用 .systemTip，英文用 .systemTipEn。维护的时候把入口指到 systemUpgrade.html 就行，结束再换回原来的首页。这页别再挂栏目、导航，挂上去用户还以为能点进去办事。
页面结构的完整示例
图片 alt 写成「系统升级中」，图加载失败时还能看见这几个字。路径按站点实际目录改，别把 images/ 写丢。
配图和中英文案怎么排
整页只有一列，从上到下：图 → 中文 → 英文。容器 .upgrade-box 宽 700px，margin: 0 auto 水平居中，text-align: center 让图和两行字都落在中间。
图用 max-width: 100%、height: auto，宽不超过容器，高度按比例走，免得把火箭拉扁。margin-top: 10% 是相对视口往下让一截，别一打开就贴着顶。
中文 .systemTip 24px、#333，是主信息；英文 .systemTipEn 20px、#999，当翻译，颜色浅一档，主次一眼能分开。两行都是 margin-top: 20px，跟图、跟彼此都隔开。
文案本例是「商城维护更新升级中（预计需要6小时），请稍后再试。」业务里把「商城」换成站点名，把 6小时 换成当次窗口。英文同步改，别中文已经是 2 小时、英文还停在 6 hours。这坑我见过不止一次。
移动端响应式如何适配
先保证 head 里有 viewport。没有这句，手机浏览器会按桌面宽度排，再写媒体查询也白写。
断点用 max-width: 767px，盖住常见手机竖屏。进到这条规则后，只改三处：容器宽、图宽、两行字号。
容器从固定 700px 改成 92%，左右各留 4%，加起来 100%，小屏左右不会顶死，也不会出现横向滚动条。图再收到 max-width: 80%，两边再空一点，火箭不会撑满整屏。
字号中文 24px → 18px，英文 20px → 16px。手机上看 24px 一行还行，但中英文叠在一起偏抢；收到 18 / 16，主次还在，屏上也不挤。PC 那套 700px、24px 不用删，媒体查询写在后面，小屏覆盖大屏即可。
接入时这几处别漏：viewport 要带；配图路径和 alt 要有；中英文时长改一处就两处一起改；维护结束把入口切回正式首页。