我的广告
切换到宽版

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
站长论坛»论坛 › 站长 › 建站技术 › 分享一个404页面代码，非常简洁
返回列表 发新帖
查看: 28|回复: 0

分享一个404页面代码，非常简洁

[复制链接]
maqg

43

主题

49

回帖

322

积分

中级会员

积分
322
发表于 2024-11-13 10:01:45 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>404 - Page Not Found</title>
  8.     <style>
  9.         /* 全局样式 */
  10.         body {
  11.             font-family: Arial, sans-serif;
  12.             background-color: #f4f4f4;
  13.             margin: 0;
  14.             padding: 0;
  15.             display: flex;
  16.             flex-direction: column;
  17.             justify-content: center;
  18.             align-items: center;
  19.             min-height: 100vh;
  20.         }

  22.         h1 {
  23.             color: #333;
  24.         }

  26.         p {
  27.             color: #666;
  28.         }

  30.         /* 404 元素样式 */
  31.         #error {
  32.             font-size: 100px;
  33.             color: #ccc;
  34.         }

  36.         /* 按钮样式 */
  37.         a {
  38.             background-color: #007bff;
  39.             color: white;
  40.             border: none;
  41.             padding: 10px 20px;
  42.             border-radius: 5px;
  43.             cursor: pointer;
  44.             margin-top: 20px;
  45.             transition: background-color 0.3s ease;
  46.             text-decoration: none;
  47.         }

  49.     </style>
  50. </head>

  52. <body>
  53.     <div id="error">404</div>
  54.     <h1>未找到相关页面</h1>
  55.     <p>抱歉，您访问的页面可能不存在或者被删除！</p>
  56.     <a target="_blank" >返回首页</a>

  58. </body>

  60. </html>
复制代码
效果演示：


404页面

404页面


来源，4414，逗号广告联盟
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表