當你在搭建自己的網站時,難免會遇到一些錯誤頁面。當用戶訪問這些頁面時,他們可能會感到困惑和失望。但是,如果你能夠展示一個美觀的錯誤頁面,那么你就可以吸引用戶的注意力,同時也可以傳達一個專業和用心的形象。
今天我要分享的就是一個簡潔而美觀的錯誤頁面模板。這個模板仿照了瀏覽器的錯誤頁面,它包括了一個非常友好的提示信息,以及一些實用的鏈接和按鈕,例如:回到首頁、聯系我們等。如果你喜歡這個模板,你可以將其作為你網站的公示頁。
下面是這個模板的代碼:
<!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)。你可以根據自己的需要修改這些元素的文本和樣式,以適應你自己的網站風格。
我想強調的是,一個美觀而友好的錯誤頁面不僅可以幫助用戶更好地理解和解決問題,還可以讓你的網站看起來更專業。希望這個簡單的模板能夠對你有所幫助!