一个简洁的404界面

自己网站的404、500等界面都用的这个模板，简洁，支持深色模式和国际化，是响应式的

兼容性未知，但应该不算太差

效果图：

Light Mode:

Dark Mode:

Mobile:

代码：

<!DOCTYPE html>
<html>
    <head>
        <title id="title">404-页面不存在</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <style>
            body{--theme_color:rgb(255,75,75);--theme_color_light:rgb(255,175,168);transition:0.3s}.title{font-size:180px;font-weight:100;margin-top:200px;color:var(--theme_color);line-height:180px}.main_box{max-width:100%;margin-left:15%;overflow:hidden;font-family:"PingFang SC","Microsoft Yahei",Helvetica,Arial,sans-serif;-webkit-user-select:none;user-select:none}.line{height:10px;color:var(--theme_color_light);border-top:5px solid;width:100px;margin-top:10px;margin-left:5px}.subtitle{font-size:24px;margin-left:4px;font-weight:700}.desc{color:rgba(0,0,0,0.666);font-size:16px;margin-left:10px}.btn{display:inline-block;margin-top:50px;padding:12px 28px;background-color:var(--theme_color);border-radius:6px;color:white;font-size:18px;text-decoration:none;transition:.25s;cursor:pointer;margin-left:4px}.btn:hover{background-color:var(--theme_color_light)}.contat{color:#000000}.return{color:#ffffff;text-decoration:none}@media (prefers-color-scheme:dark){body{background:rgb(22,22,22);color:white}.desc{color:rgba(255,255,255,0.666)}.contat{color:#ffffff}}@media screen and (max-width:700px){.title{font-size:120px;line-height:120px;margin-top:50px}.main_box{margin-right:5%;margin-left:5%}}@media screen and (max-height:800px) {.title {font-size: 120px;line-height: 120px;margin-top: 50px}.main_box {margin-right: 5%;margin-left: 5%}}
        </style>
    </head>
    <body>
        <div class="main_box">
            <div class="title">
                404
                <div class="line"></div>
            </div>
            <div class="subtitle" id="subtitle">
                页面不存在
            </div>
            <div class="desc" id="desc">
                您遇到了404错误。它意味着您所访问的资源在服务器上不存在。<br>
                如果您是通过输入网址而跳转到此界面，请检查您输入的网址。<br>
                如果您是由点击官方页面上的链接而跳转到此界面，请<a href = "mailto:youmail@example.com" class="contat">联系我们</a>。<br>
            </div>
            <div class="btn" onclick="window.location.href='https\://example.com';">
                <a href="https://example.com" class="return" id="link">返回主页</a>
            </div>
        </div>
        <script>
            //国际化
            lang=navigator.language;
            if(lang=="en" || lang.toLowerCase=="en-us"){
                document.getElementById("desc").innerHTML=`
                You encountered a 404 error. It means that the resource you are accessing does not exist on the server. <br>
                If you jumped to this page by entering a URL, please check whether there is any typo in the URL. <br>
                If you jumped to this page by clicking the link in the official page, please <a href = "mailto:youmail@example.com" class="contat">contact us</a>.<br>`;
                document.getElementById("subtitle").innerHTML="Page Not Found";
                document.title="404 Not Found";
                document.getElementById("link").innerHTML="Back to home";
            }
        </script>
    </body>
</html>
http-status-code-404·templates·html
116 views
Comments
登录后评论
Sign In