一款不错的额404错误页面源码 - 洛丽糖(0条评论)
日常生活 作品分享 网络收集 辣鸡摄影
一款不错的额404错误页面源码
寻梦xunm| 31| 网络收集
18小时前

这一款不错的404页面是博主的一个域名没有正确解析后，访问发现的，看着不错就个保存了下来，以后可能用得到。

火狐截图_2026-03-02T03-51-29.190Z.png

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>404 - 页面未找到</title>
<meta name="robots" content="noindex, nofollow" />
<style>
/* ============================
   404 · 居中单卡片（企业蓝 · 微调精修）
   - 仅保留中间内容
   - 出错时间 & 出错 URL + 一键复制
   - IE11 安全：为 var() 提供回退；诊断区用 Flex
   ============================ */
:root{
  --brand-600:#2563EB; --brand-700:#1E48CC;
  --ink:#0B1220; --muted:#5B677C;
  --line:#E6EAF2; --card:#FFFFFF; --bg:#F7F9FC;
  --radius-lg:18px;
  --shadow-lg:0 10px 26px rgba(12,28,64,.10), 0 3px 10px rgba(12,28,64,.04);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:#F7F9FC; background:var(--bg);
  color:#0B1220; color:var(--ink);
  font:14px/1.65 "Microsoft YaHei","Segoe UI",system-ui,-apple-system,Arial,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* 舞台：全屏居中，仅一块内容 */
.stage{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
}

/* 主卡片：左文右图（精修留白） */
.panel{
  width:100%;
  max-width:1020px;
  display:flex; align-items:stretch; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
  background:#FFFFFF; background:var(--card);
  border:1px solid #E6EAF2; border:1px solid var(--line);
  border-radius:18px; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}

/* 左侧内容 */
.col-text{ flex:1 1 520px; min-width:320px; padding:26px 26px 20px 26px; }
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  height:24px; padding:0 10px; border-radius:999px;
  background:#EEF3FF; border:1px solid #DCE7FF;
  color:#14336C; font-size:12px; font-weight:700;
}
.kicker .pill{
  width:8px; height:8px; border-radius:50%;
  background:#2563EB; background:var(--brand-600);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

h1{
    margin: 10px 0 4px;
    font-size: 55px;
    line-height: 1;
    letter-spacing: .3px;
    font-weight: 900;
    background: linear-gradient(180deg,#0B1220,#2A3D61);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 18px rgba(15,23,42,.06));
    white-space: nowrap;
}
.subtitle{ margin:0 0 8px; font-size:18px; font-weight:700; color:#12203A; }
.desc{ margin:0 0 4px; color:#5B677C; color:var(--muted); font-size:14px; }

/* 列表紧凑 + 对齐 */
.reason-list{ margin:12px 0 0; padding:0; list-style:none; }
.reason-list li{
  display:flex; gap:10px; align-items:flex-start;
  padding:8px 10px; border:1px solid #E9EEF7; border-radius:10px;
  background:#fff; color:#23314E; font-size:14px;
}
.reason-list li + li{ margin-top:8px; }
.reason-list .dot{
  flex:0 0 7px; width:7px; height:7px; margin-top:7px; border-radius:50%;
  background:#1E48CC; background:var(--brand-700);
}

/* 诊断信息卡（Flex 两列，支持 IE11） */
.diag{
  margin-top:12px; border:1px dashed #D8E2F6; border-radius:10px; background:#FAFCFF;
  padding:10px 12px;
}
.diag-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.diag-title{ font-size:12px; font-weight:800; color:#103063; display:flex; align-items:center; gap:8px; }
.diag-title .badge{ width:8px; height:8px; border-radius:50%; background:#2563EB; background:var(--brand-600); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.copy-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px;
  border-radius:999px; border:1px solid #CBD6EA; background:#fff; color:#1B2B4A; font-size:12px; font-weight:700;
  transition: box-shadow .12s ease, transform .08s ease, background-color .15s ease, border-color .15s ease;
}
.copy-btn:hover{ transform: translateY(-1px); }
.copy-btn:focus, .copy-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.22); }

/* 两列（标签 100px，值 自适应） */
.diag-row{
  display:flex; align-items:center; gap:10px; margin:6px 0;
}
.diag-label{
  width:100px; flex:0 0 100px;
  color:#5A6A86; font-size:12px; text-align:right;
}
.diag-value{
  flex:1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:13px; background:#FFFFFF; border:1px solid #E3EBFA; border-radius:8px; padding:6px 8px; color:#1D2B4A; overflow:auto;
  word-break: break-all;
}

/* 行动按钮（仅“刷新”） */
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.btn{
  -webkit-appearance:none; appearance:none; user-select:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  font-size:14px; font-weight:700;
  transition:transform .08s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease;
  will-change: transform;
}
.btn:focus, .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.22); }
.btn svg{ width:18px; height:18px; }
.btn-primary{
  background:linear-gradient(180deg,#2563EB,#1E48CC); background:linear-gradient(180deg,var(--brand-600),var(--brand-700));
  color:#fff; box-shadow:0 8px 18px rgba(37,99,235,.20);
}
.btn-primary:hover{ transform:translateY(-1px); }

/* 提示（新增）：与诊断信息同色系，克制不抢眼 */
.note{
  margin-top:10px; padding:8px 10px; border:1px dashed #D8E7FF; border-radius:8px;
  background:#F6FAFF; color:#5B677C; font-size:12px;
  display:flex; align-items:flex-start; gap:8px;
}
.note svg{ width:16px; height:16px; flex:0 0 16px; }

/* 右侧插画：断开链接（轻量更干净） */
.col-art{
  flex:1 1 360px; min-width:280px; position:relative;
  background:
    radial-gradient(60% 60% at 18% 18%, rgba(37,99,235,.10), rgba(37,99,235,0) 70%),
    radial-gradient(60% 60% at 88% 10%, rgba(37,99,235,.08), rgba(37,99,235,0) 70%),
    linear-gradient(180deg,#FAFBFF 0%, #F3F7FF 100%);
  border-left:1px solid #E6EAF2; border-left:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.art{
  width:90%; max-width:460px; height:260px;
  background:#FFFFFF; border:1px solid #E2E8F6; border-radius:14px;
  box-shadow:0 12px 28px rgba(16,40,100,.10);
  position:relative; overflow:hidden;
}
.art .band{ position:absolute; top:0; left:0; right:0; height:64px; background:linear-gradient(90deg, rgba(37,99,235,.14), rgba(37,99,235,0) 70%); }
.art .num{ position:absolute; right:-8px; bottom:-16px; font-weight:900; font-size:128px; line-height:1; letter-spacing:3px; color:#EEF2FA; }
.art svg{ position:absolute; inset:0; width:100%; height:100%; }

/* 自适应 */
@media (max-width: 860px){
  .col-text{ padding:22px 18px; }
  h1{ font-size:50px; }
}
@media (max-width: 520px){
  .art{ height:220px; }
  .diag-label{ width:90px; flex-basis:90px; }
}
@media (prefers-reduced-motion: reduce){ .btn, .copy-btn{ transition:none; } }

/* 屏幕阅读器状态文本 */
.status-sr{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
</style>
</head>
<body>

<main class="stage" role="main" aria-labelledby="title" aria-describedby="desc">
  <section class="panel" aria-label="页面未找到">
    <!-- 左侧文案 -->
    <div class="col-text">
      <span class="kicker"><span class="pill" aria-hidden="true"></span> 系统提示</span>
      <h1 id="title">Website Error</h1>
      <p class="subtitle">站点未找到或状态异常</p>
      <p id="desc" class="desc">可能的原因如下，请逐项排查：</p>

      <ul class="reason-list">
        <li><span class="dot" aria-hidden="true"></span>主机控制面板未绑定域名（请确认 <code>www</code> 和 <code>@</code> 已分别绑定）。</li>
        <li><span class="dot" aria-hidden="true"></span>域名解析错误，请检查您的域名 DNS 解析记录是否正确。</li>
        <li><span class="dot" aria-hidden="true"></span>产品到期时间过长，当前域名可能已被解除绑定。</li>
      </ul>

      <!-- 诊断信息（Flex 两列） -->
      <section class="diag" aria-labelledby="diag-title">
        <div class="diag-header">
          <div class="diag-title" id="diag-title"><span class="badge" aria-hidden="true"></span> 诊断信息</div>
          <button type="button" class="copy-btn" id="copyDiag" aria-label="复制诊断信息">
            <!-- copy icon -->
            <svg viewBox="0 0 24 24" fill="none" width="16" height="16" aria-hidden="true">
              <rect x="9" y="9" width="10" height="10" rx="2" stroke="currentColor" stroke-width="2"/>
              <rect x="5" y="5" width="10" height="10" rx="2" stroke="currentColor" stroke-width="2" opacity=".6"/>
            </svg>
            复制
          </button>
        </div>

        <div class="diag-row">
          <div class="diag-label">出错时间</div>
          <div class="diag-value"><time id="err-time" datetime="">—</time></div>
        </div>
        <div class="diag-row">
          <div class="diag-label">出错 URL</div>
          <div class="diag-value" id="err-url">—</div>
        </div>
      </section>

      <!-- 新增提示：请记录诊断信息 -->
      <p class="note" role="note" aria-label="处理建议">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"></circle>
          <path d="M12 7.5v.1m0 3.4v5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
        </svg>
        提示：如有必要，请将上述诊断信息记录并提供给技术人员处理。
      </p>

      <!-- 仅保留刷新按钮 -->
      <div class="actions" role="group" aria-label="页面操作">
        <button type="button" class="btn btn-primary" onclick="location.reload()" aria-label="刷新当前页面">
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M20 7v6h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M20 13a8 8 0 1 1-2.34-5.66L20 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          刷新页面
        </button>
      </div>

      <div class="status-sr" id="live-status" aria-live="polite"></div>
    </div>

    <!-- 右侧插画：断开链接（更克制） -->
    <div class="col-art" aria-hidden="true">
      <div class="art">
        <div class="band"></div>
        <div class="num">404</div>

        <!-- Broken Link Illustration (精简线条) -->
        <svg viewBox="0 0 800 260" role="img" aria-label="断开链接插画">
          <defs>
            <pattern id="dots" width="16" height="16" patternUnits="userSpaceOnUse">
              <circle cx="1" cy="1" r="1" fill="#E6EEFA"/>
            </pattern>
            <linearGradient id="grad" x1="0" x2="1" y1="0" y2="1">
              <stop offset="0%" stop-color="#2563EB"/>
              <stop offset="100%" stop-color="#1E48CC"/>
            </linearGradient>
          </defs>
          <rect x="0" y="0" width="800" height="260" fill="url(#dots)"/>
          <!-- 左链环 -->
          <g transform="translate(188,120) rotate(-14)">
            <rect x="-60" y="-22" rx="16" ry="16" width="200" height="44" fill="#FFFFFF" stroke="#CFE0FF" stroke-width="3"/>
            <rect x="-46" y="-10" rx="9" ry="9" width="172" height="20" fill="#F3F8FF" stroke="#DCE8FF"/>
          </g>
          <!-- 右链环 -->
          <g transform="translate(502,120) rotate(14)">
            <rect x="-60" y="-22" rx="16" ry="16" width="200" height="44" fill="#FFFFFF" stroke="#CFE0FF" stroke-width="3"/>
            <rect x="-46" y="-10" rx="9" ry="9" width="172" height="20" fill="#F3F8FF" stroke="#DCE8FF"/>
          </g>
          <!-- 断裂闪电 & 点缀 -->
          <path d="M394 94 L410 122 L392 134 L408 160" fill="none" stroke="url(#grad)" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round"/>
          <circle cx="392" cy="134" r="3" fill="#2563EB"/>
          <circle cx="404" cy="118" r="2" fill="#2563EB" opacity=".7"/>
          <circle cx="412" cy="146" r="2" fill="#2563EB" opacity=".5"/>
        </svg>
      </div>
    </div>
  </section>
</main>

<script>
/* ========== 诊断信息填充（IE11 兼容写法） ========== */
(function(){
  function pad2(n){ return (n<10 ? '0' : '') + n; }
  function tzOffsetString(d){
    var offMin = d.getTimezoneOffset();
    var totalMin = -offMin; // 东区为正
    var sign = totalMin >= 0 ? '+' : '-';
    var absMin = Math.abs(totalMin);
    var hh = pad2(Math.floor(absMin/60));
    var mm = pad2(absMin%60);
    return 'UTC' + sign + hh + ':' + mm;
  }
  function formatLocal(d){
    return d.getFullYear() + '-' + pad2(d.getMonth()+1) + '-' + pad2(d.getDate()) +
           ' ' + pad2(d.getHours()) + ':' + pad2(d.getMinutes()) + ':' + pad2(d.getSeconds()) +
           ' (' + tzOffsetString(d) + ')';
  }

  var now = new Date();
  var elTime = document.getElementById('err-time');
  var elUrl  = document.getElementById('err-url');
  if (elTime){
    elTime.textContent = formatLocal(now);
    if (now.toISOString){ elTime.setAttribute('datetime', now.toISOString()); }
  }
  if (elUrl){
    var u = (window.location && window.location.href) ? window.location.href : '';
    elUrl.textContent = u; elUrl.setAttribute('title', u);
  }

  // 复制诊断信息（含回退）
  var btn = document.getElementById('copyDiag');
  var live = document.getElementById('live-status');
  function setLive(msg){ if(live){ live.textContent = msg; } }
  function copyText(txt, onDone){
    if (navigator && navigator.clipboard && navigator.clipboard.writeText){
      navigator.clipboard.writeText(txt).then(function(){ onDone(true); }, function(){ fallback(); });
    } else { fallback(); }
    function fallback(){
      var ta = document.createElement('textarea');
      ta.value = txt; ta.style.position = 'fixed'; ta.style.opacity = '0';
      document.body.appendChild(ta); ta.focus(); ta.select();
      try{ onDone( !!document.execCommand('copy') ); }catch(e){ onDone(false); }
      document.body.removeChild(ta);
    }
  }
  function buildDiagText(){
    var t = elTime && elTime.textContent ? elTime.textContent : '';
    var u = elUrl && elUrl.textContent ? elUrl.textContent : '';
    return '出错时间: ' + t + '\n出错URL: ' + u;
  }
  if (btn){
    btn.onclick = function(){
      copyText(buildDiagText(), function(ok){
        setLive(ok ? '已复制诊断信息' : '复制失败，请手动复制');
        var old = btn.textContent || '复制';
        btn.textContent = ok ? '已复制' : '复制失败';
        setTimeout(function(){ btn.textContent = '复制'; }, 1500);
      });
    };
  }
})();
</script>

</body>
</html>
END
免费 模板 css 教程 源码 html js 代码
本站相关资源来自互联网用户收集发布，仅供用于学习和交流。 如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！
0 赞 or 打赏
喜欢就打赏一点
微信 支付宝
上一篇

2025年的最后一天肝出了自己想要的武器

下一篇

没有了

博主自己开发的微博客程序博主自己开发的微博客程序
2025年的最后一天肝出了自己想要的武器

2025年的最后一天肝出了自己想要的武器

366人气14天前
“可修”网址工具导航程序（付费开源）

“可修”网址工具导航程序（付费开源）

374人气26天前
(AI出品，必须能跑)自动填充用户评论信息

(AI出品，必须能跑)自动填充用户评论信息

360人气26天前
更新维护Typecho “简单作品展示“模板

更新维护Typecho “简单作品展示“模板

294人气1个月前
Typecho1.3.0关于如何获取分类的MID

Typecho1.3.0关于如何获取分类的MID

289人气1个月前
使用php对emoji表情进行编码和解码源码教程

使用php对emoji表情进行编码和解码源码教程

455人气1个月前
站内搜索
暂无过往的评论消息
Q Q：1340326824
邮箱：vipshiyi@qq.com
QQ群：422720328
本站没得会员制度，所有资源都有白嫖的方法，且用且珍惜！ 本站相关资源来自互联网用户收集发布，仅供用于学习和交流。 如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！

我的音乐