<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body,input{
margin: 0;
padding: 0;
}
body{
background-image: url(images/bg.jpg);/*设置背景图片*/
background-repeat:no-repeat;/*图片适应窗口大小，这里设置的是不进行平铺*/
background-attachment: fixed;/*图片相对于浏览器固定,这里设置背景图片固定，不随内容滚动*/
background-origin: border-box;/*从边框区域显示*/
background-size:cover;/
}
input{
display: inline-block;
background: #fff;
}
.container{
width: 100%;
}
.register-box{
position: relative;
height: 800px;
width: 800px;
top: 50px;
margin: 0 auto;
z-index: 99999;
background:#ffffff;
border: 7px solid #ccc;
}
.title-box{
position: absolute;
width: 300px;
height: 50px;
margin-left: 250px;
margin-top: 5px;
text-align: center;
font-size: 28px;
font-weight: 800;
color: black;
line-height: 50px;
}
.username-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:100px;
margin-left:80px;
font-weight: 700;
}
.username-input{
display: inline-block;
margin-left: 45px;
/*background: green;*/
}
#username{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
.password-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:180px;
margin-left:80px;
font-weight: 700;
}
.password-input{
display: inline-block;
margin-left: 61px;
}
#password{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
.rePassword-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:260px;
margin-left:80px;
font-weight: 700;
}
.rePassword-input{
display: inline-block;
margin-left: 28px;
}
#rePassword{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
.phone-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:340px;
margin-left:80px;
font-weight: 700;
}
.phone-input{
display: inline-block;
margin-left: 28px;
}
#phone{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
.email-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:420px;
margin-left:80px;
font-weight: 700;
}
.email-input{
display: inline-block;
margin-left: 28px;
}
#email{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
.gender-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:500px;
margin-left:82px;
font-weight: 700;
}
.gender-input{
display: inline-block;
margin-left: 62px;
}
.require{
color: red;
}
.submit-box{
position:absolute;
width: 66px;
height: 40px;
line-height: 40px;
margin-top: 580px;
margin-left:200px;
border-radius: 5px;
background: grey;
}
#submit-button{
display: inline-block;
width: 66px;
height: 40px;
border-radius: 5px;
background: green;
}
.goLogin-box{
position:absolute;
width: 150px;
height: 20px;
margin-top: 600px;
margin-left:320px;
}
</style>
</head>
<body>
<div class="container">
<div class="register-box">
<div class="title-box">
<span>用户注册页面</span>
</div>
<form action="#" method="post">
<div class="username-box">
<span class="require">*</span>
<label for="username">用户名</label>
<div class="username-input">
<input type="text" id="username" name="username" placeholder="请输入用户名 " />
</div>
</div>
<div class="password-box">
<span class="require">*</span>
<label for="password">密码</label>
<div class="password-input">
<input type="password" id="password" name="password" placeholder="请输入密码 " />
</div>
</div>
<div class="rePassword-box">
<span class="require">*</span>
<label for="rePassword">确认密码</label>
<div class="rePassword-input">
<input type="password" id="rePassword" name="RePassword" placeholder="请重复输入密码" />
</div>
</div>
<div class="phone-box">
<span class="require">*</span>
<label for="phone">手机号码</label>
<div class="phone-input">
<input type="text" id="phone" name="phone" placeholder="请输入手机号码" />
</div>
</div>
<div class="email-box">
<span class="require">*</span>
<label for="email">电子邮箱</label>
<div class="email-input">
<input type="text" id="email" name="email" placeholder="请输入邮箱地址" />
</div>
</div>
<div class="gender-box">
<span class="require">*</span>
<label for="gender">性别</label>
<div class="gender-input">
<input type="radio" id="gender" name="gender" value="男" checked="checked" />男
<input type="radio" id="gender" name="gender" value="女" />女
</div>
</div>
<div class="submit-box">
<input id = "submit-button" type="submit" value="注册">
</div>
<div class="goLogin-box">
<a href="#" style="text-decoration: none;">已有账号？去登录</a>
</div>
</form>
</div>
</div>
</body>
</html>
效果如下图
