一个热衷于科技的苦逼大学毕业生的博客。。。希望你喜欢!记得常来。

windows10蓝屏风格网站404html模板——墨涩网

其他分享 墨涩颓废 10个月前 (01-21) 1029次浏览 已收录 1个评论 扫描二维码

windows10蓝屏风格网站404html模板——墨涩网

404页面是客户端在浏览网页时,服务器无法正常提供信息,或是服务器无法回应,且不知道原因所返回的页面。据说在第三次科技革命之前,互联网的形态就是一个大型的中央数据库,这个数据库就设置在404房间里面。那时候所有的请求都是由人工手动完成的,如果在数据库中没有找到请求者所需要的文件,或者由于请求者写错了文件编号,用户就会得到一个返回信息:room 404 : file not found。404错误信息通常是在目标页面被更改或移除,或客户端输入页面地址错误后显示的页面,人们也就习惯了用404作为服务器未找到文件的错误代码了。今天分享的这个 404 页面是模仿的 Windows 的蓝屏界面,非常清爽。

预览地址

http://www.qhgzfe.com.cn/404.html

html源码

<!–**
* 仿 Windows 蓝屏 404 页面
* 墨涩网
**–>
<!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 – 页面未找到</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
? ? }
? ? /*针对小屏幕的优化*/
? ? @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; ?//这里是倒计时的秒数
? ? var intervalid;
? ? intervalid = setInterval(“cutdown()”, 1000);
? ? function cutdown() {
? ? ? ? if (i == 0) {
? ? ? ? ? ? window.location.href = “http://www.qhgzfe.com.cn/&#8221;; //倒计时完成后跳转的地址
? ? ? ? ? ? clearInterval(intervalid);
? ? ? ? }
? ? ? ? document.getElementById(“mes”).innerHTML = i;
? ? ? ? i–;
? ? }
? ? window.onload = cutdown;
? ? </script>
? ? <span class=”face”>:(</span>
? ? <p>您访问的页面没有找到。<br>
? ? ? ? <span id=”mes”></span> 秒后转至我的个人博客,您可以在那里试着找找您所需要的信息。<br>
<p class=”paddingbox”>或者在倒计时结束前点击以下链接继续浏览网页</p>
? ? <p>》<a style=”cursor:pointer” onclick=”history.back()”>返回上一页面</a></p>
? ? ? ? <span class=”tips”>如果您想了解更多信息,则可以稍后在线搜索此错误: 算了你还是别搜了……</span>
? ? </p>
</body>
</html>

下载地址

https://www.lanzous.com/i2xfg5g


墨涩颓废,版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明windows10蓝屏风格网站404html模板——墨涩网
喜欢 (1)
[[email protected]]
分享 (0)
墨涩颓废
关于作者:
http://www.qhgzfe.com.cn站长
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 本站在用的404
    猪年吉祥2019-02-05 20:53 回复 Windows 10 | Chrome 71.0.3573.0
足球比分直播