好看的404错误页面

时间：2024-07-01 14:53:28|栏目：HTML/Xhtml|点击：次
<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>404 NOT FOUND</title>
    <style>
        body {            font-family: 'Roboto', Arial, Helvetica, sans-serif;            background-color: #f4f4f9;            color: #333;            margin: 0;            display: flex;            justify-content: center;            align-items: center;            height: 100vh;            text-align: center;            flex-direction: column;
        }        .container {            background: #fff;            padding: 2rem;            border-radius: 20px;            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);            max-width: 600px;            width: 90%;
        }        .logo {            color: #8e8ea0;            padding-bottom: 1.5rem;
        }        .blocked-icon {            color: #ef4444;
        }        .message {            display: flex;            align-items: center;            justify-content: center;            gap: 1rem;            font-size: 1.5rem;            margin-bottom: 1rem;
        }        .explanation {            font-size: 1rem;            line-height: 1.6;            opacity: 0.8;            margin-bottom: 1.5rem;
        }        .explanation a {            color: #007BFF;            text-decoration: none;
        }        .explanation a:hover {            text-decoration: underline;
        }        .image-container {            margin: 1.5rem 0;
        }        .image-container img {            max-width: 100%;            height: auto;            border-radius: 10px;
        }
        hr {            border: 0;            height: 1px;            background: #ddd;            margin: 2rem 0;
        }        footer {            margin-top: 1rem;            font-size: 1rem;            color: #333;            opacity: 0.6;
        }        @media (prefers-color-scheme: dark) {            body {                background-color: #343541;                color: #eee;
            }            .container {                background-color: #444;                color: #eee;
            }            .explanation a {                color: #fff;
            }            footer {                color: #eee;                opacity: 0.6;
            }
        }    </style></head><body>
    <div class="container">
        <div class="message">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="blocked-icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z"/>
            </svg>
            <h3>404 NOT FOUND</h3>
        </div>
        <p class="explanation">你尝试访问一个不存在的文件。<br> You were trying accessing a file doesn't exsist.</p>
    </div>
    <footer>Muidar's Site</footer></body></html>
上一篇：超链接 a href 通过post方式提交表单的方法
栏目：HTML/Xhtml
下一篇：一个好看的网站维护中间页
本文标题：好看的404错误页面
本文地址：https://nb.sd.cn/HTML_Xhtml/271.html
更多HTML/Xhtml
HTML/Xhtml

好看的404错误页面

您可能感兴趣的文章

阅读排行

推荐教程
