今天给大家分享一个好看自适应的网站维护单页 html 源码，适配手机电脑，非常适合作为网站维护时使用
演示截图
代码
<!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; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://t.alcy.cc/fj') center/cover fixed; padding: 20px; } .container { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-radius: 20px; padding: 40px; max-width: 600px; width: 90%; text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.15); } h1 { color: #fff; margin-bottom: 20px; font-size: 2.2em; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); } p { color: rgba(255, 255, 255, 0.95); line-height: 1.6; margin: 15px 0; font-size: 1.1em; } .time { color: #FFD740; font-weight: 600; font-size: 1.2em; margin: 20px 0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); } .loader { width: 50px; height: 50px; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; margin: 20px auto; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .refresh-btn { background: rgba(255, 255, 255, 0.25); color: #fff; border: none; padding: 12px 30px; border-radius: 30px; font-size: 1em; cursor: pointer; margin-top: 20px; transition: all 0.3s ease; backdrop-filter: blur(4px); font-weight: 500; } .refresh-btn:hover { background: rgba(255, 255, 255, 0.35); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } @media (max-width: 480px) { .container { padding: 25px; } h1 { font-size: 1.8em; } p { font-size: 1em; } } </style></head><body> <div class="container"> <div class="loader"></div> <h1>网站正在维护中</h1> <p>我们正在进行系统升级和维护，以确保为您提供更好的服务体验。</p> <p class="time">预计恢复时间：2025年5月5日</p> <p>地址没变，谢谢！</p> <p>感谢您的耐心等待！</p> <button class="refresh-btn" onclick="location.reload()">刷新页面</button> </div></body></html>