炫酷404错误页面

首页

网页源码

炫酷404错误页面

10月

炫酷404错误页面

作者： 彭Sir 分类： 网页源码 正在检查是否收录...

当我们探索一个自定义的404页面模板时，我们深入研究了HTML代码中的各个组件。这个404页面的设计旨在提供更好的用户体验，而不仅仅是一个简单的错误页面。
明亮模式
炫酷404错误页面
黑暗模式
炫酷404错误页面（黑暗模式）

在线演示

https://pengsirs.gitee.io/51xk/404-main-1/

完整代码

完整代码在该页面底部

以下是HTML代码的详细解释：

文档类型声明

<!DOCTYPE html>
这是HTML文档的文档类型声明，告诉浏览器使用哪个HTML版本来渲染页面。

HTML标签


<html lang="en">

这是HTML文档的根元素，其中lang属性指定了页面的语言为英语。

头部标签


<head>
    <!-- 元字符集 -->
    <meta charset="utf-8">
    <!-- 页面标题 -->
    <title>404</title>
    <!-- 作者信息 -->
    <meta name="author" content="pkfrom">
    <!-- 页面关键词 -->
    <meta name="keywords" content="404页面, CSS3, 模板, HTML5模板">
    <!-- 页面描述 -->
    <meta name="description" content="404 - 页面模板">
    <!-- 视口设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 引入外部CSS资源 -->
    <link type="text/css" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" media="all" href="https://pengsirs.gitee.io/51xk/404-main-1/assets/css/404.min.css" rel="stylesheet">
    <!-- 网站图标 -->
    <link rel="apple-touch-icon" sizes="144x144" href="https://pengsirs.gitee.io/51xk/404-main-1/assets/img/favicons/favicon144x144.png">
    <link rel="apple-touch-icon" sizes="114x114" href="https://pengsirs.gitee.io/51xk/404-main-1/assets/img/favicons/favicon114x114.png">
    <link rel="apple-touch-icon" sizes="72x72" href="https://pengsirs.gitee.io/51xk/404-main-1/assets/img/favicons/favicon72x72.png">
    <link rel="apple-touch-icon" href="https://pengsirs.gitee.io/51xk/404-main-1/assets/img/favicons/favicon57x57.png">
    <link rel="shortcut icon" href="https://pengsirs.gitee.io/51xk/404-main-1/assets/img/favicons/favicon.png">
    <!-- 引入Google字体 -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900" rel="stylesheet" type="text/css">
</head>

在头部标签中，我们定义了页面的元字符集、标题、作者信息、关键词、描述、视口设置，以及引入了外部的CSS样式和网站图标。同时，我们还引入了Google字体用于页面的文本显示。

主体标签

<body>

主体标签包含了页面的实际内容。

加载页面

<div class="animationload">
    <div class="loader"></div>
</div>

这部分HTML代码包含了一个加载页面的动画，显示在用户加载页面时。

内容包装器

<div id="wrapper">
    <div class="container">
    <!-- 内容部分 -->
    </div>
</div>

这是页面的内容包装器，用于包裹页面的实际内容。

切换器

<div class="switcher">
    <input id="sw" type="checkbox" class="switcher-value">
    <label for="sw" class="sw_btn"></label>
    <div class="bg"></div>
    <div class="text">Turn <span class="text-l">off</span><span class="text-d">on</span><br>the light</div>
</div>

这部分代码定义了一个切换器，用户可以用来切换页面的明亮和暗色版本。它包括一个复选框和相应的标签。

暗色版本

<div id="dark" class="row text-center">
    <div class="info">
        <img src="./assets/img/404-dark.png" alt="404错误">
    </div>
</div>

这是页面的暗色版本，显示一个404错误图像。

亮色版本

<div id="light" class="row text-center">
    <!-- 信息 -->
    <div class="info">
        <img src="https://pengsirs.gitee.io/51xk/404-main-1/assets/img/404-light.gif" alt="404错误">
        <!-- 页面错误信息 -->
        <!-- 链接返回首页 -->
        <br>
        <a href="http://51xk.cn/" class="btn">返回首页</a>
    </div>
</div>

这是页面的亮色版本，包含了一个404错误动画、页面错误信息和一个链接，用户可以点击返回到网站的主页。

脚本

<!-- 引入外部JavaScript脚本 -->
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://pengsirs.gitee.io/51xk/404-main-1/assets/js/modernizr.custom.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.min.js" type="text/javascript"></script>
<script src="https://pengsirs.gitee.io/51xk/404-main-1/assets/js/404.min.js" type="text/javascript"></script>

在页面底部，我们引入了一些外部JavaScript脚本，用于增强页面的功能和交互性。

HTML5兼容性和响应式设计

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

完整代码

<!DOCTYPE html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--> 
    <html lang=en>
         <!--<![endif]--> 
         <head> <meta charset="utf-8"> 
            <title>404</title> <meta name=author content="pkfrom">
                <meta name=keywords content="404 page, css3, template, html5 template">
                <meta name=description content="404 - Page Template">
                <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1">
                <!-- Libs CSS --> 
                <link type=text/css media=all href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css rel="stylesheet"> 
                <link type=text/css media=all href=https://pengsirs.gitee.io/51xk/404-main-1/assets/css/404.min.css rel="stylesheet"> <!-- Favicons --> 
                <link rel=apple-touch-icon sizes=144x144 href="https://pengsirs.gitee.io/51xk/404-main-1/assets/img/favicons/favicon144x144.png"> 
                <link rel=apple-touch-icon sizes=114x114 href="https://pengsirs.gitee.io/51xk/404-main-1/assets/img/favicons/favicon114x114.png"> 
                <link rel=apple-touch-icon sizes=72x72 href="https://pengsirs.gitee.io/51xk/404-main-1/assets/img/favicons/favicon72x72.png"> 
                <link rel=apple-touch-icon href="https://pengsirs.gitee.io/51xk/404-main-1/assets/img/favicons/favicon57x57.png"> 
                <link rel="shortcut icon" href="https://pengsirs.gitee.io/51xk/404-main-1/assets/img/favicons/favicon.png"> <!-- Google Fonts -->
                <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900" rel=stylesheet type=text/css> 
                 <body> <!-- Load page -->
                     <div class=animationload>
                         <div class=loader>
                         </div> 
                    </div> <!-- End load page --> <!-- Content Wrapper -->
                     <div id=wrapper> <div class=container> <!-- Switcher --> 
                        <div class=switcher> <input id=sw type=checkbox class=switcher-value> 
                            <label for=sw class=sw_btn></label> <div class=bg></div> <div class=text>Turn <span class=text-l>off</span><span class=text-d>on</span><br>the light</div> </div> <!-- End Switcher --> <!-- Dark version --> <div id=dark class="row text-center"> <div class=info> <img src=./assets/img/404-dark.png alt="404 error"> </div> </div> <!-- End Dark version --> <!-- Light version --> <div id=light class="row text-center"> <!-- Info --> <div class=info> <img src=https://pengsirs.gitee.io/51xk/404-main-1/assets/img/404-light.gif alt="404 error"> <!-- end Rabbit --> <!--<p>The page you are looking for was moved, removed,<br> renamed or might never existed.</p>--><br> <a href="http://51xk.cn/" class=btn>Go Home</a> <!--<a href="#" class="btn btn-brown">Contact Us</a>--> </div> <!-- end Info --> </div> <!-- End Light version --> </div> <!-- end container --> </div> <!-- end Content Wrapper --> <!-- Scripts --> <script src=https://code.jquery.com/jquery-2.2.0.min.js type=text/javascript></script> <script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js type=text/javascript></script> <script src=https://pengsirs.gitee.io/51xk/404-main-1/assets/js/modernizr.custom.js type=text/javascript></script> <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.0/jquery.nicescroll.min.js type=text/javascript></script> <script src=https://pengsirs.gitee.io/51xk/404-main-1/assets/js/404.min.js type=text/javascript></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->