本文以国庆节为例，提供一套企业节假日公告页面的完整实现方案。该方案涵盖页面布局设计、双端样式适配及可直接部署的源码，旨在帮助开发者快速落地各类节日通知场景。
效果展示
PC端效果展示：
移动端效果展示：
完整源码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>国庆放假通知</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}html {min-height: 100%;}body {font-family: "Microsoft Yahei", PingFangSC, sans-serif;min-height: 100%;color: #222;position: relative;background: transparent;}body::before{content:"";position: fixed;z-index:-1;top:0;left:0;width:100%;height:100%;background: url("https://mmbiz.qpic.cn/sz_mmbiz_png/ZXQtRibNoDwU2lnBUIbvl1V3CdFsmesk2icKvLYcjrC7prQkoowIdVws0zgHSlsKSSdeS5Oqks3A78UZ7JWsb9qK3DAsUXDRGpIfIp53LLHJs/640?wx_fmt=png&from=appmsg") center / cover no-repeat #d6242a;}.coin-wrap {position: relative;z-index: 5;margin: 0 auto;max-width: 900px;}.coin-title {display: flex;justify-content: center;align-items: center;position: absolute;left: 50%;transform: translateX(-50%);bottom: -42px;z-index: 6;}.coin {width: 84px;height: 84px;border-radius: 50%;background: radial-gradient(circle at 30% 30%, #ffe28a, #f2b134);border: 4px solid #c9473a;display: flex;align-items: center;justify-content: center;position: relative;box-shadow:inset 0 0 0 3px rgba(255, 255, 255, 0.35),inset 0 0 12px rgba(0, 0, 0, 0.18),0 4px 10px rgba(0, 0, 0, 0.25);}.coin + .coin {margin-left: -14px;}.coin span {font-family: "Microsoft Yahei", "PingFang SC", sans-serif;font-size: 52px;font-weight: 900;color: #b31919;letter-spacing: -2px;line-height: 1;width: 100%;text-align: center;text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45);}.notice-card {max-width: 900px;margin: 150px auto 60px;background: rgba(255,233,188,0.92);border-radius: 20px;padding: 70px 36px 42px;position: relative;z-index: 3;}.notice-card p {font-size: 17px;line-height: 1.8;color: #222;margin-bottom: 10px;}.notice-card .highlight {color: #c71f1f;font-weight: bold;}.footer-sign {margin-top: 24px;text-align: right;}@media (max-width: 640px) {body::before{background: url("https://mmbiz.qpic.cn/mmbiz_png/ZXQtRibNoDwXVnvyPKoctCb9YTzNFgkXHCx8TbBZDgxicOWNNdicT7z6S8kuVKd5Iticn0XvPUZ5EGBCjSQ1fZEAzn0bT3gPiaibIy0XZj45Qib2GQ/640?wx_fmt=png&from=appmsg") center / cover no-repeat #d6242a;}.coin {width: 56px;height: 56px;border-width: 3px;}.coin + .coin {margin-left: -8px;}.coin span {font-size: 34px;letter-spacing: -1px;}.coin-title {bottom: -28px;}.outer-wrap{margin-top: 150px !important;}.notice-card {margin-top: 50px;margin-bottom: 50px;padding: 55px 16px 28px;}.notice-card p {font-size: 15px;line-height: 1.75;margin-bottom:8px;}.footer-sign p{margin-bottom:4px;}}</style></head><body><div class="outer-wrap"><div class="coin-wrap"><div class="coin-title"><div class="coin"><span>国</span></div><div class="coin"><span>庆</span></div><div class="coin"><span>放</span></div><div class="coin"><span>假</span></div><div class="coin"><span>通</span></div><div class="coin"><span>知</span></div></div></div><div class="notice-card"><p>尊敬的各位客户、合作伙伴：</p><p>您好！</p><p>值此国庆佳节来临之际，感谢大家长期以来对我司的信任与大力支持。现将2026年国庆节放假安排通知如下：</p><p>放假时间：<span class="highlight">2026年10月1日 — 10月7日，共7天</span></p><p>恢复上班：<span class="highlight">2026年10月8日（星期四）正式复工</span></p><p>放假期间：</p><p>1. 公司业务暂停线下办公，业务咨询、订单处理、项目交付将顺延至节后处理；</p><p>2. 紧急事宜可留存留言，节后我们将第一时间与您对接；</p><p>3. 如有紧急特殊业务，请留存对接人联系方式，非紧急事务建议节后办理。</p><p>祝愿各位客户及合作伙伴国庆安康，阖家欢乐，万事顺遂！</p><div class="footer-sign"><p>XX有限公司</p><p>2026年9月29日</p></div></div></div></body></html>
技术特点
代码采用单HTML结构结合双端独立CSS适配方案，针对性解决了PC端画面裁切、移动端滚动留白及安卓系统兼容异常等常见问题。整体代码轻量，无第三方框架依赖，部署简便。
适用场景
该模板适用于企业公众号节日公告推送，手机端完美适配竖版H5视觉；链接转发至微信电脑端或PC浏览器时，自动渲染为精致的横版布局。此外，通过替换背景图片与文案，即可快速复用于元旦、春节等其他节日页面。
#节日公告