<!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>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
margin: auto;
margin-top: 50px;
width: 320px;
height: 420px;
background-color: #FCE7EA;
border-top: 3px solid #77C7EA;
border-left: 1px solid #77C7EA;
border-right: 1px solid #77C7EA;
}
.main{
width: 320px;
height: 320px;
border: 1px solid #DDDDDD;
}
.user .myuser{
margin-top: 30px;
margin-left: 30px;
position: relative;
}
.main img{
float: left;
}
.user input{
border: 1.8px solid #DDDDDD;
background-color: #FCE7EA;
height: 39px;
width: 200px;
}
.choose{
margin-top: 30px;
margin-left: 30px;
}
.choose span{
font-size: 12px;
color: #DDDDDD;
margin-left: 10px;
}
.choose span:hover{
color: gray;
}
.sub{
margin: 30px 30px;
}
.mycheckbox{
background-color: gray;
}
.buttom{
margin: 30px 35px;
}
.buttom span{
font-size: 14px;
}
.buttom img{
margin-left: 3px;
}
</style>
<body>
<div class="container">
<div class="main">
<div class="user">
<div class="myuser">
<div class="myImage">
<img src="./images/zhanghao.jpg" alt="">
</div>
<div class="username">
<input type="text" placeholder="用户名/邮箱/地址/手机号">
</div>
</div>
<div class="myuser">
<div class="myImage">
<img src="./images/mima.jpg" alt="">
</div>
<div class="password">
<input type="text" placeholder="请输入密码">
</div>
</div>
</div>
<div class="choose">
<input class="mycheckbox" type="checkbox" name="x1" value="remember">记住密码
<span>欢迎注册</span>
<span>忘记密码</span>
</div>
<div class="sub">
<img src="./images/but.jpg" alt="">
</div>
</div>
<div class="buttom">
<span>合作网站账号登录:</span>
<img src="./images/weixin.png" alt="">
<img src="./images/qqlogin.png" alt="">
<img src="./images/taobao.png" alt="">
</div>
</div>
</body>
</html>
