代码如下，直接复制粘贴就可以了，如果要改颜色就到对应的颜色值处修改：
<!DOCTYPE html>
<html>
<head>
<title>404 </title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.error-message {
font-size: 10rem;
font-weight: bold;
color: #555;
cursor: pointer;
}
.message {
font-size: 2rem;
color: #555;
margin-top: 1rem;
}
.home-link {
font-size: 1.5rem;
color: #555;
text-decoration: underline;
cursor: pointer;
}
.home-link:hover {
color: #000;
}
</style>
</head>
<body>
<div class="error-message" onclick="goToHome()">404</div>
<div class="message">页面丢失了</div>
<p class="home-link" onclick="goToHome()">点击这里返回首页</p>
<script>
function goToHome() {
window.location.href = "首页的链接代码复制到这里";
}
</script>
</body>
</html>
最后的效果如下：
