先上效果
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>欢迎来到登录界面</title>
<link rel="stylesheet" href="./login.css">
<script src="./index.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<img src="./login_left.jpg" alt="" class="first">
<div class="login_right">
<div class="login_content">
<div class="welcome">
欢迎登录!
</div>
<div class="login_main_content">
<input type="text" class="input" placeholder="用户名"><br>
<input type="text" class="input" placeholder="密码">
<input type="button" value="登录" class="btn">
<div class="sign">
<a href="./register.html">没有账号，点此注册</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>css代码:
*{
padding:0;
margin:0;
}
body{
background: linear-gradient(100deg,#a29bfe,#fd79a8);
}
.container{
position: relative;
display: flex;
justify-content: center;
margin-top:250px;
}
.first{
width:300px;
height:400px;
}
.container .main{
display: flex;
}
.container .main .login_right{
width:400px;
height:400px;
background-color: skyblue;
display: flex;
align-items: center;
position: relative;
}
.container .main .login_right .login_content .welcome{
font-size: 30px;
color: #8b4513;
font-style: italic;
font-weight: bold;
text-align: center;
position: absolute;
width:80%;
top: 50px;
padding-bottom:15px;
margin-left:35px;
}
.container .main .login_right .login_content .input{
border-top: none; /* 去除上边框 */
border-left: none; /* 去除左边框 */
border-right: none; /* 去除右边框 */
border-bottom: solid 1px rgb(229,229,229); /* 添加底部边框并设置颜色、大小等参数 */
background-color: transparent;
width:270px;
padding-bottom:10px;
margin-bottom:30px;
}
.container .main .login_right .login_content .btn{
background-color: rgb(31,200,253);
color:#fff;
font-size: 16px;
border:none;
width: 250px;
height:40px;
position: absolute;
top: 280px;
left: 70px;
cursor: pointer;
}
.container .main .login_right .login_content .login_main_content{
font-size: 16px;
color:#fff;
padding-left:60px;
}
.container .main .login_right .login_content .login_main_content .sign{
position: absolute;
right: 20px;
bottom: 12px;
}
.container .main .login_right .login_content .login_main_content .sign a{
text-decoration: none;
font-size:12px;
color:#fff;
}
.container .main .login_right .login_content .login_main_content .account{
padding-bottom:40px;
}
.container .main .login_right .login_content .login_main_content .sign a:hover{
color:#fd79a8;
}
