<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册_html</title>
<link rel="stylesheet" href="lyf_testcss02.css"/>
</head>
<body>
<form action="#" method="get">
<h1>用户注册</h1>
<div class="body">
<input type="text" name="user" placeholder="用户名" class="a"/>
</div>
<div class="b">支持中文、字母、数字、“-”、“_”的组合，4-20个字符</div>
<div>
<input type="password" name="pwd" placeholder="设置密码" class="a"/>
</div>
<div class="b">建议使用数字、字母和符号两种以上的组合，6-20个字符</div>
<div>
<input type="password" name="repwd" placeholder="确认密码" class="a"/>
</div>
<div class="b">两次密码输入不一致</div>
<div id="d">
<span>
<input type="number" name="phone" placeholder="验证手机" class="a"/>
</span>
<span>或</span>
<span><a href="#">验证邮箱</a></span>
</div>
<div id="c">
<span><input type="checkbox"/></span>
<span>我已阅读并同意</span>
<span><a href="#">《京淘用户注册协议》</a></span>
</div>
<div>
<button type="submit">立即注册</button>
</div>
</form>
</body>
</html>
.body{
border-width: 2px;
border-style: dashed;
border-color: red;
border-radius: 25px;
width: 50%;
padding: 50px;
margin: 50px ;
/*背景图案设置
background-image: url(lyf01.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed
*/
}
h1{
font-family: "微软雅黑";
font-size: 35px;
margin-left:110px ;
}
.a{
width: 350px;
height: 30px;
color: gray;
padding: 10px;
font-family: "微软雅黑";
font-size: 20px;
}
.b{
font-family: "微软雅黑";
font-size: 13px;
margin: 10px;
padding-left:10px ;
}
[type="submit"]{
font-family: "微软雅黑";
font-size: 21px;
width: 370px;
height: 43px;
color: white;
background-color: red;
border-color: red;
border-radius: 15px;
}
#c{
margin-left: 30px;
margin-top: 15px;
margin-bottom: 15px;
font-size: 17px;
}
#d{
font-size: 17px;
}
[type="checkbox"]{
zoom: 120%;
}