网站建设中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: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #f0f2f5;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            text-align: center;
            line-height: 1.6;
        }
        /* 主容器 */
        .under-construction-container {
            background-color: #ffffff;
            padding: 40px 60px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 90%;
        }
        /* 图标容器 */
        .icon-container {
            margin-bottom: 30px;
        }
        /* 使用SVG图标，清晰且可缩放 */
        .construction-icon {
            width: 100px;
            height: 100px;
            animation: bounce 2s infinite;
        }
        /* 动画效果 */
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-20px);
            }
            60% {
                transform: translateY(-10px);
            }
        }
        /* 标题样式 */
        h1 {
            font-size: 2.5rem;
            color: #2c3e50;
            margin-bottom: 20px;
            font-weight: 600;
        }
        /* 副标题/描述样式 */
        p {
            font-size: 1.1rem;
            color: #7f8c8d;
            margin-bottom: 30px;
        }
        /* 进度条容器 */
        .progress-container {
            background-color: #ecf0f1;
            border-radius: 10px;
            margin-bottom: 30px;
            overflow: hidden;
        }
        /* 进度条 */
        .progress-bar {
            height: 10px;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            border-radius: 10px;
            width: 65%; /* 可以修改这个值来改变进度 */
            animation: progress 3s ease-in-out infinite;
        }
        @keyframes progress {
            0% { width: 65%; }
            50% { width: 75%; }
            100% { width: 65%; }
        }
        /* 联系信息 */
        .contact-info {
            font-size: 1rem;
            color: #95a5a6;
        }
        .contact-info a {
            color: #3498db;
            text-decoration: none;
            font-weight: 500;
        }
        .contact-info a:hover {
            text-decoration: underline;
        }
        /* 响应式设计 */
        @media (max-width: 480px) {
            .under-construction-container {
                padding: 30px 40px;
            }
            h1 {
                font-size: 2rem;
            }
            p {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="under-construction-container">
        <!-- 图标部分 -->
        <div class="icon-container">
            <!-- 这是一个锤子与扳手的SVG图标 -->
            <svg class="construction-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3498db">
                <path d="M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z"/>
            </svg>
        </div>
        <!-- 文字信息部分 -->
        <h1>网站正在建设中</h1>
        <p>我们正在努力打造一个全新的体验，很快就会与您见面，敬请期待！</p>
        <!-- 进度条部分 -->
        <div class="progress-container">
            <div class="progress-bar"></div>
        </div>
        <!-- 联系方式部分 -->
        <p class="contact-info">
            如有紧急事宜，请联系我们：<a href="mailto:contact@example.com">contact@example.com</a>
        </p>
    </div>
</body>
</html>

极简文本版

这个版本非常简单,只包含最核心的信息，加载速度极快。

特点：

（图片来源网络，侵删）

代码最少,几乎没有样式。
非常轻量,适合对性能有极致要求的场景。
直接明了。

代码：

<!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: sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            text-align: center;
            background-color: #f0f0f0;
        }
        .message {
            font-size: 24px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="message">
        <h1>网站正在建设中</h1>
        <p>请稍后再试。</p>
    </div>
</body>
</html>

创意趣味版

这个版本更有趣,使用了打字机效果，能给访客留下更深的印象。

特点：

打字机动画效果。
更活泼的设计风格。
适合创意类或个人项目网站。

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">网站建设中</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            color: #fff;
            font-family: 'Orbitron', monospace;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .content {
            text-align: center;
        }
        h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 2rem;
            letter-spacing: 0.1em;
        }
        .typewriter {
            font-size: 1.5rem;
            margin-bottom: 3rem;
            height: 2em;
            border-right: 3px solid #fff;
            animation: blink 1s infinite;
        }
        @keyframes blink {
            0%, 50% { border-color: #fff; }
            51%, 100% { border-color: transparent; }
        }
        .countdown {
            font-size: 1.2rem;
            color: #a0c4ff;
        }
        .countdown span {
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            margin: 0 0.5rem;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>UNDER CONSTRUCTION</h1>
        <div class="typewriter" id="typewriter"></div>
        <div class="countdown">
            预计上线时间：<span id="days">00</span>天 <span id="hours">00</span>时 <span id="minutes">00</span>分 <span id="seconds">00</span>秒
        </div>
    </div>
    <script>
        // 打字机效果
        const text = "我们正在为您精心打造一个全新的世界，请稍候片刻...";
        const typewriterElement = document.getElementById('typewriter');
        let i = 0;
        function typeWriter() {
            if (i < text.length) {
                typewriterElement.innerHTML += text.charAt(i);
                i++;
                setTimeout(typeWriter, 100);
            }
        }
        typeWriter();
        // 倒计时效果 (请修改目标日期)
        const launchDate = new Date("2025-12-31T23:59:59").getTime();
        function updateCountdown() {
            const now = new Date().getTime();
            const distance = launchDate - now;
            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").innerHTML = days.toString().padStart(2, '0');
            document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
            document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
            document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');
            if (distance < 0) {
                document.querySelector(".countdown").innerHTML = "网站已上线！";
            }
        }
        setInterval(updateCountdown, 1000);
        updateCountdown(); // 立即执行一次
    </script>
</body>
</html>

如何使用这些代码？

选择一个方案：根据您的喜好和网站风格，选择一个最合适的HTML文件。
复制代码：将所选方案的完整代码复制下来。
创建文件：在您的电脑上创建一个新的文本文件，将代码粘贴进去。
保存文件：将文件另存为 index.html。文件名必须是 index.html，这样当有人访问您的网站根目录时，服务器会自动找到这个文件。
：打开 index.html 文件，修改其中的文字，您的网站名称”、“contact@example.com”等，使其符合您的需求。
上传到服务器：将修改后的 index.html 文件通过FTP或其他方式上传到您网站服务器的根目录（通常是 public_html 或 www 目录）。

当有人访问您的域名时,就会看到您设置的“网站正在建设中”页面了。

网站建设中HTML为何显示？

简洁现代版 (推荐)

极简文本版

创意趣味版

如何使用这些代码？

99ANYc3cd6

一体机电脑怎么连接wifi

Word2010电脑版哪里下载？

网站查询 whois，信息怎么查？

google网站趋势

Outlook服务器保留副本如何设置与管理？

网站banner代码怎么写？

phpcms下载网站模板，如何安全高效获取？

网站建设费用怎么算？

DNS地址无法解析怎么办？

DedeCms网站地图生成失败怎么办？

Bootstrap开发网站，如何快速搭建响应式布局？

电脑没有Realtek音频管理器怎么办？

Dell网站设计特色有哪些核心亮点？

Google Earth为何无法连接服务器？

flashfxp 发布网站

html5移动网站制作教程

网站建设中HTML为何显示？

简洁现代版 (推荐)

极简文本版

创意趣味版

如何使用这些代码？

相关推荐

网站banner代码怎么写？