代码：
<!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">
<title>注册页</title>
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./注册页.css">
</head>
<body>
<div class="dahezi">
<div class="left">
<img src="./简约大字正能量电脑桌面壁纸.jpg" alt="">
</div>
<div class="right">
<div class="top">
<h1>快乐学习网</h1>
<h4><a href="">账号登录</a></h4>
<h4><a href="">微信登录</a></h4>
</div>
<div class="middle">
账号 <input type="text" placeholder="请输入账号"><br>
密码 <input type="password" placeholder="请输入密码">
<br><input type="checkbox" > <span>我已阅读并同意用户政策</span>
</div>
<div class="bottom">
<button type="button" class="btn btn-info">登录</button>
</div>
</div>
</div>
</body>
</html>
css：
.left{
width: 800px;
}
.left img{
width: 100%;
}
.dahezi{
display: flex;
}
.right{
margin: 60px auto;
text-align: center;
border: 1px solid rgb(181, 181, 181);
border-radius: 5px;
}
.top{
display: block;
}
.top h1{
font-weight: 700;
}
.top h4 {
/* float: left; */
display: inline-block;
margin-top:12px ;
margin-left: 53px;
margin-right: 53px;
margin-bottom: 20px;
}
.top h4 a{
color: rgb(232, 82, 209);;
}
/* .top a{
text-decoration:underline;
} */
.middle{
display: block;
margin-bottom: 20px;
font-size:17px ;
}
.middle input{
border: 1px solid rgb(189, 186, 186);
border-radius: 5px;
margin-top: 10px;
}
.middle input:nth-child(1){
margin-bottom: 15px;
}
.middle input:last-child{
margin-top: 25px;
}
.middle span{
margin-top: 25px;
font-size: 13px;
}
.btn-info{
padding: 8px 110px;
background-color: rgb(232, 82, 209);
}
.btn-info:hover{
background-color: rgb(126, 126, 126);
}