<!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>
<style>
* {
margin: 0;
padding: 0;
/* margin: 50px auto; */
list-style: none;
}
.wrap {
width: 429px;
height: 409px;
border: 1px solid black;
margin: 50px auto;
}
.a1 {
margin-top: 43px;
}
form .wrap .a7 {
width: 268px;
height: 42px;
background-color: #ff4a00;
line-height: 38px;
color: white;
border: 1px solid #ff6600;
}
.a8 {
/* display: block; */
padding-right: 59px;
text-align: right;
line-height: 53px;
position: relative;
/* text-align: 409px; */
}
.a2,
.a3,
.a4,
.a5,
.a6 {
width: 264px;
height: 38px;
}
.a9 {
font-size: 14px;
}
img {
width: 45px;
height: 30px;
position: absolute;
bottom: 167px;
left: 300px;
}
.a10 {
position: absolute;
bottom: 105px;
left: 285px;
font-size: 12px;
text-decoration: none;
}
</style>
</head>
<body>
<form action="https://www.baidu.com/" target="_blank" method="get">
<div class="wrap">
<ul class="a8">
<li class="a1">
手机:<input class="a2" type="text" placeholder="请输入手机号" name="user">
</li>
<li>
创建密码:<input class="a3" type="password" placeholder="请输入密码" name="pass">
</li>
<li>
确认密码:<input class="a4" type="password" placeholder="请再次输入密码" name="pass">
</li>
<li>
验证码:<input class="a5" type="text" placeholder="请输入验证码" name="user">
<img src="./images/验证码.png" alt="">
</li>
<li>
短信验证:<input class="a6" type="text" placeholder="请输入验证码" name="user">
<a class="a10" style="color: #333333;" href="#">免费获取短信</a>
</li>
<li>
<input class="a7" type="submit" value="注册">
</li>
<li>
<p class="a9">已有账号,请<a href="#" style="color:#ff6600 ;">登录</a></p>
</li>
</ul>
</div>
</form>
</body>
</html>