人生若只如初见 - 领酷博客 - 404模板
https://blog.ilingku.com/tag/404%E6%A8%A1%E6%9D%BF/
-
简约清爽的404错误静态页面模板源码
https://blog.ilingku.com/archives/49/
2026-04-26T12:24:00+08:00
蓝紫色简约清爽淡雅的404静态页面模板，蓝紫色的背景，通俗易懂的卡通404图片，俏皮可爱与网站整体不违和，再搭配一个标题和两段描述，做成错误页、停靠页甚至是网站维护页面都不错，源码为html页面，记事本修改即可，上传到服务器里面，给自己的网站配置错误页地址即可 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>
-
自适应卡片风格带按钮的404单页源码
https://blog.ilingku.com/archives/48/
2026-04-26T12:10:00+08:00
这是一款采用自适应卡片风格设计的404错误页面源码，界面简洁友好，居中展示提示语“迷失方向了吗？”及说明文字。页面底部提供“返回首页”与“联系支持”两个功能按钮，布局清晰、响应迅速，适配各类设备屏幕，帮助用户优雅处理链接失效或页面丢失的情况。 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>
-
黑色迷失在太空404单页HTML源码
https://blog.ilingku.com/archives/47/
2026-04-26T12:07:00+08:00
这个名为 “页面迷失在太空” 的404单页源码，以科幻太空为设计主题。页面通过深邃的视觉氛围和“星系”“轨道”等比喻文案，营造出页面丢失的趣味故事感。核心的“返回基地”行动按钮，不仅贴合主题，也清晰指引用户返回。整体风格独特、体验沉浸，适合用于科技或创意类网站。 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>
-
简约好看拟人化404单页HML源码
https://blog.ilingku.com/archives/46/
2026-04-26T12:02:49+08:00
这款404单页采用拟人化设计，语言亲切友好。页面提示“哎呀，页面走丢了！可能是它偷偷溜出去玩了”，以幽默文案缓解用户的访问受阻情绪。页面底部设有醒目的“带我回家”按钮，引导用户一键返回首页，交互简洁清晰，整体风格温馨治愈。 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>