当你在搭建自己的网站时,难免会遇到一些错误页面。当用户访问这些页面时,他们可能会感到困惑和失望。但是,如果你能够展示一个美观的错误页面,那么你就可以吸引用户的注意力,同时也可以传达一个专业和用心的形象。
今天我要分享的就是一个简洁而美观的错误页面模板。这个模板仿照了浏览器的错误页面,它包括了一个非常友好的提示信息,以及一些实用的链接和按钮,例如:回到首页、联系我们等。如果你喜欢这个模板,你可以将其作为你网站的公示页。
下面是这个模板的代码:
<!DOCTYPE html>
<html>
<head>
<title>错误页面</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
font-size: 36px;
color: #333;
text-align: center;
margin-top: 100px;
}
p {
font-size: 18px;
color: #666;
text-align: center;
margin-top: 50px;
}
a {
display: block;
font-size: 16px;
color: #fff;
background-color: #337ab7;
border-radius: 5px;
padding: 10px 20px;
width: 200px;
margin: 50px auto 0;
text-align: center;
text-decoration: none;
}
a:hover {
background-color: #286090;
color: #fff;
}
</style>
</head>
<body>
<h1>抱歉,出错了!</h1>
<p>我们的网站正在维护中,请稍后再试。</p>
<a href="/">回到首页</a>
<a href="/contact">联系我们</a>
</body>
</html>
以上代码包括了一个标题(h1)、一段提示信息(p)和两个链接按钮(a)。你可以根据自己的需要修改这些元素的文本和样式,以适应你自己的网站风格。
我想强调的是,一个美观而友好的错误页面不仅可以帮助用户更好地理解和解决问题,还可以让你的网站看起来更专业。希望这个简单的模板能够对你有所帮助!