好看高级的404页面源码
比较个性，喜欢的可以试一试
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>404 Not Found</title> <style> *{margin:0;padding:0;box-sizing:border-box;font-family:Consolas,"Microsoft YaHei",monospace;} body{background:#1e1e1e;color:#d4d4d3;display:flex;height:100vh;overflow:hidden;} .editor-container{flex:1;display:flex;flex-direction:column;} .tab-bar{height:35px;background:#2d2d2d;padding:0 10px;display:flex;align-items:center;border-bottom:1px solid #1a1a1a;} .tab{padding:0 12px;height:100%;display:flex;align-items:center;font-size:13px;color:#858585;} .tab.active{background:#1e1e1e;color:#fff;} .editor{flex:1;padding:10px;display:flex;overflow:hidden;} .line-numbers{color:#858585;padding-right:12px;text-align:right;user-select:none;min-width:40px;line-height:1.6;} .code-content{line-height:1.6;font-size:14px;white-space:pre;overflow:hidden;} .cm-comment{color:#6A9955;} .cm-keyword{color:#569CD6;} .cm-type{color:#4EC9B0;} .cm-string{color:#CE9178;} .cm-number{color:#B5CEA8;} .cm-operator{color:#D4D4D4;} .sidebar{width:340px;background:#252526;border-left:1px solid #1a1a1a;display:flex;flex-direction:column;} .sidebar-header{height:35px;padding:0 10px;display:flex;align-items:center;color:#ccc;border-bottom:1px solid #1a1a1a;font-size:13px;} .sidebar-content{flex:1;padding:10px;overflow:hidden;font-size:13px;} .solution-item{padding:3px 0;} .indent1{padding-left:16px;} .indent2{padding-left:32px;} .indent3{padding-left:48px;} .active{background:#094771;color:#fff;} #hackModal{ position:fixed;inset:0;background:#000;color:#0f0;font-size:46px;font-weight:bold; display:flex;align-items:center;justify-content:center;flex-direction:column; z-index:9999;display:none;text-align:center;line-height:1.8; } .flash{animation:flash 0.15s infinite alternate;} @keyframes flash{ 0%{background:#000;color:#0f0;} 100%{background:#ff0000;color:#fff;} } </style> </head> <body> <div> <div> <div class="tab active">RequestManager.cs</div> </div> <div> <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45</div> <div id="code"></div> </div> </div> <div> <div>解决方案资源管理器</div> <div> <div class="solution-item indent1">▶ 解决方案 WebErrorSystem (1 个项目)</div> <div class="solution-item indent1">▼ WebErrorSystem</div> <div class="solution-item indent2">▼ Properties</div> <div class="solution-item indent3">AssemblyInfo.cs</div> <div class="solution-item indent3">Resources.resx</div> <div class="solution-item indent3">Settings.settings</div> <div class="solution-item indent2">▼ References</div> <div class="solution-item indent3">System.Net</div> <div class="solution-item indent3">System.Core</div> <div class="solution-item indent3">System.Web</div> <div class="solution-item indent2">▼ Network</div> <div class="solution-item indent3 active">RequestManager.cs</div> <div class="solution-item indent3">HttpHelper.cs</div> <div class="solution-item indent3">ResponseParser.cs</div> <div class="solution-item indent3">NetConfig.cs</div> <div class="solution-item indent2">▼ Models</div> <div class="solution-item indent3">apiResult.cs</div> <div class="solution-item indent3">ErrorInfo.cs</div> <div class="solution-item indent2">▼ Utils</div> <div class="solution-item indent3">LogHelper.cs</div> <div class="solution-item indent3">jsonUtil.cs</div> <div class="solution-item indent2">app.config</div> <div class="solution-item indent2">Program.cs</div> <div class="solution-item indent2">WebErrorSystem.csproj</div> </div> <div>属性</div> <div> <div><b>文件属性</b></div> <div>文件名: RequestManager.cs</div> <div>完整路径: D:\Projects\WebErrorSystem\Network\</div> <div>文件大小: 5.87 KB</div> <div>创建时间: 2026-03-10 10:25:33</div> <div>修改时间: 2026-03-10 11:12:49</div> <div>访问时间: 2026-03-10 11:12:49</div> <div>只读: 否</div> <div>隐藏: 否</div> <div style="height:10px;"></div> <div><b>高级属性</b></div> <div>生成操作: 编译</div> <div>复制到输出目录: 不复制</div> <div>自定义工具: 无</div> <div>文件格式: UTF-8</div> <div style="height:10px;"></div> <div><b>代码属性</b></div> <div>命名空间: WebErrorSystem.Network</div> <div>类名: RequestManager</div> <div>行数: 89</div> <div>错误计数: 3</div> <div>警告计数: 0</div> </div> </div> <div id="hackModal"> ⚠️ 网页无法打开 ⚠️ <br> 目标服务器拒绝连接 <br> 请求超时 · 主机不可达 <br><br> 404 Not Found </div> <script> const code = `// 尝试打开目标网页 try { string url = "http://liuxingxiaowu.top/"; HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url); request.Timeout = 3000; request.Method = "GET"; // 尝试获取响应 using (HttpWebResponse response = (HttpWebResponse)request.GetResponse()) { if (response.StatusCode != HttpStatusCode.OK) { throw new WebException("网页打开失败"); } } } catch (WebException) { // 服务器无响应 / 网页无法访问 Environment.FailFast("致命错误：网络连接失败，目标主机不可达"); }`; const codeEl = document.getElementById("code"); let i = 0; function type() { if (i < code.length) { let txt = code.slice(0, i + 1); codeEl.innerHTML = highlight(txt); i++; setTimeout(type, 40); } else { let modal = document.getElementById("hackModal"); modal.style.display = "flex"; modal.classlist.add("flash"); } } function highlight(text) { return text .replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">") .replace(/ /g, " ") .replace(/\/\/.*/g, m => `<span>${m}</span>`) .replace(/".*?"/g, m => `<span>${m}</span>`) .replace(/\b(try|catch|string|if|throw|using)\b/g, m => `<span>${m}</span>`) .replace(/\b(HttpWebRequest|WebRequest|Create|HttpWebResponse|GetResponse|HttpStatusCode|WebException|Environment|FailFast)\b/g, m => `<span>${m}</span>`) .replace(/\d+/g, m => `<span>${m}</span>`); } window.onload = type; </script> </body> </html>
