一个有意思的404页面

timi先生

已于 2023-04-27 15:35:50 修改

阅读量701

点赞数 2

分类专栏： CSS 文章标签： css css3 html

于 2023-04-19 17:59:23 首次发布

本文链接：https://blog.csdn.net/qq_35241329/article/details/130249874

版权

CSS 专栏收录该内容

81 篇文章 10 订阅

订阅专栏

老规矩，先上效果图：
在这里插入图片描述
下面代码直接拷过去就能用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;text-align: center}
    .page_404  img{
      width:100%;
    }
    .four_zero_four_bg{
      background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
      height: 400px;
      background-repeat: no-repeat;
      background-position: center;
    }

    .four_zero_four_bg h1{
      font-size:80px;
    }
    .four_zero_four_bg h3{
      font-size:80px;
    }
    .link_404{
      color: #fff!important;
      padding: 10px 20px;
      background: #39ac31;
      margin: 20px 0;
      display: inline-block;}
    .contant_box_404{ margin-top:-50px;}
  </style>
</head>
<body>
<section class="page_404">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 ">
        <div class="col-sm-10 col-sm-offset-1  text-center">
          <div class="four_zero_four_bg">
            <h1 class="text-center">404</h1>
          </div>
          <div class="contant_box_404">
            <h3 class="h2">
              Look like you're lost
            </h3>
            <p>the page you are looking for not avaible!</p>
            <a href="你的主页地址" class="link_404">返回首页</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</body>
</html>