给大家带来一个服务器更新页面!

给大家带来一个服务器更新页面!

小李
2021-07-05 / 0 评论 / 111 阅读 / 耗时: 35 ms / 正在检测是否收录...

前言

前几天搞服务器系统升级 ,发现没有好看的页面 ,于是就想着自己也学习那么久的HTML5的基础课程了,自己动手写一个来看看 ,于是就有了今天的这个页面。
凑合着用吧,反正我觉得还可以!

截图

截图

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="https://www.lixinbk.cn/favicon.ico" type="image/x-icon" />
    <title>系统升级中</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
 
        .header {
            height: 60px;
            background: #2F4056;
            display: block;
            width: 100%;
            color: #ffffff;
            line-height: 60px;
        }
 
        .header-left {
            display: block;
            float: left;
            padding-left: 200px;
            font-family: Tahoma;
            font-size: 14px;
            font-weight: bold;
        }
 
        .body-header {
        }
 
        .body-my {
            text-align: center;
            margin-top: 130px;
            margin-bottom: 20px;
            font-size: 40px;
            color: #2F4056;
        }
 
        .body-line {
            margin: 30px auto;
            background: #ff0000;
            display: block;
            height: 2px;
            width: 80px
        }
 
        .body-desc {
            margin: 10px 0 10px 0;
            text-align: center;
            color: #313131
        }
 
        .body-ico {
            margin: 130px auto 0 auto;
            width: 900px;
            height: 470px;
        }
 
        .body-ico-item {
            float: left;
            display: block;
            width: 32.2%;
            height: 300px;
            /*background: #2F4056;*/
            margin-right: 10px;
            /*padding:20px 50px*/
        }
 
        .body-ico-item-info {
            text-align: center;
        }
 
        .f1 {
            height: 60px;
            padding: 20px 0 0 0;
            font-size: 60px;
            color: #1E9FFF
        }
 
        .f2 {
            height: 30px;
            margin: 50px 0 0 0;
            font-size: 24px;
            color: #1E9FFF;
        }
 
        .f3 {
            height: 30px;
            padding: 20px 30px 0 30px;
            text-align: left !important;
            font-size: 15px;
            color: #2F4056
        }
        .body-foot {
            text-align:center;
            font-size:12px;
            color:gray
        }
        em {
            font-style: normal;
        }
    </style>
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="icon" href="../favicon.ico">
</head>
<body>
    <div class="header">
        <div class="header-left">极速网络科技</div>
    </div>
    <div class="body-header">
        <div class="body-my">
            系统更新中···
        </div>
        <div class="body-line"></div>
        <div class="body-desc">用互联网科技 ✦ 使生活更美好</div>
        <div class="body-ico">
            <div class="body-ico-item">
                <div class="body-ico-item-info f1"><i class="fa fa-code"></i></div>
                <div class="body-ico-item-info f2">New Code</div>
                <div class="body-ico-item-info f3">更简洁的代码,更新的技术,更先进的科技</div>
            </div>
            <div class="body-ico-item">
                <div class="body-ico-item-info f1"><i class="fa fa-cogs"></i></div>
                <div class="body-ico-item-info f2">Light Structure</div>
                <div class="body-ico-item-info f3"  style="text-align:center !important">轻量架构,从不变应万变</div>
            </div>
            <div class="body-ico-item">
                <div class="body-ico-item-info f1"><i class="fa fa-eye"></i></div>
                <div class="body-ico-item-info f2">New View</div>
                <div class="body-ico-item-info f3" style="text-align:center !important">新感官新视觉</div>
            </div>
        </div>
    </div>
    <div class="body-foot">
      <em><a href='https://beian.miit.gov.cn' target="_blank">晋ICP备20006810号-1</a></em>
      <em>山西省极速网络技术有限公司 All Right Reserved版权所有 </em>
    </div>
</body>
</html>

演示地址

2

评论区 (0)

取消