8款不同的404页面(网站404页面必备)

发布于：2024-04-20 ⋅ 阅读:(56) ⋅ 点赞:(0)

第1款

在这里插入图片描述

部分代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>


<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="number">404</div>

<div class="text"><span>页面找不到了</span><br>可能已经被删除</div>

  
</body>
</html>

第2款

在这里插入图片描述

部分代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div>
  <aside><img src="images/Mirror.png" alt="404 Image">
  </aside>
  <main>
    <h1>Sorry!</h1>
    <p>
     要么你不够酷，无法访问此网页，要么它不存在<em>. . . 你的社交生活.</em>
    </p>
    <a href="https://www.azpay.cn"><button>返回主页！</button></a>
  </main>
</div>

  
</body>
</html>

第3款

在这里插入图片描述

部分代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>404</title>
  <link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="about">
   <a class="bg_links social portfolio" href="#">
      <span class="icon"></span>
   </a>
   <a class="bg_links social dribbble" href="#">
      <span class="icon"></span>
   </a>
   <a class="bg_links social linkedin" href="#">
      <span class="icon"></span>
   </a>
   <a class="bg_links logo"></a>
</div>


    <nav>
        <div class="menu">
            <p class="website_name">LOGO</p>
            <div class="menu_links">
                <a href class="link">about</a>
                <a href class="link">projects</a>
                <a href class="link">contacts</a>
            </div>
            <div class="menu_icon">
                <span class="icon"></span>
            </div>
        </div>
    </nav>

    <section class="wrapper">

        <div class="container">

            <div id="scene" class="scene" data-hover-only="false">


                <div class="circle" data-depth="1.2"></div>

                <div class="one" data-depth="0.9">
                    <div class="content">
                        <span class="piece"></span>
                        <span class="piece"></span>
                        <span class="piece"></span>
                    </div>
                </div>

                <div class="two" data-depth="0.60">
                    <div class="content">
                        <span class="piece"></span>
                        <span class="piece"></span>
                        <span class="piece"></span>
                    </div>
                </div>

                <div class="three" data-depth="0.40">
                    <div class="content">
                        <span class="piece"></span>
                        <span class="piece"></span>
                        <span class="piece"></span>
                    </div>
                </div>

                <p class="p404" data-depth="0.50">404</p>
                <p class="p404" data-depth="0.10">404</p>

            </div>

            <div class="text">
                <article>
                    <p>Uh oh! 看来你迷路了。<br>请点击按钮返回首页！</p>
                    <button>返回首页</button>
                </article>
            </div>

        </div>
    </section>
	
	<script src="js/parallax.min.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="js/script.js"></script>

</body>
</html>

第4款

在这里插入图片描述

部分代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div id="svgContainer"></div>

<script src="js/eEjVBX.js"></script>
<script src="js/MvBBBj.js"></script>
<script src="js/script.js"></script>

</body>
</html>

第5款

在这里插入图片描述

部分代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>404</title>

<style>
html,body{height:100vh}
html:before,html:after,body:before,body:after{content:&#x27;&#x27;;background:linear-gradient(#203075,#233581);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
html:before,body:before{background:linear-gradient(#233581,#203075)}
html{background:linear-gradient(#203075,#233581);overflow:hidden}
html:before{height:105vmax;width:105vmax;z-index:-4}
html:after{height:80vmax;width:80vmax;z-index:-3}
body{display:flex;justify-content:center;align-items:center;color:#FFF;font-family:&#x27;Varela Round&#x27;,Sans-serif;text-shadow:0 30px 10px rgba(0,0,0,0.15)}
body:before{height:60vmax;width:60vmax;z-index:-2}
body:after{height:40vmax;width:40vmax;z-index:-1}
.main{text-align:center;z-index:5}
p{font-size:18px;margin-top:0}
h1{font-size:145px;margin:0}
button{background:linear-gradient(#EC5DC1,#D61A6F);padding:0 12px;border:none;border-radius:20px;box-shadow:0 30px 15px rgba(0,0,0,0.15);outline:none;color:#FFF;font:400 16px/2.5 Nunito,&#x27;Varela Round&#x27;,Sans-serif;text-transform:uppercase;cursor:pointer}
.bubble{background:linear-gradient(#EC5DC1,#D61A6F);border-radius:50%;box-shadow:0 30px 15px rgba(0,0,0,0.15);position:absolute}
.bubble:before,.bubble:after{content:&#x27;&#x27;;background:linear-gradient(#EC5DC1,#D61A6F);border-radius:50%;box-shadow:0 30px 15px rgba(0,0,0,0.15);position:absolute}
.bubble:nth-child(1){top:15vh;left:15vw;height:22vmin;width:22vmin}
.bubble:nth-child(1):before{width:13vmin;height:13vmin;bottom:-25vh;right:-10vmin}
.bubble:nth-child(2){top:20vh;left:38vw;height:10vmin;width:10vmin}
.bubble:nth-child(2):before{width:5vmin;height:5vmin;bottom:-10vh;left:-8vmin}
.bubble:nth-child(3){top:12vh;right:30vw;height:13vmin;width:13vmin}
.bubble:nth-child(3):before{width:3vmin;height:3vmin;bottom:-15vh;left:-18vmin;z-index:6}
.bubble:nth-child(4){top:25vh;right:18vw;height:18vmin;width:18vmin}
.bubble:nth-child(4):before{width:7vmin;height:7vmin;bottom:-10vmin;left:-15vmin}
.bubble:nth-child(5){top:60vh;right:18vw;height:28vmin;width:28vmin}
.bubble:nth-child(5):before{width:10vmin;height:10vmin;bottom:5vmin;left:-25vmin}</style>
</head>
<body>

<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="main">
<h1>404</h1>
	<h2>Error</h2>
	<p>您迷路了！</p>
</div>

</body>
</html>

第6款

在这里插入图片描述

部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium illum ullam accusantium maxime veritatis.">
    <!--  Stylesheets   -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,900" rel="stylesheet" type="text/css">
	
    <link rel="stylesheet" href="css/style.css">
	
</head>
<body>
    <!-- Page Loader    -->
      <div class="spinner">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
    </div>
     <!-- Page Loader ends   -->
    <nav class="navigation">
        <ul>
            <li><a href="https://www.azpay.cn">返回首页</a></li>
            <li><a href="https://www.azpay.cn">关于我们</a></li>
            <li><a href="https://www.azpay.cn">联系我们</a></li>
        </ul>
    </nav>
     
 
   <section class="error">
       <h1>404 页面未找到</h1>
       <p>为什么不试试下面的链接?</p>
   </section>
  
  <div id="svg_container">      
    <!-- SVG of Submarine      -->
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="submarine_container" viewBox="0 0 1366 768" version="1.1">
    <title>Submarine</title>
    <desc>404 页面未找到</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="canvas">
            <g id="Submarine" transform="translate(414.000000, 214.000000)">
                <g id="body">
                    <g id="Periscope" transform="translate(238.000000, 0.000000)">
                        <rect id="Rectangle-11" fill="#E26A6F" x="0" y="5" width="18" height="81"/>
                        <path d="M0 5 L53.9457932 0.2 L53.9457932 27.8 L0 24 L0 5 Z" id="Rectangle-12" fill="#F18085"/>
                    </g>
                    <path d="M68.4512504 192.7 L68.2214491 192.7 L42.4574319 158.7 L39.1877254 161.1 L44.3458985 167.9 L64.7346837 194.7 C64.7346837 194.7 61 199 55 203 C38.9394756 213.8 16.2 208.1 6.4 193.6 C-3.43610944 179 -0.2 155.8 15.8 144.9 L23.2865152 139.9 L31.0436693 150.2 L31.0436693 150.2 L34.2650816 147.9 L34.2650816 147.9 L26.1522911 137.2 L42.4360184 131.9 L61.0237487 125.6 L61.1948172 125.9 L86.3859435 117.8 C86.3859435 117.8 129.5 105.8 183.6 93.5 C180.722922 79.4 179.9 62.4 189.8 55.4 C208.11679 42.4 301.6 42.2 322.5 55.4 C327.18244 58.3 329.8 62.9 331 68.4 C339.308255 67.8 347.1 67.5 354.2 67.5 C481.773695 68.8 506.4 124 496.8 165.4 C487.220548 206.7 441.9 235.6 354.2 234.7 C316.838342 234.3 139.5 205.2 139.5 205.2 L113.634294 200.6 L113.672949 200.7 L68.464691 192.7 L68.4512504 192.7 Z" id="Submarine_body" fill="#F18085"/>
                    <path d="M495.635398 164.7 C485.494798 205.5 440.2 233.8 353.3 232.9 C315.916933 232.5 138.6 203.4 138.6 203.4 L112.712885 198.9 L112.712885 198.9 L112.751539 199 L67.5432818 191 L67.5298412 191 L67.3000398 190.9 L47.4443967 164.7 L495.635398 164.7 Z" id="submarine_body_shade" fill="#E26A6F"/>
                    <g id="lights" transform="translate(251.737184, 73.224560) scale(-1, 1) translate(-251.737184, -73.224560) translate(204.237184, 61.224560)">
                        <rect id="light_container" fill="#E26A6F" x="0" y="0" width="94.9" height="24" rx="8"/>
                        <ellipse class="lights" id="light_right" fill="#c9c9c9" cx="16.6" cy="11.9" rx="4.6" ry="4.6"/>
                        <ellipse class="lights" id="light_right_first_left" fill="#c9c9c9" cx="31.3" cy="11.9" rx="4.6" ry="4.6"/>
                        <ellipse class="lights" id="light_center" fill="#c9c9c9" cx="46.1" cy="11.9" rx="4.6" ry="4.6"/>
                        <ellipse class="lights" id="light_left_next_right" fill="#c9c9c9" cx="61.7" cy="11.9" rx="4.6" ry="4.6"/>
                        <ellipse class="lights" id="light_left" fill="#c9c9c9" cx="77.4" cy="11.9" rx="4.6" ry="4.6"/>
                    </g>
                    <g id="head_light">
                        <path d="M489.1 232.9 L505.5 206.7 L3699.7 1066.7 L2166 2791.6 L489.1 232.9 Z" id="light" fill="#8E9EB7"/>
                        <path d="M484 230.8 L490.2 234.2 L498 220.2 L505.8 206.3 L499.6 202.9 C488.2 196.6 475.4 197.8 471.1 205.5 C466.8 213.2 472.6 224.5 484 230.8 L484 230.8 Z" id="light_emitter" fill="#F67C81"/>
                    </g>
                    <g id="window" transform="translate(422.974221, 151.801013) rotate(105.000000) translate(-422.974221, -151.801013) translate(364.474221, 93.301013)">
                        <ellipse id="glass" stroke="#B1B1B1" stroke-width="8" fill="#4D576D" cx="58.5" cy="58.4" rx="57.6" ry="57.6"/>
                        <path d="M58.9701897 4.6 C58.6758133 4.6 58.4 4.6 58.1 4.6 C28.5500958 4.6 4.6 28.8 4.6 58.5 C4.60704607 88.3 28.6 112.5 58.1 112.5 C58.3808588 112.5 58.7 112.4 59 112.4 L58.9701897 4.6 Z" id="glass_shade" fill="#414B5F"/>
                    </g>
                    <g id="fan_container" transform="translate(203.000000, 130.000000)">
                        <ellipse id="container" stroke="#FF868B" stroke-width="7" fill="#EF7378" cx="34.3" cy="34.3" rx="33.6" ry="33.6"/>
                        <path d="M41.5386329 37.3 L63.5624248 28.5 L59.3750415 18.3 L37.3512496 27.1 L28.4530602 5.3 L18.0889228 9.4 L26.9871123 31.2 L4.96332048 40 L9.15070377 50.3 L31.1744956 41.5 L40.0726851 63.3 L50.4368224 59.1 L41.5386329 37.3 L41.5386329 37.3 Z" id="fan" fill="#FFFFFF"/>
                    </g>
                </g>
            </g>
            <g id="bubble_group">
            <circle id="bubble_medium" fill="#73849E" cx="343.5" cy="398.5" r="14.5"/>
            <ellipse id="bubble_large" fill="#73849E" cx="252.5" cy="349.5" rx="20.5" ry="18.5"/>
            <circle id="bubble_small" fill="#73849E" cx="413.5" cy="349.5" r="10.5"/>
            </g>
        </g>
    </g>
</svg>
      
       <!-- SVG of Submarine ends     -->
       
        <!-- SVG of Water waves   -->
       <svg id="waves" width="2000" viewBox="0 0 1366 768">
           <g>
                 <path d="M0 583 C0 583 101.7 533.5 150.5 533.5 C238.588591 533.5 248.9 583 336.9 583 C382.922767 583 446.1 533.5 492.1 533.5 C560.583282 533.5 611.8 583 680.2 583 C750.322273 583 796.1 533.5 866.2 533.5 C933.203386 533.5 1024.5 583 1091.5 583 C1126.65335 583 1186.8 533.5 1222 533.5 C1278.314 533.5 1366 583 1366 583 L1366 768 L0 768 L0 583 Z" id="wave_bottom" fill-opacity="0.23680933" fill="#3E4A5D"/>
            <path d="M0 653 C0 653 115.4 603.5 170.7 603.5 C270.551778 603.5 282.2 653 382.1 653 C434.222084 653 505.9 603.5 558.1 603.5 C635.683385 603.5 693.8 653 771.4 653 C850.841289 653 902.8 603.5 982.2 603.5 C1058.22258 603.5 1161.8 653 1237.8 653 C1277.58861 653 1345.8 603.5 1385.7 603.5 C1449.5669 603.5 1549 653 1549 653 L1549 838 L0 838 L0 653 Z" id="wave_top" fill-opacity="0.23680933" fill="#3E4A5D"/>
           </g>
          
       </svg>
    
       <!-- SVG of Water waves ends  -->
       
    </div>
    
       
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/code.js"></script>
   <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    
</body>
</html>

第7款

在这里插入图片描述

部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404</title>



    <link rel="stylesheet" href="css/style.css">

</head>
<body>

    <div class="mars"></div>
    <img src="images/404.svg" class="logo-404">
    <img src="images/meteor.svg" class="meteor">
    <p class="title">Oh no!!</p>
    <p class="subtitle">
        页面未找到<br>要么请求一个不再在这里的页面。
    </p>
    <div align="center">
        <a class="btn-back" href="#">返回上一页</a>
    </div>
    <img src="images/astronaut.svg" class="astronaut">
    <img src="images/spaceship.svg" class="spaceship">


  

</body>
</html>

第8款

在这里插入图片描述

部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404</title>



    <link rel="stylesheet" href="css/style.css">

</head>
<body>

    <div class="mars"></div>
    <img src="images/404.svg" class="logo-404">
    <img src="images/meteor.svg" class="meteor">
    <p class="title">Oh no!!</p>
    <p class="subtitle">
        页面未找到<br>要么请求一个不再在这里的页面。
    </p>
    <div align="center">
        <a class="btn-back" href="#">返回上一页</a>
    </div>
    <img src="images/astronaut.svg" class="astronaut">
    <img src="images/spaceship.svg" class="spaceship">


  

</body>
</html>

领取源码

8款不同的404页面下载

  • 📢博客主页：孤客网络科技工作室官方账号
  • 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
  • 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
  • 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布