自适应网站维护单页HTML

让豆包AI写了个网站维护单页，底部还有备案号。可以在网站维护的时候用。手机端和PC端自适应。备案号信息/维护信息/网站名称可自行修改。

新建一个空白的文件，命名为index.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>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
 
        /* 维护信息容器样式 */
       .maintenance-container {
            text-align: center;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 8vw; /* 使用相对单位 vw 作为内边距 */
            border-radius: 5vw; /* 使用相对单位 vw 作为圆角 */
            box-shadow: 0 2vw 4vw rgba(0, 0, 0, 0.15); /* 使用相对单位 vw 作为阴影 */
            width: 80%;
            max-width: 600px;
            margin-bottom: 5vw; /* 使用相对单位 vw 作为底部外边距 */
        }
 
        /* 标题样式 */
       .maintenance-container h1 {
            color: #ff4d4f;
            font-size: 8vw; /* 使用相对单位 vw 作为字体大小 */
            margin-bottom: 4vw; /* 使用相对单位 vw 作为底部外边距 */
            text-shadow: 0.4vw 0.4vw 0.8vw rgba(0, 0, 0, 0.1); /* 使用相对单位 vw 作为文字阴影 */
        }
 
        /* 段落样式 */
       .maintenance-container p {
            font-size: 4vw; /* 使用相对单位 vw 作为字体大小 */
            line-height: 1.8;
            margin-bottom: 5vw; /* 使用相对单位 vw 作为底部外边距 */
        }
 
       .maintenance-container p:last-child {
            font-weight: 600;
        }
 
        /* 页脚样式 */
        footer {
            font-size: 3vw; /* 使用相对单位 vw 作为字体大小 */
            color: #666;
            text-align: center;
            padding: 2vw; /* 使用相对单位 vw 作为内边距 */
        }
 
        /* 链接样式 */
        footer a {
            color: #666;
            text-decoration: underline;
        }
 
        /* 链接悬停样式 */
        footer a:hover {
            color: #333;
        }
 
        /* 媒体查询，当屏幕宽度大于 600px 时，使用固定尺寸 */
        @media (min-width: 600px) {
           .maintenance-container {
                padding: 40px;
                border-radius: 15px;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
                margin-bottom: 20px;
            }
 
           .maintenance-container h1 {
                font-size: 3em;
                margin-bottom: 20px;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            }
 
           .maintenance-container p {
                font-size: 1.2em;
                margin-bottom: 25px;
            }
 
            footer {
                font-size: 0.9em;
                padding: 10px;
            }
        }
    </style>
</head>
 
<body>
    <div class="maintenance-container">
        <h1>网站维护中</h1>
        <p>尊敬的用户，我们正在对网站进行必要的维护与优化工作。</p>
        <p>此次维护旨在提升网站的性能、安全性以及用户体验，以更好地服务于您。</p>
        <p>给您带来的不便，我们深表歉意，感谢您的理解与耐心等待！</p>
    </div>
    <footer>
        <p>网站名称：示例网站</p>
        <p>备案号：<a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备12345678号</a></p>
    </footer>
</body>
 
</html>

ShiGuang

自适应网站维护单页HTML

如何更好的利用搜索引擎，查找所需内容

《沙漏的背面》AI诗歌

Comments NOTHING

取消回复

	<!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>
	/* 全局样式 */
	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	color: #333;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	}

	/* 维护信息容器样式 */
	.maintenance-container {
	text-align: center;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 8vw; /* 使用相对单位 vw 作为内边距 */
	border-radius: 5vw; /* 使用相对单位 vw 作为圆角 */
	box-shadow: 0 2vw 4vw rgba(0, 0, 0, 0.15); /* 使用相对单位 vw 作为阴影 */
	width: 80%;
	max-width: 600px;
	margin-bottom: 5vw; /* 使用相对单位 vw 作为底部外边距 */
	}

	/* 标题样式 */
	.maintenance-container h1 {
	color: #ff4d4f;
	font-size: 8vw; /* 使用相对单位 vw 作为字体大小 */
	margin-bottom: 4vw; /* 使用相对单位 vw 作为底部外边距 */
	text-shadow: 0.4vw 0.4vw 0.8vw rgba(0, 0, 0, 0.1); /* 使用相对单位 vw 作为文字阴影 */
	}

	/* 段落样式 */
	.maintenance-container p {
	font-size: 4vw; /* 使用相对单位 vw 作为字体大小 */
	line-height: 1.8;
	margin-bottom: 5vw; /* 使用相对单位 vw 作为底部外边距 */
	}

	.maintenance-container p:last-child {
	font-weight: 600;
	}

	/* 页脚样式 */
	footer {
	font-size: 3vw; /* 使用相对单位 vw 作为字体大小 */
	color: #666;
	text-align: center;
	padding: 2vw; /* 使用相对单位 vw 作为内边距 */
	}

	/* 链接样式 */
	footer a {
	color: #666;
	text-decoration: underline;
	}

	/* 链接悬停样式 */
	footer a:hover {
	color: #333;
	}

	/* 媒体查询，当屏幕宽度大于 600px 时，使用固定尺寸 */
	@media (min-width: 600px) {
	.maintenance-container {
	padding: 40px;
	border-radius: 15px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
	margin-bottom: 20px;
	}

	.maintenance-container h1 {
	font-size: 3em;
	margin-bottom: 20px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
	}

	.maintenance-container p {
	font-size: 1.2em;
	margin-bottom: 25px;
	}

	footer {
	font-size: 0.9em;
	padding: 10px;
	}
	}
	</style>
	</head>

	<body>
	<div class="maintenance-container">
	<h1>网站维护中</h1>
	<p>尊敬的用户，我们正在对网站进行必要的维护与优化工作。</p>
	<p>此次维护旨在提升网站的性能、安全性以及用户体验，以更好地服务于您。</p>
	<p>给您带来的不便，我们深表歉意，感谢您的理解与耐心等待！</p>
	</div>
	<footer>
	<p>网站名称：示例网站</p>
	<p>备案号：<a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备12345678号</a></p>
	</footer>
	</body>

	</html>