2025-03-10

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title><style>
        *{margin: 0; padding: 0; box-sizing: border-box;}
        html, body{width:100%; height:100%;}
        body{display:flex;flex-direction:column;}
        .header{width:100%;height:72px;
        display:flex;
        justify-content:center;
        }
        .main{width:100%;flex:1;}
        /* flex: 1,在弹性布局中，占满剩余的所有空间 */
        .header .content{width:1200px;height:72px;display:flex;
align-items:center;
}
.header .content img{width:100px;height:30px;}
.main{
display:flex;
justify-content: center;
align-items: center;
}
.login-box{
width:400px;
height: 240px;
background-color: #fff;
border-radius:8px;
box-shadow: #888 10px 10px 20px;
}
.header{
width: 100%;
height:50px;
line-height: 50px;
text-align:center;
font-size:18px;
letter-spacing: 3px;
border-bottom:solid 1px #eee;
}
.login{
height:180px;
display:flex;
flex-direction: column;
justify-content: space-evenly;
}
.login p {
height:40px;
/* background-color: orange; */
display:flex;
justify-content: space-evenly;
align-items: center;
}
.login p input{
width:260px;
height:32px;
}
.login p button{
outline: none; /* 去掉外边框*/
border: none; /* 去掉边框*/
width:300px;
height:32px;
border-radius:16px;
background-color:#4872f6;
color:white;
}.login p button:hover{background-color:#143bbd;
font-weight:600;
}
.body{background: linear-gradient(to bottom, #f0f0f0, #333333);}
</style>
</head>
<body>
<!-- 页头 -->
<div class="header">
<div class="content">
<img src="./xet_logo_2020.png" alt="">
</div>
</div>
<!-- 页面 -->
<div class="main">
<!-- 登录窗口 -->
<div class="login-box">
<div class="header">AI管理系统 管理员登录</div>
<div class="login">
<p>
<label for="zhanghao">账号：</label>
<input type="text" name="zhanghao" id="zhanghao"
placeholder="请输入账号">
</p >
<p>
<label for="mima">密码：</label>
<input type="password" name="mima" id="mima"
placeholder="请输入密码">
</p >
<p>
<button>登录</button>
</p >
</div>
</div>
</div>
</body>
</html>
</head>
<body>
    
</body>
</html>
2025-03-10

推荐阅读更多精彩内容
