404.html

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="https://blog.sztiger.top/szxhz.github.io-source/img/cofee.png" type="image/x-icon">
  <!--自定义title图标-->
  <link rel="shortcut icon" href="https://blog.sztiger.top/szxhz.github.io-source/img/cofee.png" type="image/x-icon">
  <!--自定义收藏夹图标-->
  <title>Page not find!</title>
  <!--自定义title-->
  <meta charset="UTF-8">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: linear-gradient(to right, #87CEEB, #F0F8FF);
    }

    .navbar {
      position: sticky;
      top: 0;
      background-color: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      padding: 20px;
      z-index: 999;
      display: flex;
      justify-content: space-between;
      align-items: center;
      animation: fade-in 0.5s;
    }

    .navbar .navbar-item {
      color: #333;
      font-weight: bold;
      margin-left: 10px;
      text-decoration: none;
    }

    .navbar ul {
      list-style: none;
      display: flex;
    }

    .navbar ul li:not(:first-child) {
      margin-left: 70px; /* 调整导航项之间的间距 */
    }

    .navbar ul li a {
      text-decoration: none;
      color: #333;
    }

    @keyframes fade-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="navbar">
    <a href="#" class="navbar-item">By SztigerW</a>
    <ul>
      <li><a href="index.html">首页看看~</a></li>
      <li><a href="pictures.html">回忆相册</a></li>
      <li><a href="#">送别的书</a></li>
      <li><a href="#">同学档案</a></li>
    </ul>
    <!--自定义导航栏-->
  </div><br><br><br><br><br><br><br><br><br><br>
  <div style="text-align: center;"><p><font size="50" color="white">不好！404了！<br>你很有品味，页面未被世界发现 。<a href="index.html"><font color="green">回到首页</font></a></font></p></div>
  <!--自定义404内容-->
</body>
</html>