一個簡單而又漂亮的404頁面原始碼
阿新 • • 發佈:2018-12-23
https://www.daixiaorui.com/read/114.html
複製以上原始碼,儲存到本地為html,就可以看效果了。為了保持好的訪問效果,建議下載 head404.png和txtbg404.png 這兩張圖片到本地,再改一下css裡面對應background的路徑即可。<!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://www.daixiaorui.com/Public/images/head404.png) no-repeat; } .txtbg404{ width:499px; height:169px; margin:10px auto 0 auto; background:url(https://www.daixiaorui.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" onclick="history.back()">返回上一頁面</a></p> <p>》<a href="https://www.daixiaorui.com">返回網站首頁</a></p> </div> </div> </body> </html> </html>