HTML5手机404模板，适配移动端的关键技巧是什么？-网站模板-锦华智联科技

响应式设计：完美适配各种手机屏幕尺寸。
现代美观：采用简洁、友好的设计风格,使用渐变色和微交互。
功能完整：包含返回首页、返回上一页、联系管理员等常用功能。
可定制性强：代码结构清晰，您可以轻松修改文字、颜色和图片。
性能优异：使用 CSS3 动画，无需引入外部 JavaScript 库,加载快速。

代码结构

您只需要将以下代码保存为一个 .html 文件（html）,然后部署到您的网站服务器上即可。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">404 - 页面未找到</title>
    <style>
        /* --- 全局样式 --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
            overflow-x: hidden;
        }
        /* --- 404 数字样式 --- */
        .error-code {
            font-size: 12rem; /* 手机端足够大 */
            font-weight: 900;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
            line-height: 1;
            margin-bottom: 1rem;
            animation: float 3s ease-in-out infinite;
            user-select: none;
        }
        /* --- 浮动动画 --- */
        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0px);
            }
        }
        /* --- 提示信息 --- */
        .error-message {
            font-size: 1.5rem;
            color: #fff;
            margin-bottom: 1rem;
            font-weight: 500;
        }
        .error-description {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 3rem;
            max-width: 90%;
            line-height: 1.6;
        }
        /* --- 按钮容器 --- */
        .button-container {
            display: flex;
            flex-direction: column;
            gap: 1rem; /* 按钮之间的间距 */
            width: 100%;
            max-width: 300px;
        }
        /* --- 按钮通用样式 --- */
        .btn {
            padding: 16px 24px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px; /* 圆角按钮 */
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            outline: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        /* --- 主按钮样式 --- */
        .btn-primary {
            background-color: #fff;
            color: #667eea;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        }
        /* --- 次要按钮样式 --- */
        .btn-secondary {
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            backdrop-filter: blur(10px); /* 毛玻璃效果 */
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .btn-secondary:hover {
            background-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-3px);
        }
        /* --- 图标样式 --- */
        .icon {
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
        }
        /* --- 底部信息 --- */
        .footer {
            position: absolute;
            bottom: 20px;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
        }
        /* --- 响应式调整 --- */
        @media (max-width: 480px) {
            .error-code {
                font-size: 8rem; /* 在小屏幕上减小字体 */
            }
            .error-message {
                font-size: 1.3rem;
            }
            .error-description {
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    <main>
        <!-- 404 错误代码 -->
        <div class="error-code">404</div>
        <!-- 错误提示信息 -->
        <h1 class="error-message">哎呀，页面迷路了</h1>
        <p class="error-description">
            抱歉，您访问的页面不存在或已被移除。<br>
            可能是输入了错误的网址，或者该页面已被删除。
        </p>
        <!-- 操作按钮组 -->
        <div class="button-container">
            <!-- 返回首页按钮 -->
            <a href="/" class="btn btn-primary">
                <svg class="icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
                </svg>
                返回首页
            </a>
            <!-- 返回上一页按钮 -->
            <a href="javascript:history.back();" class="btn btn-secondary">
                <svg class="icon" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                </svg>
                返回上一页
            </a>
        </div>
    </main>
    <!-- 底部信息 -->
    <footer class="footer">
        <p>© 2025 您的网站名称 | 如果问题持续，请联系管理员</p>
    </footer>
</body>
</html>

如何使用和自定义

部署：将上述代码保存为 html，并上传到您网站的根目录（public_html 或 www）或您指定的错误页面目录，您需要在服务器配置中将所有 404 错误重定向到此页面。
修改网站名称：找到 <footer> 标签中的 您的网站名称,替换成您自己的网站名称。
修改颜色：
- 背景渐变色：修改 body 的 background 属性，从 linear-gradient(135deg, #667eea 0%, #764ba2 100%) 改为 linear-gradient(135deg, #f093fb 0%, #f5576c 100%) 可以得到粉色渐变。
- 文字颜色：可以相应地调整 .error-code, .error-message 等元素的颜色,确保在新的背景色下依然清晰可读。
修改文字内容：您可以随意修改 .error-message 和 .error-description 中的任何文字,使其更符合您的品牌风格。
（图片来源网络，侵删）
更换图片/动效：
- 如果您想用一张静态的 404 图片代替数字，可以删除 .error-code 的内容，并替换为 <img src="your-image-path.png" alt="404 Not Found" class="error-image">，然后为 .error-image 添加 CSS 样式（max-width: 80%;）。
- 动画效果由 @keyframes float 和 .error-code 的 animation 属性控制，您可以修改动画名称、时间和方式。

服务器配置示例

为了让您的自定义 404 页面生效，您需要在服务器上进行配置,以下是几种常见服务器的配置方法：

Nginx

在您的 Nginx 配置文件（通常是 nginx.conf 或站点配置文件）中，找到 server 块,添加或修改以下内容：

（图片来源网络，侵删）

error_page 404 /404.html;
location = /404.html {
    internal; # 防止用户直接访问 /404.html
}

Apache

在您的 Apache 配置文件中（通常在 .htaccess 文件中）,添加以下代码：

ErrorDocument 404 /404.html

IIS (Internet Information Services)

在 IIS 管理器中,选择您的网站。
在“功能视图”中，双击“错误页”。
在右侧操作栏，点击“添加”。
设置“错误代码”为 404。
在“响应操作”中选择“URL”，并输入您的 404 页面路径，/404.html。

这个模板为您提供了一个专业且美观的起点,希望能帮助您提升用户体验！