<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<style>
.tb_left {
width: 100px;
text-align: right;
height: 45px;
}
.tb_right {
padding-left: 40px;
}
#user, #password, #邮箱, #验证码, #phoneNumber, #name, #birthday {
width: 238px;
height: 25px;
padding-left: 10px;
border-radius: 5px;
}
#cit{
width: 125px;
height: 25px;
padding-left: 10px;
border-radius: 5px;
}
#验证码 {
width: 100px;
}
#p3:hover {
color: aqua;
}
#p3:active {
color: darkmagenta;
}
#p3:visited {
color: gold;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background: url("img/register_bg.png") no-repeat center;
}
.ben {
margin: auto;
margin-top: 20px;
width: 900px;
height: 500px;
background: white;
border: 8px solid #EEEEEE;
box-sizing: border-box;
}
.left {
float: left;
margin: 15px;
}
.center {
float: left;
margin: 15px;
margin-left: 50px;
}
.right {
float: right;
font-size: 15px;
margin: 15px;
}
#p1 {
color: yellow;
font-size: 20px;
}
#p2 {
color: slategray;
font-size: 20px;
}
#p3 {
color: pink;
}
#img_yan {
vertical-align: middle;
height: 35px;
}
#btn_sub{
width:140px;
height:35px;
background-color: yellow;
border: solid yellow;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="ben">
<div class="left">
<p id="p1"> 新用户注册</p>
<p id="p2">USER REGISTER</p>
</div>
<div class="center">
<form action="#" method="get">
<table>
<tr>
<td class="tb_left">
<label for="user"> 用户名</label>
</td>
<td class="tb_right">
<input type="text" name="user" placeholder="请输入用户名" id="user">
</td>
</tr>
<tr>
<td class="tb_left">
<label for="password"> 密码</label>
</td>
<td class="tb_right">
<input type="password" name="password" placeholder="请输入密码" id="password">
</td>
</tr>
<tr>
<td class="tb_left">
<label for="邮箱"> Email</label>
</td>
<td class="tb_right">
<input type="email" name="邮箱" placeholder="请输入邮箱" id="邮箱">
</td>
</tr>
<tr>
<td class="tb_left">
<label for="name"> 姓名</label>
</td>
<td class="tb_right">
<input type="text" name="name" placeholder="请输入真实姓名" id="name">
</td>
</tr>
<tr>
<td class="tb_left">
<label for="phoneNumber"> 手机号</label>
</td>
<td class="tb_right">
<input type="tel" name="phoneNumber" placeholder="请输入您的手机号" id="phoneNumber">
</td>
</tr>
<tr>
<td class="tb_left">
性别
</td>
<td class="tb_right">
<input type="radio" name="sex"> 男 <input type="radio" name="sex">女
</td>
</tr>
<tr>
<td class="tb_left">
出生日期
</td>
<td class="tb_right">
<input type="date" name="生日" id="birthday">
</td>
</tr>
<tr>
<td class="tb_left">
省份
</td>
<td class="tb_right">
<select name="city" id="cit">
<option value="">--请选择--</option>
<option value="1">成都</option>
<option value="2">北京</option>
<option value="3">上海</option>
<option value="4">东莞</option>
<option value="5">西藏</option>
</select>
</td>
</tr>
<tr>
<td class="tb_left"><label for="验证码">验证码</label></td>
<td class="tb_right">
<input type="text" name="验证码" align="center" id="验证码">
<img src="img/verify_code.jpg" alt="验证码" id="img_yan">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="注册" align="center" id="btn_sub">
</td>
</tr>
</table>
</form>
</div>
<div class="right">
<p>已有账号？<a href="#" id="p3">立即登录</a></p>
</div>
</div>
</body>
</html>
|
|
收藏
淘帖
踩
