404页面（适配不同分辨率）

最新推荐文章于 2021-08-17 13:33:17 发布

顾鸟

最新推荐文章于 2021-08-17 13:33:17 发布

阅读量166

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40881695/article/details/112972060

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

html

<body>
  <div class="container">
    <div class="img container-item">
      <img src="./404.svg" alt="" srcset="">
    </div>
    <div class="content container-item">
      <div class="code">404</div>
      <div class="tip">你查看的页面貌似丢失了呢...</div>
      <div class="action">
        <a href="#" class="toHome">返回首页</a>
        <a href="#" class="more">查看更多内容</a>
      </div>
    </div>
  </div>
</body>

css

 <style>
    * {
      padding: 0;
      margin: 0;
    }

    html,
    body {
      height: 100%;
    }

    body {
      background: #eee;
      /* container垂直水平居中 */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container {
      width: 80%;
      max-width: 1000px;
      min-width: 600px;
      max-height: 500px;
      border-radius: 15px;
      background: #fff;
      display: flex;
      box-shadow: 0px 0px 10px 5px #ccc;
    }

    .container .container-item {
      /* 左侧和右侧各占50% */
      width: 50%;
    }

    .container .img {
      background: #ffcc93;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }

    .container .content {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #666;
    }

    .container .content .code {
      font-size: clamp(150px, 20vw, 200px);
      font-weight: bold;
      text-align: center;
      color: #5d72ff;
      font-family: Arial, Helvetica, sans-serif;
    }

    .container .content .tip {
      text-align: center;
    }

    .container .content .action {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px;
    }

    .container .content .action a {
      color: #666;
      margin: 0 5px;
    }
  </style>

注
1. font-size:0

https://www.cnblogs.com/guagnxu/p/6382163.html

2. clamp函数

https://blog.csdn.net/lvonve/article/details/109089498

顾鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
404页面（适配不同分辨率）

效果图html<body> <div class="container"> <div class="img container-item"> <img src="./404.svg" alt="" srcset=""> </div> <div class="content container-item"> <div class="code">404</div&g
复制链接

扫一扫

专栏目录