最近太无聊,搞了个易支付、代刷网、发卡网 太闲了,但是忘了更新,于是就来水一篇文,分享一个自己在用的404页面。
如图:


直接上源码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>OMG!竟然404了</title>
        <meta name="renderer" content="webkit" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
        <link rel="shortcut icon" href="https://www.lkxin.cn/favicon.ico">
        <!--<link rel="stylesheet" type="text/css" href="https://www.lkxin.cn/404/style.css">-->
<!--如果使用下面的行内CSS样式请忽略上面那一行,如需使用外部CSS样式表,请去除上面那一行的注释符号-->
<!--如需调用自己的外部样式表链接,将链接改为本地即可,CSS代码以及放在了下面-->
        <!--如果不懂CSS,就啥也别动-->
        <style>
            *{ padding:0;margin:0;box-sizing:border-box;font-family:"微软雅黑";}
            body,html{width:100%;height:100%;}
            .container{max-width:90%;margin:0 auto;padding:80px 0px; }
            img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
            .bg{display:block;max-width:100%;margin:0px auto;margin:40px auto;}
            .btn{width:400px;margin:0 auto;max-width:100%;margin-top:40px;}
            .btn a{float:left;text-decoration:none;width:46.5%;border:1px solid #5298ff;background:#5298ff;color:#FFF;display:block;height:46px; line-height:44px;text-align:center;font-size:16px;border-radius:3px;overflow:hidden;}
            .btn .goindex{margin-right:7%;}
            .btn .lx{border: 1px solid #d8d8d8;background:#ffffff;color:#8c8c8c;}
            @media screen and (max-width: 500px){
                .btn{ width:85%; }
                .btn a{ width:100%; font-size:15px; height:42px; line-height:42px; }
                .btn .goindex{ margin-right:0; margin-bottom:20px; }
        </style>
    </head>
    <body>
        <div class="container">
            <img class="bg" src="https://pic.lkxin.cn/i/2020/02/15/u4hp0p.png"/>
<!--这里图片调用清酒踏月外链图床资源,也可自行保存本地调用,不懂勿动即可-->
            <div class="btn">
                <h1>404!您访问的网页不在!</h1>
                <br>
                <a href="/" class="goindex">返回首页</a><!--这里可不懂,也可修改为自己的链接-->
                <a onClick="history.back(-1)" class="lx">返回上一页</a>
            </div>
        </div>
    </body>
</html>

如果想自己使用自己的外部CSS样式表链接,请复制下面的CSS代码,并自行创建style.css文件放进去。

*{ padding:0;margin:0;box-sizing:border-box;font-family:"微软雅黑";}
            body,html{width:100%;height:100%;}
            .container{max-width:90%;margin:0 auto;padding:80px 0px; }
            img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
            .bg{display:block;max-width:100%;margin:0px auto;margin:40px auto;}
            .btn{width:400px;margin:0 auto;max-width:100%;margin-top:40px;}
            .btn a{float:left;text-decoration:none;width:46.5%;border:1px solid #5298ff;background:#5298ff;color:#FFF;display:block;height:46px; line-height:44px;text-align:center;font-size:16px;border-radius:3px;overflow:hidden;}
            .btn .goindex{margin-right:7%;}
            .btn .lx{border: 1px solid #d8d8d8;background:#ffffff;color:#8c8c8c;}
            @media screen and (max-width: 500px){
                .btn{ width:85%; }
                .btn a{ width:100%; font-size:15px; height:42px; line-height:42px; }
                .btn .goindex{ margin-right:0; margin-bottom:20px; }

好了,水文完毕,撤退!!!

Last modification:February 15th, 2020 at 06:56 pm
如果觉得我的文章对你有用,请随意赞赏