云計算管理系統(tǒng)開發(fā)作業(yè):
1.作業(yè)效果：
2.代碼：
<!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>
? ? ? ? *{
? ? ? ? ? ? padding: 0%;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? margin: 0%;
? ? ? ? }
? ? ? ? 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;
? ? ? ? ? ? background-color: aquamarine;
? ? ? ? }
? ? ? ? .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 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;
? ? ? ? ? ? justify-content: space-evenly;
? ? ? ? ? ? flex-direction: column;
? ? ? ? }
? ? ? ? .login p{
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? 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: #1872f6;
? ? ? ? ? ? color: white;
? ? ? ? }
? ? ? ? .login p button:hover{
? ? ? ? ? ? background-color: #143bbd;
? ? ? ? ? ? font-weight: 600;
? ? ? ? }
? ? </style>
</head>
<body>
? ? ? ? <div class="header">
? ? ? ? ? ? <div class="content"><img src="./data_image_png;base….png" alt=""></div>
? ? ? ? </div>
? ? ? ? <div class="main">
? ? ? ? ? ? <div class="login-box">
? ? ? ? ? ? ? ? <div class="header">歐鵬管理系統(tǒng)</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="text" name="mima" id="mima" placeholder="請輸入密碼">
? ? ? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? ? ? ? ? <p><button>登錄</button></p>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
</body>
</html>
