人生若只如初见 - 领酷博客 - 404模板 https://blog.ilingku.com/tag/404%E6%A8%A1%E6%9D%BF/ zh-CN Sun, 26 Apr 2026 12:24:00 +0800 Sun, 26 Apr 2026 12:24:00 +0800 简约清爽的404错误静态页面模板源码 https://blog.ilingku.com/archives/49/ https://blog.ilingku.com/archives/49/ Sun, 26 Apr 2026 12:24:00 +0800 kevin 蓝紫色简约清爽淡雅的404静态页面模板，蓝紫色的背景，通俗易懂的卡通404图片，俏皮可爱与网站整体不违和，再搭配一个标题和两段描述，做成错误页、停靠页甚至是网站维护页面都不错，源码为html页面，记事本修改即可，上传到服务器里面，给自己的网站配置错误页地址即可
Test

Html源代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>页面找不到了404-领酷源码</title>
<link rel="canonical" href="https://www.ilingku.com">
<meta name="description" content="(www.ilingku.com)是一个免费开放的云盘资源共享网站，如音乐、影视、软件、教程、文件等；">
<meta name="keywords" content="网盘 资源,资源分享,阿里云盘论坛,网盘免费,云资源共享,网盘小站,资源,资源搜索">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
<style>
    .system { width:1100px; margin:0 auto; text-align:center; padding-top:140px;  }
    .system img { text-align:center; width:500px;  }
    .title {  }
    .title h2 { color:#fff; font-size:36px; letter-spacing:4px; text-align:center; line-height:120px;  }
    .title h4 { color:#fff; font-size:18px; line-height:38px; text-align:center;  }
    .title li { color:#fff; font-size:13px; line-height:38px; text-align:center;  }
    * { word-wrap:break-word }
    html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset { color:#666; margin:0; padding:0; font-weight:normal;  }
    ul,ol,dl { list-style-type:none }
    html,body { *position:static }
    html { font-family:sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100% }
    address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:400 }
    input,button,textarea,select,optgroup,option { font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit }
    input,button { overflow:visible; vertical-align:middle; outline:none }
    body,th,td,button,input,select,textarea { font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53"; font-size:12px; color:#333; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
    body { line-height:1.6; background:#7395ff;  }
    h1,h2,h3,h4,li,h5,h6 { font-size:100% }
    table { border-collapse:collapse; border-spacing:0;  }
    a,area { outline:none; blr:expression(this.onFocus=this.blur()) }
    a { text-decoration:none; cursor:pointer }
    a:hover { text-decoration:none; outline:none }
    a.ie6:hover { zoom:1 }
    a:focus { outline:none }
    a:hover,a:active { outline:none }
    :focus { outline:none }
    sub,sup { vertical-align:baseline }
    button,input[type="button"],input[type="submit"] { line-height:normal !important;  }
    img { border:0; vertical-align:middle }
    a img,img { -ms-interpolation-mode:bicubic }
    .img-responsive { max-width:100%; height:auto }
    .clears { clear:both;  }
    *html { overflow:-moz-scrollbars-vertical; zoom:expression(function(ele) { ele.style.zoom="1"; document.execCommand("BackgroundImageCache",false,true) }
    (this)) }
    header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend { display:block; margin:0; padding:0 }
    time { display:inline }
    audio,canvas,video { display:inline-block; *display:inline; *zoom:1 }
    audio:not([controls]) { display:none }
    legend { width:100%; margin-bottom:20px; font-size:21px; line-height:40px; border:0; border-bottom:1px solid #e5e5e5 }
    legend small { font-size:15px; color:#999 }
    svg:not(:root) { overflow:hidden }
    fieldset { border-width:0; padding:0.35em 0.625em 0.75em; margin:0 2px; border:1px solid #c0c0c0 }
    input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height:auto }
    input[type="search"] { -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box }
    input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance:none }
    .cl:after,.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden }
    .cl,.clearfix { zoom:1 }
    .fl { float:left;  }
    .fr { float:right;  }
    .footer { height:100px; width:100%; position:fixed; bottom:0; text-align:center;}
</style>
<style id="panai-style">
    .panai-container { z-index: 99999!important }
    .panai-popup { font-size: 14px !important }
    .panai-setting-label { display: flex;align-items: center;justify-content: space-between;padding-top: 20px; }
    .panai-setting-checkbox { width: 16px;height: 16px; }
</style>
<style id="instant-style">
    .instant-popup { font-size: 14px !important; }
    .instant-setting-label { display: flex;align-items: center;justify-content: space-between;padding-top: 15px; }
    .instant-setting-label-col { display: flex;align-items: flex-start;;padding-top: 15px;flex-direction:column }
    .instant-setting-checkbox { width: 16px;height: 16px; }
    .instant-setting-textarea { width: 100%; margin: 14px 0 0; height: 60px; resize: none; border: 1px solid #bbb; box-sizing: border-box; padding: 5px 10px; border-radius: 5px; color: #666; line-height: 1.2; }
    .instant-setting-input { border: 1px solid #bbb; box-sizing: border-box; padding: 5px 10px; border-radius: 5px; width: 100px}
    @keyframes instantAnminate { from { opacity: 1; } 50% { opacity: 0.4 } to { opacity: 0.9; }}
    .link-instanted { animation: instantAnminate 0.6s 1; animation-fill-mode:forwards }
    .link-instanted * { animation: instantAnminate 0.6s 1; animation-fill-mode:forwards }
</style>
</head>
<body class="mdui-loaded">
    <div class="system">
        <img src="https://mdn.alipayobjects.com/open_content/afts/img/A*h31dRqHqHycAAAAAQrAAAAgAelN3AQ">
        <div class="title">
            <h2>Sorry页面找不到了，请返回</h2>
             <h4>www.ilingku.com</a></h4>
        </div>
    </div>
    <div class="footer">
    <p style="font-size:18px;color:#474440">Copyright © 2023-2024. <a href="http://www.ilingku.com/" target="_blank">领酷源码</a> All rights reserved.</p>
    </div>
<!--领酷源码 www.ilingku.com -->
</body>
</html>
]]> 0 https://blog.ilingku.com/archives/49/#comments https://blog.ilingku.com/feed/tag/404%E6%A8%A1%E6%9D%BF/archives/49/ 自适应卡片风格带按钮的404单页源码 https://blog.ilingku.com/archives/48/ https://blog.ilingku.com/archives/48/ Sun, 26 Apr 2026 12:10:00 +0800 kevin 这是一款采用自适应卡片风格设计的404错误页面源码，界面简洁友好，居中展示提示语“迷失方向了吗？”及说明文字。页面底部提供“返回首页”与“联系支持”两个功能按钮，布局清晰、响应迅速，适配各类设备屏幕，帮助用户优雅处理链接失效或页面丢失的情况。
Test

Html源代码

<!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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4f46e5;
            --gray: #6b7280;
            --light-gray: #e5e7eb;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f9fafb;
            color: #111827;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            line-height: 1.5;
            padding: 2rem;
        }
        
        .error-container {
            text-align: center;
            max-width: 500px;
            padding: 3rem;
            background: white;
            border-radius: 1rem;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .error-icon {
            font-size: 5rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }
        
        h1 {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        p {
            color: var(--gray);
            margin-bottom: 2rem;
            font-size: 1.125rem;
        }
        
        .action-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 2rem;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background: #4338ca;
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            border: 1px solid var(--light-gray);
            color: var(--gray);
        }
        
        .btn-secondary:hover {
            background: #f3f4f6;
            transform: translateY(-2px);
        }
        
        @media (max-width: 640px) {
            .error-container {
                padding: 2rem;
            }
            
            .error-icon {
                font-size: 4rem;
            }
            
            h1 {
                font-size: 1.75rem;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .btn {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="error-container">
        <div class="error-icon">
            <i class="fas fa-map-marked-alt"></i>
        </div>
        <h1>迷失方向了吗？</h1>
        <p>我们似乎找不到您要访问的页面。可能是链接已更改或页面已被移除。</p>
        
        <div class="action-buttons">
            <a href="/" class="btn btn-primary">
                <i class="fas fa-home"></i>
                返回首页
            </a>
            <a href="/contact" class="btn btn-secondary">
                <i class="fas fa-envelope"></i>
                联系支持
            </a>
        </div>
    </div>
</body>
</html>
]]> 0 https://blog.ilingku.com/archives/48/#comments https://blog.ilingku.com/feed/tag/404%E6%A8%A1%E6%9D%BF/archives/48/ 黑色迷失在太空404单页HTML源码 https://blog.ilingku.com/archives/47/ https://blog.ilingku.com/archives/47/ Sun, 26 Apr 2026 12:07:00 +0800 kevin 这个名为 “页面迷失在太空” 的404单页源码，以科幻太空为设计主题。页面通过深邃的视觉氛围和“星系”“轨道”等比喻文案，营造出页面丢失的趣味故事感。核心的“返回基地”行动按钮，不仅贴合主题，也清晰指引用户返回。整体风格独特、体验沉浸，适合用于科技或创意类网站。
Test

Html源代码

<!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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --space-blue: #0b0d21;
            --star-yellow: #f9d71c;
            --planet-purple: #6a5acd;
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background-color: var(--space-blue);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }
        
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(1px 1px at 20px 30px, white, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 40px 70px, white, rgba(0,0,0,0)),
                radial-gradient(1px 1px at 90px 40px, white, rgba(0,0,0,0));
            background-repeat: repeat;
            animation: twinkle 5s infinite;
        }
        
        .container {
            text-align: center;
            z-index: 1;
            padding: 2rem;
            max-width: 600px;
        }
        
        .astronaut {
            font-size: 5rem;
            color: white;
            margin-bottom: 1.5rem;
            animation: float 3s ease-in-out infinite;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(90deg, #fff, #a8d8ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        p {
            font-size: 1.1rem;
            margin-bottom: 2rem;
            color: #a8d8ff;
        }
        
        .btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            background: var(--planet-purple);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 500;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        
        .btn:hover {
            background: transparent;
            border-color: var(--planet-purple);
            transform: translateY(-3px);
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes twinkle {
            0% { opacity: 0.8; }
            50% { opacity: 1; }
            100% { opacity: 0.8; }
        }
        
        @media (max-width: 768px) {
            h1 { font-size: 2rem; }
            .astronaut { font-size: 4rem; }
        }
    </style>
</head>
<body>
    <div class="stars"></div>
    <div class="container">
        <div class="astronaut">
            <i class="fas fa-user-astronaut"></i>
        </div>
        <h1>页面迷失在太空</h1>
        <p>我们似乎无法在这个星系中找到您要访问的页面。<br>可能是导航坐标错误或页面已被移出轨道。</p>
        <a href="/" class="btn">
            <i class="fas fa-rocket"></i> 返回基地
        </a>
    </div>
</body>
</html>
]]> 0 https://blog.ilingku.com/archives/47/#comments https://blog.ilingku.com/feed/tag/404%E6%A8%A1%E6%9D%BF/archives/47/ 简约好看拟人化404单页HML源码 https://blog.ilingku.com/archives/46/ https://blog.ilingku.com/archives/46/ Sun, 26 Apr 2026 12:02:49 +0800 kevin 这款404单页采用拟人化设计，语言亲切友好。页面提示“哎呀，页面走丢了！可能是它偷偷溜出去玩了”，以幽默文案缓解用户的访问受阻情绪。页面底部设有醒目的“带我回家”按钮，引导用户一键返回首页，交互简洁清晰，整体风格温馨治愈。
Test

Html源代码

<!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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #ff6b6b;
            --secondary: #4ecdc4;
            --light: #f7fff7;
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: 'Comic Neue', cursive, 'Microsoft YaHei', sans-serif;
            background-color: var(--light);
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        
        .container {
            text-align: center;
            max-width: 600px;
            padding: 2rem;
        }
        
        .illustration {
            width: 200px;
            height: 200px;
            margin: 0 auto 1.5rem;
            position: relative;
        }
        
        .circle {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: var(--primary);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 5rem;
            box-shadow: 0 10px 20px rgba(255, 107, 107, 0.2);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--primary);
        }
        
        p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            color: #555;
        }
        
        .btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            background: var(--secondary);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(78, 205, 196, 0.4);
        }
        
        @media (max-width: 768px) {
            .illustration {
                width: 150px;
                height: 150px;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="illustration">
            <div class="circle">
                <i class="fas fa-search"></i>
            </div>
        </div>
        <h1>哎呀，页面走丢了！</h1>
        <p>我们四处寻找，但就是找不到您要访问的页面。<br>可能是它偷偷溜出去玩了。</p>
        <a href="https://www.ilingku.com" class="btn">
            <i class="fas fa-home"></i> 带我回家
        </a>
    </div>
</body>
</html>
]]> 0 https://blog.ilingku.com/archives/46/#comments https://blog.ilingku.com/feed/tag/404%E6%A8%A1%E6%9D%BF/archives/46/