老师出题：
看图复现页面：
代码语言：html复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
body{
background-image: url("bg.jpg") !important;
background-size: cover;
background-repeat: no-repeat;
}
.login-box{
display: flex;
justify-content: center; /* 水平 */
align-items: center; /* 垂直 */
width: 700px;
height: 400px;
background-color: white;
opacity: 100; /*透明度*/
border-radius: 10px;
margin: 0 auto;
margin-top: 10%;
}
.input-box {
position: relative; /* 让 .icon 相对于 .input-box 定位 */
}
.icon{
position: relative;
left: 75px;
}
.btn{
width: 75%;
background-color: blue;
color: white;
border-radius: 5px;
float: right;
padding-left: 0px; /* 不取消这行 按钮文字不对齐 */
}
input{
margin: 10px;
padding-left: 40px;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
p{
text-align: center;
font-size: 25px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="login-box">
<div class="input-box">
<p>克不克后台管理系统</p>
<form action="" method="" onsubmit="return login()">
<span class="icon">
