用deepseek写了一个404页面,还真的不错!
代码如下:<!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>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f8f9fa;
color: #343a40;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
.container {
max-width: 600px;
padding: 2rem;
}
h1 {
font-size: 5rem;
margin: 0;
color: #6c757d;
}
h2 {
font-size: 2rem;
margin-top: 0;
margin-bottom: 1rem;
}
p {
font-size: 1.2rem;
margin-bottom: 2rem;
line-height: 1.6;
}
a {
display: inline-block;
padding: 0.75rem 1.5rem;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 0.3rem;
transition: background-color 0.3s;
}
a:hover {
background-color: #0056b3;
}
.emoji {
font-size: 3rem;
margin-bottom: 1rem;
}
.countdown {
color: #6c757d;
font-size: 0.9rem;
margin-top: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="emoji">😕</div>
<h1>404</h1>
<h2>页面未找到</h2>
<p>抱歉,您访问的页面不存在或已被移除。<br>请检查URL是否正确,或返回主页。</p>
<a href="/">返回首页</a>
<div class="countdown" id="countdown">5秒后自动返回首页...</div>
</div>
<script>
// 倒计时功能
let seconds = 5;
const countdownElement = document.getElementById('countdown');
const timer = setInterval(function() {
seconds--;
countdownElement.textContent = seconds + '秒后自动返回首页...';
if (seconds <= 0) {
clearInterval(timer);
window.location.href = "/"; // 跳转到首页
}
}, 1000);
</script>
</body>
</html> 可以,还是用的emoji,不是图片 收藏一下,还不错!
页:
[1]