在前章”什麼是404頁?404錯誤頁有甚麼用處?“裡面有提到,關於404頁面的運用與原理,還沒有看過文章的建議先從上篇開始了解,才能夠真正掌握有關404頁面的技巧。
這一章教大家怎麼放置404頁面,而404頁面中有那些元素是可以客製化調整的。
404頁面在許多整合後台中,稱為“錯誤頁面”,在整合後台點選“錯誤頁面定義”即可開始修改頁面內容。
——————————————以下代碼——————————————-
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta charset=“UTF-8” http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>404-對不起!您訪問的頁面不存在</title>
<style type=“text/css”>
.head404{ width:580px; height:234px; margin:50px auto 0 auto; background:url(https://moomiweb.com/Public/images/head404.png) no-repeat; }
.txtbg404{ width:499px; height:169px; margin:10px auto 0 auto; background:url(https://moomiweb.com/Public/images/txtbg404.png) no-repeat;}
.txtbg404 .txtbox{ width:390px; position:relative; top:30px; left:60px;color:#eee; font-size:13px;}
.txtbg404 .txtbox p {margin:5px 0; line-height:18px;}
.txtbg404 .txtbox .paddingbox { padding-top:15px;}
.txtbg404 .txtbox p a { color:#eee; text-decoration:none;}
.txtbg404 .txtbox p a:hover { color:#FC9D1D; text-decoration:underline;}
</style>
</head>
<body bgcolor=”#494949″>
<div class=“head404”></div>
<div class=“txtbg404”>
<div class=“txtbox”>
<p>對不起,您請求的頁面不存在、或已被刪除、或暫時不可用</p>
<p class=“paddingbox”>請點擊以下網址繼續訪問</p>
<p><a style=“cursor:pointer” οnclick=“history.back()”>返回上一頁面</a></p>
<p><a href=“https://moomiweb.com”>返回網站首頁</a></p>
</div>
</div>
</body>
</html>
———————————————————————————-
將以上代碼貼入“錯誤頁定義”內即可成功擁有404頁面
沐米科技網頁設計,也提供站長的專屬客製化404頁面唷!