分享一款好看的404 HTML代码
在网页开发中，404 页面是一个常见的错误页面，当用户访问的页面不存在时，会显示这个页面。一个漂亮的 404 页面不仅可以提升用户体验，还能给用户留下深刻的印象。下面是一款好看的 404 HTML 代码示例：
<!DOCTYPE html>
<html>
<head>
<title>404 - 页面未找到</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f7f7f7;
text-align: center;
}
h1 {
font-size: 3em;
color: #ff0000;
}
.error-container {
margin-top: 200px;
}
.error-image {
display: block;
margin: 1em auto;
width: 150px;
}
</style>
</head>
<body>
<div class="error-container">
<h1>404</h1>
<img class="error-image" src="404-error-image.png" alt="Error Image">
<p>很抱歉，您访问的页面不存在。</p>
<p>请检查您的网址是否正确，或者尝试使用我们的导航菜单来找到您想要的内容。</p>
</div>
</body>
</html>这个 404 页面的设计风格简洁大方，包含了一个醒目的标题“404”，一个表示错误的图片（404-error-image.png 需要你自行替换为实际的图片链接），以及两个解释性的段落。你可以根据实际需求，修改样式和内容，来打造出你自己的独特 404 页面。
在编写 HTML 代码时，注意使用合适的标签和属性，以及清晰的层级结构，这样可以使你的代码更易于阅读和维护。同时，记得为你的 404 页面添加必要的 CSS 和 JavaScript 文件，以实现更好的视觉效果和交互体验。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="3;url=/">
<title>404 页面未找到</title>
<style>
body {
background: #0a0a0a;
color: #e0e0e0;
font-family: 'Segoe UI', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.container {
text-align: center;
max-width: 600px;
padding: 2rem;
}
h1 {
font-size: 8rem;
margin: 0;
opacity: 0.2;
position: relative;
}
h1::after {
content: "404";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #61dafb;
font-weight: bold;
}
p {
font-size: 1.2rem;
line-height: 1.8;
margin: 1rem 0;
}
.glow-text {
text-shadow: 0 0 15px #61dafb;
animation: glow 2s ease-in-out infinite;
}
@keyframesglow {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
</style>
</head>
<body>
<div class="container">
<h1>404</h1>
<p class="glow-text">内容不存在了，不过人生无处不相逢！</p>
<p>正在前往首页 <span id="countdown">3</span> 秒...</p>
<p><a href="/" style="color: #61dafb; text-decoration: none;">立即跳转</a></p>
</div>
<script>
let seconds = 3;
const counter = document.getElementById('countdown');
const timer = setInterval(() => {
seconds--;
counter.textContent = seconds;
if(seconds <= 0) location.reload();
}, 1000);
</script>
</body>
</html>
