404頁(yè)面是客戶端在瀏覽網(wǎng)頁(yè)時(shí)，服務(wù)器無(wú)法正常提供信息，或是服務(wù)器無(wú)法回應(yīng)，且不知道原因所返回的頁(yè)面。據(jù)說(shuō)在第三次科技革命之前，互聯(lián)網(wǎng)的形態(tài)就是一個(gè)大型的中央數(shù)據(jù)庫(kù)，這個(gè)數(shù)據(jù)庫(kù)就設(shè)置在404房間里面。那時(shí)候所有的請(qǐng)求都是由人工手動(dòng)完成的，如果在數(shù)據(jù)庫(kù)中沒(méi)有找到請(qǐng)求者所需要的文件，或者由于請(qǐng)求者寫(xiě)錯(cuò)了文件編號(hào)，用戶就會(huì)得到一個(gè)返回信息：room 404 : file not found。404錯(cuò)誤信息通常是在目標(biāo)頁(yè)面被更改或移除，或客戶端輸入頁(yè)面地址錯(cuò)誤后顯示的頁(yè)面，人們也就習(xí)慣了用404作為服務(wù)器未找到文件的錯(cuò)誤代碼了。今天分享的這個(gè) 404 頁(yè)面是模仿的 Windows 的藍(lán)屏界面，非常清爽。
<!--**
* 仿 Windows 藍(lán)屏 404 頁(yè)面
* 墨澀網(wǎng)
**-->
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1">
? ? <title>404 - 頁(yè)面未找到</title>
? ? <style type="text/css">
? ? body {
? ? ? ? background-color: #0099CC;
? ? ? ? color: #FFFFFF;
? ? ? ? font-family: Microsoft Yahei, "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
? ? ? ? margin-left: 100px;
? ? }
? ? .face {
? ? ? ? font-size: 100px;
? ? }
? ? p{
? ? ? ? font-size: 24px;
? ? ? ? padding: 8px;
? ? ? ? line-height: 40px;
? ? }
? ? .tips {
? ? ? ? font-size: 16px
? ? }
? ? /*針對(duì)小屏幕的優(yōu)化*/
? ? @media screen and (max-width: 600px) {
? ? ? ? body{
? ? ? ? ? ? margin: 0 10px;
? ? ? ? }
? ? ? ? p{
? ? ? ? ? ? font-size: 18px;
? ? ? ? ? ? line-height: 30px;
? ? ? ? }
? ? ? ? .tips {
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? padding-top: 10px;
? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? line-height: 20px;
? ? ? ? }
? ? }
? ? </style>
</head>
<body>
? ? <script>
? ? var i = 5; ?//這里是倒計(jì)時(shí)的秒數(shù)
? ? var intervalid;
? ? intervalid = setInterval("cutdown()", 1000);
? ? function cutdown() {
? ? ? ? if (i == 0) {
? ? ? ? ? ? window.location.href = "http://www.kuoshi.com.cn/"; //倒計(jì)時(shí)完成后跳轉(zhuǎn)的地址
? ? ? ? ? ? clearInterval(intervalid);
? ? ? ? }
? ? ? ? document.getElementById("mes").innerHTML = i;
? ? ? ? i--;
? ? }
? ? window.onload = cutdown;
? ? </script>
? ? <span class="face">:(</span>
? ? <p>您訪問(wèn)的頁(yè)面沒(méi)有找到。<br>
? ? ? ? <span id="mes"></span> 秒后轉(zhuǎn)至我的個(gè)人博客，您可以在那里試著找找您所需要的信息。<br>
<p class="paddingbox">或者在倒計(jì)時(shí)結(jié)束前點(diǎn)擊以下鏈接繼續(xù)瀏覽網(wǎng)頁(yè)</p>
? ? <p>》<a style="cursor:pointer" onclick="history.back()">返回上一頁(yè)面</a></p>
? ? ? <p>》<a href="http://www.kuoshi.com.cn/">返回網(wǎng)站首頁(yè)</a></p>
? ? ? ? <span class="tips">如果您想了解更多信息，則可以稍后在線搜索此錯(cuò)誤: 算了你還是別搜了……</span>
? ? </p>
</body>
</html>
