用VSocde写的代码，用code运行html代码没问题，但是不用code单打开页面，布局是乱的。
下面是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/CSS/register.css">
<script src="/JS/register.js"></script>
<title>注册</title>
</head>
<body>
<div class="con">
<div class="login">
<div class="login_logo sign-up-container">
<form action="user/addUser" method="post" name="login">
<h1>登录</h1>
<span>请输入您的信息</span>
<input type="text" placeholder="name" name="name" id="name">
<input type="password" placeholder="password" name="password" id="password">
<p id="msg"></p>
</form>
</div>
<div class="other_box">
<div class="other">
<div class="overlay-panel overlay-left">
<h1>请登录</h1>
<p>登录</p>
<a href="/HTML/index.html">
<button class="click" id="signIn">登录</button>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
css
*{
padding: 0;
margin: 0;
}
.con{
font-family:'Montserrat',sans-serif;
background:#f6f5f7;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:100vh;
margin:10px;
}
h1 {
font-weight:bold;
margin:0;
}
p {
font-size:14px;
line-height:20px;
letter-spacing:.5px;
margin:20px 0 30px;
}
span {
font-size:12px;
}
a {
color:#333;
font-size:14px;
text-decoration:none;
margin:15px 0;
}
.login {
background:#fff;
border-radius:10px;
box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
position:relative;
overflow:hidden;
width:768px;
max-width:100%;
min-height:480px;
}
.login_logo form {
background:#fff;
display:flex;
flex-direction:column;
padding:0 50px;
height:100%;
justify-content:center;
align-items:center;
text-align:center;
}
.social-container {
margin:20px 0;
}
.social-container a {
border:1px solid #ddd;
border-radius:50%;
display:inline-flex;
justify-content:center;
align-items:center;
margin:0 5px;
height:40px;
width:40px;
}
.social-container a:hover {
background-color:#eee;
}
.login_logo input {
background:#eee;
border:none;
padding:12px 15px;
margin:8px 0;
width:100%;
outline:none;
}
button {
border-radius:20px;
border:1px solid #c3cd32;
background:#b6cd32;
color:#fff;
font-size:12px;
font-weight:bold;
padding:12px 45px;
letter-spacing:1px;
text-transform:uppercase;
transition:transform 80ms ease-in;
cursor:pointer;
}
button:active {
transform:scale(.95);
}
button:focus {
outline:none;
}
button.click {
background:transparent;
border-color:#fff;
}
.login_logo {
position:absolute;
top:0;
height:100%;
transition:all .6s ease-in-out;
}
.other_box{
position:absolute;
top:0;
left:50%;
width:50%;
height:100%;
overflow:hidden;
transition:transform .6s ease-in-out;
z-index:100;
}
.other{
background:#ebdf2f;
background:linear-gradient(to right,#cacd32,#cdcd32) no-repeat 0 0 / cover;
color:#fff;
position:relative;
left:-100%;
height:100%;
width:200%;
transform:translateY(0);
transition:transform .6s ease-in-out;
}
.overlay-panel{
position:absolute;
top:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:0 40px;
height:100%;
width:50%;
text-align:center;
transform:translateY(0);
transition:transform .6s ease-in-out;
}
.sign-up-container {
left:0;
width:50%;
z-index:2;
}
.overlay-left{
right:0;
transform:translateY(0);
}
