下面我将为您提供从简单到专业的多种HTML实现方案，并附上详细的代码和解释。
（图片来源网络，侵删）
最简单的基础版
这个版本只包含最核心的信息,适合快速搭建。
特点：
- 纯HTML/CSS，无外部依赖。
- 居中显示文字。
- 简单的动画效果。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">网站建设中 - 您的网站名称</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f0f2f5;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
text-align: center;
}
.content {
padding: 40px;
border-radius: 8px;
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
h1 {
color: #007bff;
margin-bottom: 20px;
}
p {
font-size: 1.1em;
line-height: 1.6;
}
/* 简单的CSS动画 */
.dots::after {
content: '';
animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
0%, 20% { content: ''; }
40% { content: '.'; }
60% { content: '..'; }
80%, 100% { content: '...'; }
}
</style>
</head>
<body>
<div class="content">
<h1>网站正在建设中</h1>
<p>我们正在努力为您打造一个全新的体验，<br>网站即将精彩上线，敬请期待<span class="dots"></span></p>
</div>
</body>
</html>
现代简约版（推荐）
这个版本设计更现代,信息更丰富，并包含了访客互动功能（订阅通知）。
（图片来源网络，侵删）
特点：
- 使用现代CSS布局（Flexbox）。
- 添加了进度条动画,增加视觉趣味性。
- 提供了“通知我”的表单，将访客转化为潜在客户。
- 响应式设计,在手机上也能良好显示。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">网站即将上线 - 您的网站名称</title>
<style>
/* --- 基础样式 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
.container {
max-width: 600px;
width: 100%;
}
.logo-placeholder {
width: 100px;
height: 100px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
margin: 0 auto 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3em;
}
h1 {
font-size: 2.5em;
margin-bottom: 15px;
font-weight: 300;
}
.subtitle {
font-size: 1.2em;
margin-bottom: 40px;
opacity: 0.9;
}
/* --- 进度条 --- */
.progress-bar {
width: 100%;
height: 6px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
margin-bottom: 50px;
overflow: hidden;
}
.progress {
height: 100%;
width: 0%;
background-color: #fff;
border-radius: 3px;
animation: fillProgress 3s ease-out forwards;
}
@keyframes fillProgress {
from { width: 0%; }
to { width: 75%; } /* 可以设置成任意进度 */
}
/* --- 表单 --- */
.form-container {
background-color: rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 10px;
backdrop-filter: blur(10px);
}
.form-container p {
margin-bottom: 20px;
font-size: 1.1em;
}
.email-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.email-input {
padding: 15px;
border: none;
border-radius: 5px;
font-size: 1em;
text-align: center;
}
.submit-btn {
padding: 15px;
border: none;
border-radius: 5px;
background-color: #fff;
color: #2575fc;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: transform 0.2s;
}
.submit-btn:hover {
transform: scale(1.05);
}
/* --- 响应式设计 --- */
@media (max-width: 480px) {
h1 { font-size: 2em; }
.subtitle { font-size: 1em; }
.form-container { padding: 20px; }
}
</style>
</head>
<body>
<div class="container">
<div class="logo-placeholder">🚀</div>
<h1>我们即将到来</h1>
<p class="subtitle">一个全新的网站正在精心打造中，很快就会与您见面。</p>
<div class="progress-bar">
<div class="progress"></div>
</div>
<div class="form-container">
<p>想第一时间获取上线通知吗？留下您的邮箱吧！</p>
<form class="email-form" onsubmit="handleFormSubmit(event)">
<input
type="email"
class="email-input"
placeholder="请输入您的邮箱地址"
required
>
<button type="submit" class="submit-btn">通知我</button>
</form>
</div>
</div>
<script>
function handleFormSubmit(event) {
event.preventDefault(); // 阻止表单默认提交行为
const emailInput = event.target.querySelector('.email-input');
const email = emailInput.value;
// 这里是模拟，实际项目中你需要将邮箱发送到服务器
alert(`感谢您的关注！我们已将 ${email} 加入通知列表，`);
// 清空输入框
emailInput.value = '';
}
</script>
</body>
</html>
专业版（使用Bootstrap框架）
如果您希望快速构建一个功能更丰富、更专业的页面，可以使用像Bootstrap这样的前端框架。
特点：
（图片来源网络，侵删）
- 借助Bootstrap的强大组件,实现专业效果。
- 包含倒计时功能,增加紧迫感和期待感。
- 图标使用Font Awesome，视觉效果更佳。
- 结构清晰,易于扩展。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">新版本即将发布 - YourBrand</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
body {
background: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%);
font-family: 'Poppins', sans-serif;
color: #333;
min-height: 100vh;
display: flex;
align-items: center;
}
.coming-soon-card {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 50px;
text-align: center;
max-width: 600px;
width: 100%;
margin: 0 auto;
}
.brand-logo {
font-size: 3rem;
font-weight: bold;
color: #ee9ca7;
margin-bottom: 20px;
}
.countdown {
display: flex;
justify-content: center;
gap: 20px;
margin: 40px 0;
}
.countdown-item {
background-color: #f8f9fa;
padding: 20px;
border-radius: 10px;
min-width: 80px;
}
.countdown-number {
font-size: 2.5rem;
font-weight: bold;
color: #ee9ca7;
display: block;
}
.countdown-label {
font-size: 0.9rem;
color: #6c757d;
text-transform: uppercase;
}
.social-icons a {
color: #6c757d;
font-size: 1.5rem;
margin: 0 10px;
transition: color 0.3s;
}
.social-icons a:hover {
color: #ee9ca7;
}
</style>
</head>
<body>
<div class="container">
<div class="coming-soon-card">
<div class="brand-logo">
<i class="fas fa-rocket"></i> YourBrand
</div>
<h1>新版本，即将到来</h1>
<p class="lead">我们正在为您准备一场前所未有的体验，请稍等片刻...</p>
<!-- 倒计时 -->
<div class="countdown" id="countdown">
<div class="countdown-item">
<span class="countdown-number" id="days">00</span>
<span class="countdown-label">天</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="hours">00</span>
<span class="countdown-label">时</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="minutes">00</span>
<span class="countdown-label">分</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="seconds">00</span>
<span class="countdown-label">秒</span>
</div>
</div>
<p class="mb-4">订阅我们的通讯，第一时间获取上线信息！</p>
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="您的邮箱地址" aria-label="Recipient's email">
<button class="btn btn-primary" type="button">订阅</button>
</div>
<hr>
<div class="social-icons mt-4">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// 设置上线日期 ( 2025年12月31日)
const launchDate = new Date("Dec 31, 2025 23:59:59").getTime();
function updateCountdown() {
const now = new Date().getTime();
const distance = launchDate - now;
if (distance < 0) {
document.getElementById("countdown").innerHTML = "网站已上线！";
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("days").innerText = String(days).padStart(2, '0');
document.getElementById("hours").innerText = String(hours).padStart(2, '0');
document.getElementById("minutes").innerText = String(minutes).padStart(2, '0');
document.getElementById("seconds").innerText = String(seconds).padStart(2, '0');
}
// 立即执行一次，然后每秒更新
updateCountdown();
setInterval(updateCountdown, 1000);
</script>
</body>
</html>
如何选择和使用？
- 直接复制粘贴：选择你喜欢的方案，将全部代码复制到一个新的文本文件中。
- 保存文件：将文件另存为
index.html，这个文件名是网站服务器的默认首页文件。 - ：将代码中的
您的网站名称、邮箱、社交媒体链接等占位符替换成你自己的信息。 - 上传到服务器：将这个
index.html文件上传到你网站的根目录下，当用户访问你的域名时，就会自动显示这个页面。
重要提示：一旦你的网站正式上线，请务必删除或重命名这个 index.html 文件，否则访客会一直看到这个“建设中”的页面，你可以将其重命名为 under-construction.html 作为备份。
