<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="axios.js"></script>
</head>
<style>
body {
background: linear-gradient(to right,#65CBF7, #B3A5Fc);
width: 100vw;
height: 100vh;
margin: 0;
}
.box{
width:60%;
height:450px;
display:flex;
position:fixed;
box-shadow:0 5px 15px rgba(0,0,0,.8);
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.left{
width:65%;
}
.left>img{
display: block;
width:100%;
height: 100%;
object-fit:cover;
}
.right{
width:35%;
height:100%;
background-color:#FFF;
box-sizing:border-box;
padding:0 20px;
}
h1{
text-align:center;
padding-top:45px;
margin-top:0;
}
.inputItem{
height:44px;
padding:0;
padding-left:5px;
width: 100%;
border:none;
background:none;
outline:none;
border-bottom :3px solid #B3A5Fc;
font-size:18px;
margin-top:20px;
}
.forgetPassword{
margin-top:25px;
text-align:right;
display:block;
color:#9C3493
}
.btn{
background:linear#63CBF7;
color:#9C3493;
font-weight:bold;
border:none;
border-radius:30px;
height:46px;
width:80%;
font-size:18px;
display:block;
margin:auto;
margin-top:30px;
}
/*适配pc*/
@media screen and (min-width:960px){
.box{
max-width: 950px;
min-width: 750px;
}
}
/*适配ipad*/
@media screen and (max-width:960px){
.box{
display: block;
height:auto;
}
.left,.right{
width:100%;
margin-top:0;
}
.left{
height: 200px;
}
.right{
padding:2vw 2vw;
}
h1{
padding-top:0;
margin-bottom:1vw;
}
.inputItem,.forgetPassword,.btn{
margin-top:2vw;
}
}/*适配移动*/
@media screen and (max-width:750px){
.box{
width: 85%;
}
}
</style>
<body>
<div class="box">
<div class="left">
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.1-gK-0q-yD7XIxKBU2usdQHaDt?w=323&h=175&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="">
</div>
<div class="right">
<h1>Login</h1>
<input type="text" class="inputItem" placeholder="your userName">
<input type="password" class="inputItem" placeholder="your password">
<a href="#" class="forgetPassword">forget password</a>
<button class="btn" onclick="Login()">Login</button>
</div>
</div>
</body>
<script>
function Login(){
let userName=document.getElementsByClassName('inputItem')[0].value;
let password=document.getElementsByClassName('inputItem')[1].value;
let emp={userName:userName,password:password};
axios.post("http://localhost:8080/login",emp).then((result)=>{
let code=result.data.code; //验证登录
if(code){
window.location.href="" //登录后跳转页面
}else {
alert("用户名或密码错误");
}
})
}
</script>
</html>标签：box,登录,width,top,height,padding,响应,简单,margin From： https://www.cnblogs.com/luo9tian/p/17963813