1.源码 login.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>登录</title>
<style type="text/css">
body {
background-image: linear-gradient(to left, #1f1f21, rgb(112, 142, 201));
}
.login-control {
width: 100%;
height: 97vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-control-outer {
width: 400px;
height: 240px;
background-image: linear-gradient(to left, rgb(18, 99, 222), rgba(68, 196, 196, 0.92));
box-shadow: 2px 2px 2px 2px rgba(102, 71, 71, 0.2);
border-radius: 20px;
}
input.user, input.pass {
width: 200px;
height: 25px;
border: none;
outline: none;
margin-top: 20px;
border-radius: 20px;
}
.login-control-inner {
display: flex;
flex-direction: column;
align-items: center;
}
#login {
text-decoration: none;
margin-top: 20px;
border: 1px rgba(192, 253, 255, 0.36) solid;
width: 90px;
height: 30px;
background-image: linear-gradient(to left, rgba(0, 64, 255, 0.2), rgba(30, 23, 31, 0.42));
text-align: center;
border-radius: 15px;
line-height: 30px;
color: rgba(0, 0, 0, 0.651);
}
#login:hover {
background-color: #1f1c1c;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="login-control">
<div class="login-control-outer">
<div class="login-control-inner">
<p style="color: pink; font-size: 20px;">控制台</p>
<input class="user" id="phone" placeholder="手机号" type="text"/>
<input class="pass" id="password" placeholder="密码" type="password"/>
<input id="login" onclick="login()" type="submit" value="登录"/>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
2.样例
![](https://i-blog.csdnimg.cn/blog_migrate/9f2c411290df3f69d3600d74d0547d7e.png)