HTML
CSS
JavaScript
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>页面维护 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/iframe/css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="m-tb-50">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xs-12">

        <div class="text-center">
          <img src="http://lyear.itshubao.com/iframe/v4/images/404.png" height="140" alt="File not found Image">
          <h2 class="m-t-30 m-b-10">网站正在维护中</h2>
          <p class="text-muted">我们正在让这个系统更棒。我们很快就回来。</p>

          <div class="row m-t-50">
            <div class="col-md-4">
              <div class="text-center m-t-10">
                <i class="mdi mdi-diamond bg-primary img-avatar img-avatar-48 m-b-10 fa-1-5x"></i>
                <h4>为什么网站关闭了？</h4>
                <p class="text-muted">字节跳动正在与甲骨文就出售TikTok北美业务一事进行密切沟通。</p>
              </div>
            </div> <!-- end col-->
            <div class="col-md-4">
              <div class="text-center m-t-10">
                <i class="mdi mdi-clock bg-primary img-avatar img-avatar-48 m-b-10 fa-1-5x"></i>
                <h4>停机时间是多少？</h4>
                <p class="text-muted">英伟达正式宣布，公司已同意从软银集团手中收购英国芯片设计商ARM，这笔交易的价值为 400 亿美元。</p>
              </div>
            </div> <!-- end col-->
            <div class="col-md-4">
              <div class="text-center m-t-10">
                <i class="mdi mdi-help-circle-outline bg-primary img-avatar img-avatar-48 m-b-10 fa-1-5x"></i>
                <h4>你需要支持吗？</h4>
                <p class="text-muted">马斯克又和大佬干起来了!近日，马斯克在推特上回应一位粉丝称，比尔盖茨压根就不懂电动卡车。<a href="mailto:#" class="text-muted">no-reply@domain.com</a></p>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<footer class="footer text-center">
    2018 - 2020 © lyear - lyear.itshubao.com
</footer>
</body>
</html>
CSS
html {
    position: relative;
    min-height: 100%;
}
html,body {
    height: auto;
}
.footer {
    bottom: 0;
    padding: 19px 24px 20px;
    position: absolute;
    right: 0;
    color: #98a6ad;
    left: 0px;
}
.m-t-30 {
    margin-top: 30px;
}
.m-t-50 {
    margin-top: 50px;
}
.m-tb-50 {
    margin: 50px 0;
}
JavaScript