html注册页面

<!DOCTYPE html>
<html>
  <head>
    <title>Register.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="./styles.css">
    
    <style>
    	*
    	{
    		margin:0px;
    		padding:0px;
    		box-sizing:border-box;
    	}
    	body
    	{
    		background:url("Img/image.jpg") no-repeat center;
    		margin:15px;
    	}
    	
    	.Layout
    	{
    		width:900px;
    		height:500px;
    		border:3px solid #EEEEEE;
    		background-color:white;
    		
    		margin:auto;
    		magin-top:15px;
    	}
    	
    	.left_info
    	{
    		/*border:1px solid red;*/
    		float:left;
    		margin:15px;
    	}
    	
    	.right_info
    	{
    		/*border:1px solid red;*/
    		float:right;
    		margin:15px;
    	}
    	
    	.register_info
    	{
    		/*border:1px solid red;*/
    		float:left;
    		
    		width:450px;
    		
    	}
    	
    	.left_info > p:first-child
    	{
    		color:#FFD026;
    		font-size:20px;
    	}
    	
    	.left_info > p:last-child
    	{
    		color:#A6A6A6;
    		font-size:20px;
    	}
    	
    	.right_info > p:first-child
    	{
    		color:#A6A6A6;
    		font-size:15px;
    	}
    	
    	.right_info p a
    	{
    		color:pink;
    	}
    	
    	.td_out
    	{
    		width:100px;
    		text-align:right;
    		height:45px;
    	}
    	
    	.td_in
    	{
    		padding-left:50px;
    	}
    	
    	#username,#password,#email,#name,#tel,#birthday,#checkcode
    	{
    		width:251px;
    		height:32px;
    		border:1px solid #A6A6A6;
    		
    		/*设置圆角*/
    		border-radius:5px;
    		
    		padding-left:10px;
    	}
    	
    	#checkcode
    	{ 
    		width:110px;
    	}
    	
    	#img_check
    	{
    		height:32px;
    		vertical-align:middle;
    	}
    	
    	#sub
    	{
    		width:150px;
    		height:40px;
    		background-color:#FFDE26;
    		border:ipx solid;
    	}
    </style>
  </head>
  
  <body>
	<div class="Layout">
		<div class="left_info">
			<p>新用户注册</p>
			<p>USER REGISTER</p>
		</div>

		<div class="register_info"> 
			<div class="register">
				<form action="" method="post">
					<table>
						<tr>
							<td class="td_out"><label for="username">用户名</label></td>
							<td class="td_in"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
						</tr>
						<tr>
							<td class ="td_out"><label for="password">密码</label></td>
							<td class ="td_in"><input type="password" name="password" id="password" placeholder="请输入用户名"></td>
						</tr>
						<tr>
							<td class ="td_out"><label for="email">邮箱</label></td>
							<td class ="td_in"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
						</tr>
						<tr>
							<td class ="td_out"><label for="name">姓名</label></td>
							<td class ="td_in"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
						</tr>
						<tr>
							<td class ="td_out"><label for="tel">电话号码</label></td>
							<td class ="td_in"><input type="text" name="tel" id="tel" placeholder="请输入电话号码"></td>
						</tr>
						<tr>
							<td class ="td_out"><label >性别</label></td>
							<td class ="td_in">
								<input type="radio" name="gender" value="man"> 男
								<input type="radio" name="gender" value="women"> 女
							</td>
						</tr>
						<tr>
							<td class ="td_out"><label for="birthday" >出生日期</label></td>
							<td class ="td_in"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
						</tr>
						<tr>
							<td class ="td_out"><label for="checkcode" >验证码 </label></td>
							<td class ="td_in">
								<input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
								<img src="" id="img_check">
							</td>
						</tr>
						<tr> <td colspan="2" align="center"><input type="submit" value="注册" id="sub"></td></tr>
					</table>	
				</form>
			</div>
		</div>
		
		<div class="right_info">
			<p>已有账号?<a href="#">立即登录</a></p>
		</div>
	</div>
  </body>
</html>
TxyITxs
发布了126 篇原创文章 · 获赞 10 · 访问量 1万+
私信关注
猜你喜欢
