极简404页面HTML模板适用于任何网站或项目

极简 404 页面 HTML 模板是一款非常简洁的静态 HTML 页面，适用于任何网站或项目。该模板只包含一个主要区域，用于显示 404 错误消息和提示用户如何解决问题。

该模板的设计风格简约、现代、直观，包含少量 CSS 样式规则，可以轻松自定义。在代码实现方面，该模板基于 HTML5 和 CSS3 构建，使用流行的 Flexbox 布局技术进行布局。

该模板不仅易于使用和自定义，还可以快速加载并在任何设备上正确显示。此外，该模板不依赖于任何 JavaScript 或服务器端代码，因此非常易于集成到您的项目中。

源代码：

<!DOCTYPE html>
<html>
<script type="text/javascript">
    function loc() {
        var browserLanguage = (navigator.language) ? navigator.language : navigator.userLanguage;

        var t, h, p;

        switch (browserLanguage.toLowerCase()) {
            case "en-us":
                t = "WAP Websites - Site Error";
                h = "Error 404 - Web Site not found!";
                p = "The site you have attempted to reach is not available.";
                break;
            case "de-de":
                t = "WAP Websites - Site Error";
                h = "Fehler 404-Website nicht gefunden!";
                p = "Die Webseite, die Sie versucht haben, zu erreichen ist nicht verfügbar";
                break;
            case "es-es":
                t = "WAP Websites - Site Error";
                h = "Error 404 - ¡Sitio inexistente!";
                p = "El sitio que ha intentado visitar, no se encuentra disponible.";
                break;
            case "fr-fr":
                t = "WAP Websites - Site Error";
                h = "Erreur 404 – Site Web non trouvé !";
                p = "Le site que vous avez tenté d'atteindre n'est pas disponible";
                break;
            case "it-it":
                t = "WAP Websites - Site Error";
                h = "Errore 404 – sito non trovato!";
                p = "Si è tentato di raggiungere il sito non è disponibile";
                break;
            case "ja-jp":
                t = "WAP Websites - Site Error";
                h = "エラー 404-Web サイトが見つかりません！";
                p = "到達しようとしているサイトが使用できません。";
                break;
            case "ko-kr":
                t = "WAP Websites - Site Error";
                h = "오류 404-웹 사이트를 찾을 수 없습니다!";
                p = "에 도달 하려고 했습니다 사이트는 사용할 수 없습니다.";
                break;
            case "pt-br":
                t = "WAP Websites - Site Error";
                h = "Erro 404 – Web Site não encontrado!";
                p = "O site que você tentou chegar, não está disponível";
                break;
            case "ru-ru":
                t = "WAP Websites - Site Error";
                h = "Ошибка 404 - Сайт не найден!";
                p = "Сайт не найден.";
                break;
            case "zh-hans":
                t = "WAP Websites - Site Error";
                h = "错误 404 – 网站上找不到 ！";
                p = "您已尝试达到该网站不可用";
                break;
            case "zh-hant":
                t = "WAP Websites - Site Error";
                h = "錯誤 404 – 網站上找不到 ！";
                p = "您已嘗試達到該網站不可用";
                break;
            default:
                t = "WAP Websites - Site Error";
                h = "Error 404 - Web Site not found!";
                p = "The site you have attempted to reach is not available.";
        }

        document.title = t;
        document.getElementById("siteCreated").innerHTML = h;
        document.getElementById("goDo").innerHTML = p;
    }
</script>
<head><title>WAP Websites - Site Error</title>
<style type="text/css">
    html  { height: 100%; width: 100%; }
    #feature { width: 960px; margin: 95px auto 0 auto; overflow: auto; }     
    #content { font-family: "Segoe UI"; font-weight: normal; font-size: 26px; color: #ffffff; float: left; width: 460px; margin-top: 68px; margin-left: 0px; vertical-align: middle; }
    #content h1 { font-family: "Segoe UI Light"; color: #ffffff; font-weight: normal; font-size: 70px; line-height: 48pt; width: 800px; }
    p a, p a:visited, p a:active, p a:hover { color: #ffffff; }
    #content a.button { background: #0DBCF2; border: 1px solid #FFFFFF; color: #FFFFFF; display: inline-block; font-family: Segoe UI; font-size: 24px; line-height: 46px; margin-top: 10px; padding: 0 15px 3px; text-decoration: none; }
    #content a.button img { float: right; padding: 10px 0 0 15px; }    
    #content a.button:hover { background: #1C75BC; }
</style>
</head>
<body bgcolor="#00abec" onload="loc();">
  <div id="feature">
    <div id="content">
      <h1 id="siteCreated">Error 404 - Web Site not found!</h1>
      <p id="goDo">The site you have attempted to reach is not available.</p>
    </div>
  </div>
</body>
</html>