|
|
|
@ -0,0 +1,280 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>账户注册</title>
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
body,input{
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
background-image: url("图片/timg(5).jpg");
|
|
|
|
|
background-position: left;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
input{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
.xiao-container{
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
.xiao-register-box{
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 800px;
|
|
|
|
|
width: 800px;
|
|
|
|
|
top: 50px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
z-index: 99999;
|
|
|
|
|
border: 7px solid #ccc;
|
|
|
|
|
background-image: url( '' );
|
|
|
|
|
background-position:right;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
.xiao-title-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 300px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
margin-left: 250px;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
font-weight: 800;
|
|
|
|
|
color: #ff5000;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
}
|
|
|
|
|
.xiao-username-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 420px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
margin-top:100px;
|
|
|
|
|
margin-left:80px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
.xiao-username-input{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 45px;
|
|
|
|
|
/*background: green;*/
|
|
|
|
|
}
|
|
|
|
|
#username{
|
|
|
|
|
height: 35px;
|
|
|
|
|
width: 290px;
|
|
|
|
|
border: 2px solid #ccc;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
.xiao-userPassword-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 420px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
margin-top:180px;
|
|
|
|
|
margin-left:80px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
.xiao-userPassword-input{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 61px;
|
|
|
|
|
}
|
|
|
|
|
#userPassword{
|
|
|
|
|
height: 35px;
|
|
|
|
|
width: 290px;
|
|
|
|
|
border: 2px solid #ccc;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
.xiao-userRePassword-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 420px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
margin-top:260px;
|
|
|
|
|
margin-left:80px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
.xiao-userRePassword-input{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 28px;
|
|
|
|
|
}
|
|
|
|
|
#userRePassword{
|
|
|
|
|
height: 35px;
|
|
|
|
|
width: 290px;
|
|
|
|
|
border: 2px solid #ccc;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
.xiao-userPhone-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 420px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
margin-top:340px;
|
|
|
|
|
margin-left:80px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
.xiao-userPhone-input{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 28px;
|
|
|
|
|
}
|
|
|
|
|
#userPhone{
|
|
|
|
|
height: 35px;
|
|
|
|
|
width: 290px;
|
|
|
|
|
border: 2px solid #ccc;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
.xiao-userEmail-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 420px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
margin-top:420px;
|
|
|
|
|
margin-left:80px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
.xiao-userEmail-input{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 28px;
|
|
|
|
|
}
|
|
|
|
|
#userEmail{
|
|
|
|
|
height: 35px;
|
|
|
|
|
width: 290px;
|
|
|
|
|
border: 2px solid #ccc;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
.xiao-userIntro-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 420px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
margin-top:500px;
|
|
|
|
|
margin-left:80px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
.xiao-userIntro-input{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 28px;
|
|
|
|
|
}
|
|
|
|
|
#userIntro{
|
|
|
|
|
height: 35px;
|
|
|
|
|
width: 290px;
|
|
|
|
|
border: 2px solid #ccc;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.xiao-userGender-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 420px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
margin-top:580px;
|
|
|
|
|
margin-left:82px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
.xiao-userGender-input{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 62px;
|
|
|
|
|
}
|
|
|
|
|
.xiao-require{
|
|
|
|
|
color: red;
|
|
|
|
|
}
|
|
|
|
|
.xiao-submit-box{
|
|
|
|
|
position:absolute;
|
|
|
|
|
width: 80px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
margin-top: 660px;
|
|
|
|
|
margin-left:200px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background: grey;
|
|
|
|
|
}
|
|
|
|
|
#xiao-submit-button{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 80px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background: #C5C5F8;
|
|
|
|
|
}
|
|
|
|
|
.xiao-goLogin-box{
|
|
|
|
|
position:absolute;
|
|
|
|
|
width: 150px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
margin-top: 670px;
|
|
|
|
|
margin-left:320px;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="xiao-container">
|
|
|
|
|
<div class="xiao-register-box" >
|
|
|
|
|
<div class="xiao-title-box">
|
|
|
|
|
<span>用户注册</span>
|
|
|
|
|
</div>
|
|
|
|
|
<form action="#" method="post">
|
|
|
|
|
<div class="xiao-username-box">
|
|
|
|
|
<span class="xiao-require">*</span>
|
|
|
|
|
<label for="username">用户名</label>
|
|
|
|
|
<div class="xiao-username-input">
|
|
|
|
|
<input type="text" id="username" name="username" placeholder="请输入用户名 长度:6-12个字符" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="xiao-userPassword-box">
|
|
|
|
|
<span class="xiao-require">*</span>
|
|
|
|
|
<label for="userPassword">密码</label>
|
|
|
|
|
<div class="xiao-userPassword-input">
|
|
|
|
|
<input type="password" id="userPassword" name="userPassword" placeholder="请输入密码 长度:6-12个字符" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="xiao-userRePassword-box">
|
|
|
|
|
<span class="xiao-require">*</span>
|
|
|
|
|
<label for="userRePassword">确认密码</label>
|
|
|
|
|
<div class="xiao-userRePassword-input">
|
|
|
|
|
<input type="password" id="userRePassword" name="userRePassword" placeholder="请重复输入密码" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="xiao-userPhone-box">
|
|
|
|
|
<span class="xiao-require">*</span>
|
|
|
|
|
<label for="userPhone">手机号码</label>
|
|
|
|
|
<div class="xiao-userPhone-input">
|
|
|
|
|
<input type="text" id="userPhone" name="userPhone" placeholder="请输入您的手机号码,11位有效数字" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="xiao-userEmail-box">
|
|
|
|
|
<span class="xiao-require">*</span>
|
|
|
|
|
<label for="userEmail">电子邮箱</label>
|
|
|
|
|
<div class="xiao-userEmail-input">
|
|
|
|
|
<input type="text" id="userEmail" name="userEmail" placeholder="请输入您的邮箱地址,如:123@qq.com" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xiao-userIntro-box">
|
|
|
|
|
<span class="xiao-require">*</span>
|
|
|
|
|
<label for="userIntro">生涯介绍</label>
|
|
|
|
|
<div class="xiao-userIntro-input">
|
|
|
|
|
<input type="Introduction" id="userIntro" name="userIntro" placeholder="介绍下自己吧" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="xiao-userGender-box">
|
|
|
|
|
<span class="xiao-require">*</span>
|
|
|
|
|
<label for="userGender">性别</label>
|
|
|
|
|
<div class="xiao-userGender-input">
|
|
|
|
|
<input type="radio" id="userGender_01" name="userGender" value="0" checked="checked" />男
|
|
|
|
|
<input type="radio" id="userGender_02" name="userGender" value="1" />女
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="xiao-submit-box">
|
|
|
|
|
<input id = "xiao-submit-button" type="submit" value="注册">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="xiao-goLogin-box">
|
|
|
|
|
<a href="#" style="text-decoration: none;">已有账号?去登录</a>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|