网站404页面怎么做？404页面的设计与实现（附模板）

2025年10月28日农场开发者 1 浏览

自己怎么做网站404页面？404页面在网站中起着非常重要的作用。

接下来我们将和大家分享404页面的设计与实现，包含一个完整的404页面html模板。网站404页面怎么做？404页面的设计与实现（附模板）

设计思路

清晰说明问题（页面不存在）
提供有用的导航选项
保持与网站整体风格一致
添加一些趣味性元素减少用户挫败感

实现方案

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面未找到 - 404错误</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 800px;
            text-align: center;
            background: white;
            border-radius: 20px;
            padding: 50px 40px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .error-code {
            font-size: 120px;
            font-weight: 800;
            color: #4a6cf7;
            line-height: 1;
            margin-bottom: 10px;
            text-shadow: 3px 3px 0 rgba(74, 108, 247, 0.1);
        }
        
        h1 {
            font-size: 32px;
            margin-bottom: 15px;
            color: #2d3748;
        }
        
        p {
            font-size: 18px;
            color: #718096;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 30px;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background: #4a6cf7;
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: 2px solid #4a6cf7;
        }
        
        .btn:hover {
            background: white;
            color: #4a6cf7;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(74, 108, 247, 0.2);
        }
        
        .btn-secondary {
            background: white;
            color: #4a6cf7;
        }
        
        .btn-secondary:hover {
            background: #4a6cf7;
            color: white;
        }
        
        .search-box {
            max-width: 400px;
            margin: 0 auto 30px;
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            padding: 15px 20px;
            border: 2px solid #e2e8f0;
            border-radius: 50px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .search-box input:focus {
            outline: none;
            border-color: #4a6cf7;
            box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
        }
        
        .search-box button {
            position: absolute;
            right: 5px;
            top: 5px;
            background: #4a6cf7;
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .search-box button:hover {
            background: #3a5bd9;
        }
        
        .illustration {
            max-width: 300px;
            margin: 0 auto;
            opacity: 0.8;
        }
        
        .decoration {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(74, 108, 247, 0.05);
            z-index: 0;
        }
        
        .decoration-1 {
            top: -100px;
            left: -100px;
        }
        
        .decoration-2 {
            bottom: -100px;
            right: -100px;
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 30px 20px;
            }
            
            .error-code {
                font-size: 80px;
            }
            
            h1 {
                font-size: 24px;
            }
            
            p {
                font-size: 16px;
            }
            
            .actions {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 250px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="decoration decoration-1"></div>
        <div class="decoration decoration-2"></div>
        
        <div class="error-code">404</div>
        <h1>哎呀！页面走丢了</h1>
        <p>您要查找的页面可能已被移动、重命名或暂时不可用。</p>
        
        <div class="search-box">
            <input type="text" placeholder="在全站搜索您需要的内容...">
            <button>搜索</button>
        </div>
        
        <div class="actions">
            <a href="/" class="btn">返回首页</a>
            <a href="javascript:history.back()" class="btn btn-secondary">返回上一页</a>
            <a href="mailto:support@example.com" class="btn btn-secondary">联系支持</a>
        </div>
        
        <div class="illustration">
            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <path fill="#4a6cf7" d="M44.7,-76.4C58.1,-69.2,69.4,-58.1,79.2,-44.8C89,-31.5,97.2,-16,99.3,0.7C101.5,17.4,97.7,34.8,88.1,47.4C78.5,60.1,63.2,68,47.3,74.4C31.4,80.9,15.7,85.9,-0.6,86.9C-16.9,87.9,-33.8,85,-47.8,77.1C-61.8,69.3,-72.9,56.5,-80.1,41.6C-87.3,26.7,-90.5,9.7,-89.1,-6.8C-87.7,-23.3,-81.6,-39.3,-71.1,-51.7C-60.6,-64.1,-45.6,-72.9,-30.4,-79.2C-15.2,-85.5,0.2,-89.3,15,-87.8C29.8,-86.3,43.9,-79.5,44.7,-76.4Z" transform="translate(100 100)" />
            </svg>
        </div>
    </div>

    <script>
        // 简单的搜索功能
        document.querySelector('.search-box button').addEventListener('click', function() {
            const query = document.querySelector('.search-box input').value.trim();
            if(query) {
                // 在实际应用中，这里应该跳转到网站的搜索页面
                alert(`搜索: ${query}\n（在实际网站中，这里会跳转到搜索结果页面）`);
            }
        });
        
        // 按回车键也可以搜索
        document.querySelector('.search-box input').addEventListener('keypress', function(e) {
            if(e.key === 'Enter') {
                document.querySelector('.search-box button').click();
            }
        });
        
        // 添加一些动态效果
        document.addEventListener('DOMContentLoaded', function() {
            const errorCode = document.querySelector('.error-code');
            errorCode.style.transform = 'scale(0)';
            errorCode.style.transition = 'transform 0.5s ease';
            
            setTimeout(() => {
                errorCode.style.transform = 'scale(1)';
            }, 300);
        });
    </script>
</body>
</html>

功能特点

清晰的错误提示：大号404错误代码和明确的说明文字
多种导航选项：
- 返回首页按钮
- 返回上一页按钮
- 联系支持链接
搜索功能：用户可以直接在404页面搜索需要的内容
响应式设计：在各种设备上都能良好显示
视觉吸引力：使用渐变背景、阴影和装饰元素提升美观度
交互动画：按钮悬停效果和加载动画增强用户体验

自定义建议

您可以根据自己网站的风格调整以下元素：

颜色方案（修改CSS中的颜色值）
字体（更改font-family）
按钮样式和布局
插图和装饰元素
链接目标（将按钮链接指向您网站的实际页面）

模板

网站404页面怎么做？404页面的设计与实现（附模板）

设计思路

实现方案

功能特点

自定义建议

发表评论 取消回复

发表评论取消回复