头像

LongLanWack

真不戳~

12 7 3
文章 分类 评论

友情链接

当前位置:首页 » 前端学习笔记 » 第二个404页面

2021-04-05

368人围观

分类: 前端学习笔记

标签: 404


更新了404页面,
样式如下样式
在线预览:
404--点击此处预览
用到的新知识点:refresh 跳转,content值为设定秒数
源代码

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="refresh" content="10;url=http://www.longlanwack.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>404 找不到此页面/(ㄒoㄒ)/~~</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>*{padding:0;margin:0}a{text-decoration:none}.notfoud-container .img-404{height:214px;background:url(https://p.longlanwack.com/uploads/big/8e852d54fd6d0a7251ce61b03600055a.png) center center no-repeat;-webkit-background-size:510px auto;margin-top:30px;margin-bottom:20px}.notfoud-container .notfound-p{line-height:20px;font-size:30px;padding-bottom:20px;border-bottom:2px solid #00A1D6;text-align:center;color:#262b31}.notfoud-container .notfound-reason{color:#000000;font-size:20px;line-height:16px;text-align:left;width:300px;margin:0 auto}.notfoud-container .notfound-reason p{margin-top:16px}.notfoud-container .notfound-reason ul li{margin-top:16px;margin-left:100px}.notfoud-container .notfound-btn-container{margin:40px auto 0;text-align:center}.notfoud-container .notfound-btn-container .notfound-btn{display:inline-block;border:1px solid #ebedef;background-color:##F4F4F4f0;color:#fff;font-size:15px;border-radius:5px;text-align:center;padding:10px;line-height:16px;white-space:nowrap}
</style>

</head>
<body>
<link rel="shortcut icon" href="https://abbs.longlanwack.com//view/img/favicon.ico">
<div class="notfoud-container">

    <div class="img-404">

    </div>

    <p class="notfound-p"><strong>404 找不到指定的文件</strong></p>

    <div class="notfound-reason">

      <p><strong>可能的原因:</strong></p>

        <ul>
            
            <strong><li>域名输入错误</li>

            <li>不存在该页面</li>

            <li>服务器被外星人劫持了</li></strong>
  </div>

    

    <div class="notfound-reason">
      <blockquote>
        <p style="font-size: 13px; text-align:center; color: #00a1d6;">您的浏览器信息 / Your browser's information:
          <script>document.write(navigator.userAgent);</script>
         </p>
      </blockquote>
      <p style="text-align: center; font-size: 15px; color: #778899;"><strong>·  Powerwd by <a href="http://longlanwack.com/" style="color: #1E90FF;">LongLanWack</a></strong></p>
      <p style="text-align: center; font-size: 17px; color: #000000;"><strong>将在10s后跳转至首页...</strong></p>
  </div>
</div></body>

</html>

如果觉得有用,就给一个评论吧~


作者:

丨Technology changes ours life.