分享一个404页面

Author： Jockie
发布时间：July 30, 2019
1209 views
9 comments
10194 字数
Categories：无处安放

前言

handsome是个非常漂亮，功能使用，UI新颖的主题。but作为一个伪完美主义者来说，太看不顺眼主题自带的404页面。

简单带点丑，所以我就去网上看看有没有和我心意的404模板。~~毕竟白嫖不要钱~~

仿Windows 10蓝屏

微软的win 10蓝屏界面十分的简约，我就喜欢这种简简单单，普普通通的
举个栗子→ https://cohesions.cn/404

自动跳转的倒计时百分比是随机增加到100的，原来的模板是可以点击界面后进入全屏，但是我觉得这个加进来没啥意思（个人喜好），所以我就把进入全屏的那段删了。有喜欢的网友也可以白嫖带走，修改的时候注意页面标题、二维码地址和跳转链接，其他的信息修改就不用说了。

贴上代码↓

<!doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
        <meta name="robots" content="none" />
        <title>404 Page Not Found - Jockie’s Blog</title> #网页标题
        <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        :-webkit-full-screen {
            background-color: #09c !important;
        }

        body {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            overflow: hidden;
            width: 100%;
            height: 100%;
            background-color: #09c;
            color: #fff;
            font-family: Microsoft Yahei, "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .info {
            margin: 5% 8%;
        }

        .event, .more, .help {
            padding-left: 8px;
        }

        .face {
            font-size: 100px;
        }

        p {
            margin: 10px 0;
            padding: 8px 0;
        }

        .event {
            font-size: 50px;
            line-height: 40px;
        }

        .more {
            font-size: 20px;
            line-height: 20px;
        }

        .help {
            position: absolute;
            margin-top: 80px;
            width: 100%;
            height: 150px;
            font-size: 16px;
        }

        .qrcode {
            position: absolute;
            display: block;
            margin-top: 20px;
            width: 125px;
            height: 125px;
            background: url(https://img.cohesions.cn//usr/uploads/2019/07/1248048884.png) no-repeat center center/cover;  #二维码
        }

        .tips {
            position: absolute;
            position: absolute;
            left: 140px;
            display: block;
            line-height: 18px;
        }

        @media screen and (max-width : 981px ){
            .info {
                margin: 30px;
            }

            .event {
                font-size: 18px;
                line-height: 30px;
            }

            .more {
                font-size: 14px;
            }

            .tips {
                font-size: 12px;
            }
        }
        </style>
    </head>
    <body onclick="launchFullScreen(document.documentElement)">
        <div class="info">
            <span class="face">:(</span><br><br>
            <p class="event">
                404 Not Fount
                </p>
                <br />
            <p class="more">
                正在跳转至博客首页   <span id="sec">0</span> %
            </p>

            <div class="help">
                <div class="qrcode"></div>
                <div class="tips">
                    <p>
                        有关此问题的详细信息可以向我反馈
                        <br />
                        <br />
                        QQ  ：44981267
                        <br />
                        <br />
                        Mail：jockielee@cohesions.cn
                        <br />
                        <br />
                        Blog：https://cohesions.cn
                    </p>
               </div>
           </div>
        </div>
        <script type="text/javascript">
        // 随机增加
        function randinc(stage, min, max, begin = true, end = true) {
            var difference = max - min;
            var interval = Math.floor(difference / stage);

            console.log("interval: " + interval);
            var value = [];
            for (var i = 0; i < stage; i++) {
                if (begin && i === 0) {
                    value[i] = min;
                }
                else if (end && (i+1 >= stage)) {
                    value[i] = max;
                }
                else {
                    value[i] = min + interval * i + Math.floor(Math.random() * interval);
                }

                console.log(value[i]);
            }

            return value;
        }



        // 倒计时跳转
        window.onload = function() {
            var sec = 10;
            var last = sec;
            var intervalid;
            var value = randinc(sec + 1, 0, 100);
            intervalid = setInterval(function() {
                console.log("last: " + last);
                if (last === 0) {
                    window.location.href = "https://cohesions.cn"; #跳转链接
                    clearInterval(intervalid);
                }
                document.getElementById("sec").innerHTML = value[sec-last]; 
                last--;
            }, 1000);
        };

        // 禁用右键
        document.oncontextmenu = function() {
            return false;
        }
        </script>
    </body>
    </html>

这里再分享一个森屿大佬的更简单的404页面模板 ↓

举个栗子→：https://isenyu.cn/404.html

贴上代码

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />  

        <title>该页面丢失了</title>
        <style>
        body{
            margin:0;padding:0;
            font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif";
        }
        a, button.submit {
            color:#6E7173;
            text-decoration:none;
            -webkit-transition:all .1s ease-in;
            -moz-transition:all .1s ease-in;
            -o-transition:all .1s ease-in;
            transition:all .1s ease-in;
        }
        a:hover, a:active {
            color:#6E7173;
        }
        .body404{
            position: absolute;
            height: 100%;
            width: 100%;
            background:#fff;
            background-size: auto 100%;
            text-shadow:1px 1px 0 #fff;
        }
        .body-about .body404{
            background:#fff;
        }
        .site-name404 {
            margin: 0 auto;
            text-align: center;
            letter-spacing: 2px;
            font: normal 150px/1 “Helvetica Neue”, Helvetica, Arial;
            color:#444;
        }
        .site-name404 h1{
            margin: 0 0 10px;
            font-size:50px;
            line-height:1.2;
        }
        .title404 span{
            font-size: 15px;
            width: 2px;
        }
        .site-name404 i {
            font-style: normal;
        }
        .title404 p{
            font-size: 20px;
            line-height:1.5;
            margin:0;
            color:#444;
        }
        .info404{
            position: absolute;
            top: 50%;
            text-align: center;
            width: 100%;
            margin-top: -160px;
        }
        .body-about .info404{
            margin-top: -180px;
        }
        #footer404{
            margin-top:30px;
            font-size:10px;
        }
        .index404 {
            margin-top: 24px;
            display: inline-block;
            white-space: nowrap;
            cursor: pointer;
            background: #444;
            letter-spacing: 1px;
            font-size: 14px;
            -moz-user-select: -moz-none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            text-shadow: none;
            border: 1px solid #ccc;
            line-height: 36px;
            text-align: center;
            height: 36px;
            padding: 0 25px;
            border-radius: 16px;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;
            background-color: #fff;
            color: #999;
        }
        .index404:hover{
            color: #F77B83;
            border-color: #F77B83;
            outline-style: none;
        }
        .icon-about{
            padding: 10px 0 25px;
        }
        .icon-about a{
            font-size: 20px;
            margin: 5px;
            color: #fff;
            background-color: #000;
            border-radius: 100%;
            padding: 6px;
        }
        </style>
    </head>
    <body>
        <div class="body404">
            <div class="info404">
                <header id="header404" class="clearfix">
                    <div class="site-name404"><i>404</i>
                    </div>
                </header>
                <section>
                    <div class="title404">
                        <p>有些事也许一开始就是错的！</p>
                    </div><a href="javascript:history.back(-1);" class="index404">点击返回</a>
                </section>
                <footer id="footer404">© 2019</footer>
            </div>
        </div>
</body>
</html>

版权属于：Jockie
本文链接：https://cohesions.cn/Daily/share-a-404-page.html
本站所有原创文章由CC BY-NC-SA 3.0协议许可，转载时须注明出处及本声明

Last modification：August 3rd, 2019 at 04:04 pm

如果觉得我的文章对你有帮助，可以请我喝咖啡

9 comments

JockieAuthor
August 3rd, 2019 at 03:23 pm

严重拉长了我的页面。重要的是我还通过了你的评论。

Reply
1. 森屿博客
  August 3rd, 2019 at 03:28 pm
  
  @Jockie
  那建议你关闭使用Markdown语法吧
  
  Reply
  1. JockieAuthor
    August 3rd, 2019 at 03:32 pm
    
    @森屿博客
    markdown关了有点丑
    
    Reply
  2. JockieAuthor
    August 3rd, 2019 at 03:30 pm
    
    @森屿博客
    要不我编辑一下我的文章，分享一下你的？指个链接到你的404页面上
    
    Reply
    
    森屿博客
    August 3rd, 2019 at 03:34 pm
    
    @Jockie
    https://www.isenyu.cn/404.html
    
    Reply
    
    JockieAuthor
    August 3rd, 2019 at 03:51 pm
    
    @森屿博客
    我把你那条评论丢到垃圾桶里了
    
    Reply
    
    森屿博客
    August 3rd, 2019 at 03:54 pm
    
    @Jockie
    
    Reply
桑先生
July 31st, 2019 at 05:49 pm

哈哈哈哈哈你这真的戏份好足笑死

Reply
1. JockieAuthor
  July 31st, 2019 at 05:54 pm
  
  @桑先生
  ヾ(´･･｀｡)ノ"
  
  Reply

分享一个404页面

Jockie • 2019 年 07 月 30 日

前言

handsome是个非常漂亮，功能使用，UI新颖的主题。but作为一个伪完美主义者来说，太看不顺眼主题自带的404页面。

简单带点丑，所以我就去网上看看有没有和我心意的404模板。~~毕竟白嫖不要钱~~

仿Windows 10蓝屏

微软的win 10蓝屏界面十分的简约，我就喜欢这种简简单单，普普通通的
举个栗子→ https://cohesions.cn/404

贴上代码↓

<!doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
        <meta name="robots" content="none" />
        <title>404 Page Not Found - Jockie’s Blog</title> #网页标题
        <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        :-webkit-full-screen {
            background-color: #09c !important;
        }

        body {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            overflow: hidden;
            width: 100%;
            height: 100%;
            background-color: #09c;
            color: #fff;
            font-family: Microsoft Yahei, "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .info {
            margin: 5% 8%;
        }

        .event, .more, .help {
            padding-left: 8px;
        }

        .face {
            font-size: 100px;
        }

        p {
            margin: 10px 0;
            padding: 8px 0;
        }

        .event {
            font-size: 50px;
            line-height: 40px;
        }

        .more {
            font-size: 20px;
            line-height: 20px;
        }

        .help {
            position: absolute;
            margin-top: 80px;
            width: 100%;
            height: 150px;
            font-size: 16px;
        }

        .qrcode {
            position: absolute;
            display: block;
            margin-top: 20px;
            width: 125px;
            height: 125px;
            background: url(https://img.cohesions.cn//usr/uploads/2019/07/1248048884.png) no-repeat center center/cover;  #二维码
        }

        .tips {
            position: absolute;
            position: absolute;
            left: 140px;
            display: block;
            line-height: 18px;
        }

        @media screen and (max-width : 981px ){
            .info {
                margin: 30px;
            }

            .event {
                font-size: 18px;
                line-height: 30px;
            }

            .more {
                font-size: 14px;
            }

            .tips {
                font-size: 12px;
            }
        }
        </style>
    </head>
    <body onclick="launchFullScreen(document.documentElement)">
        <div class="info">
            <span class="face">:(</span><br><br>
            <p class="event">
                404 Not Fount
                </p>
                <br />
            <p class="more">
                正在跳转至博客首页   <span id="sec">0</span> %
            </p>

            <div class="help">
                <div class="qrcode"></div>
                <div class="tips">
                    <p>
                        有关此问题的详细信息可以向我反馈
                        <br />
                        <br />
                        QQ  ：44981267
                        <br />
                        <br />
                        Mail：jockielee@cohesions.cn
                        <br />
                        <br />
                        Blog：https://cohesions.cn
                    </p>
               </div>
           </div>
        </div>
        <script type="text/javascript">
        // 随机增加
        function randinc(stage, min, max, begin = true, end = true) {
            var difference = max - min;
            var interval = Math.floor(difference / stage);

            console.log("interval: " + interval);
            var value = [];
            for (var i = 0; i < stage; i++) {
                if (begin && i === 0) {
                    value[i] = min;
                }
                else if (end && (i+1 >= stage)) {
                    value[i] = max;
                }
                else {
                    value[i] = min + interval * i + Math.floor(Math.random() * interval);
                }

                console.log(value[i]);
            }

            return value;
        }



        // 倒计时跳转
        window.onload = function() {
            var sec = 10;
            var last = sec;
            var intervalid;
            var value = randinc(sec + 1, 0, 100);
            intervalid = setInterval(function() {
                console.log("last: " + last);
                if (last === 0) {
                    window.location.href = "https://cohesions.cn"; #跳转链接
                    clearInterval(intervalid);
                }
                document.getElementById("sec").innerHTML = value[sec-last]; 
                last--;
            }, 1000);
        };

        // 禁用右键
        document.oncontextmenu = function() {
            return false;
        }
        </script>
    </body>
    </html>

这里再分享一个森屿大佬的更简单的404页面模板 ↓

举个栗子→：https://isenyu.cn/404.html

贴上代码

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />  

        <title>该页面丢失了</title>
        <style>
        body{
            margin:0;padding:0;
            font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif";
        }
        a, button.submit {
            color:#6E7173;
            text-decoration:none;
            -webkit-transition:all .1s ease-in;
            -moz-transition:all .1s ease-in;
            -o-transition:all .1s ease-in;
            transition:all .1s ease-in;
        }
        a:hover, a:active {
            color:#6E7173;
        }
        .body404{
            position: absolute;
            height: 100%;
            width: 100%;
            background:#fff;
            background-size: auto 100%;
            text-shadow:1px 1px 0 #fff;
        }
        .body-about .body404{
            background:#fff;
        }
        .site-name404 {
            margin: 0 auto;
            text-align: center;
            letter-spacing: 2px;
            font: normal 150px/1 “Helvetica Neue”, Helvetica, Arial;
            color:#444;
        }
        .site-name404 h1{
            margin: 0 0 10px;
            font-size:50px;
            line-height:1.2;
        }
        .title404 span{
            font-size: 15px;
            width: 2px;
        }
        .site-name404 i {
            font-style: normal;
        }
        .title404 p{
            font-size: 20px;
            line-height:1.5;
            margin:0;
            color:#444;
        }
        .info404{
            position: absolute;
            top: 50%;
            text-align: center;
            width: 100%;
            margin-top: -160px;
        }
        .body-about .info404{
            margin-top: -180px;
        }
        #footer404{
            margin-top:30px;
            font-size:10px;
        }
        .index404 {
            margin-top: 24px;
            display: inline-block;
            white-space: nowrap;
            cursor: pointer;
            background: #444;
            letter-spacing: 1px;
            font-size: 14px;
            -moz-user-select: -moz-none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            text-shadow: none;
            border: 1px solid #ccc;
            line-height: 36px;
            text-align: center;
            height: 36px;
            padding: 0 25px;
            border-radius: 16px;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;
            background-color: #fff;
            color: #999;
        }
        .index404:hover{
            color: #F77B83;
            border-color: #F77B83;
            outline-style: none;
        }
        .icon-about{
            padding: 10px 0 25px;
        }
        .icon-about a{
            font-size: 20px;
            margin: 5px;
            color: #fff;
            background-color: #000;
            border-radius: 100%;
            padding: 6px;
        }
        </style>
    </head>
    <body>
        <div class="body404">
            <div class="info404">
                <header id="header404" class="clearfix">
                    <div class="site-name404"><i>404</i>
                    </div>
                </header>
                <section>
                    <div class="title404">
                        <p>有些事也许一开始就是错的！</p>
                    </div><a href="javascript:history.back(-1);" class="index404">点击返回</a>
                </section>
                <footer id="footer404">© 2019</footer>
            </div>
        </div>
</body>
</html>

版权属于：Jockie
本文链接：https://cohesions.cn/Daily/share-a-404-page.html
本站所有原创文章由CC BY-NC-SA 3.0协议许可，转载时须注明出处及本声明

分享一个404页面

前言

仿Windows 10蓝屏

贴上代码↓

这里再分享一个森屿大佬的更简单的404页面模板 ↓

贴上代码

9 comments

Leave a Comment Cancel reply

分享一个404页面

小米2S上跑Android 9.0 Pie体验反馈

基于Seafile搭了个私有云

全新的开始

关于解决“wordpress IP验证不当漏洞”方法

分享一个404页面

阿里云安全中心体验报告

感想 | 安装Zabbix4.2.1

关于解决“wordpress IP验证不当漏洞”方法

基于Seafile搭了个私有云

分享一个404页面

前言

仿Windows 10蓝屏

贴上代码↓

这里再分享一个森屿大佬的更简单的404页面模板 ↓

贴上代码