使用html和css写一个简单的登录页面


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			body{
				background-color: azure;
			}
			.rg_layout{
				width:900px;
				height: 500px;
				margin: auto;
				background-color: white;
				border: 8px solid #EEEEEE;
				margin-top:30px;
			}
			.rg_left {
				border: 1px solid red;
				width: 200px;
				padding: 10px;
				float: left;
			}
			.rg_center{
				
				width:450px;
				float: left;
			}
			.rg_right{
				border: 1px solid red;
				width: 200px;
				float: right;
			}
			.td_left {
				width:100px;
				text-align: right;
				height: 45px;
			}
			.td_right{
				
				padding-left: 15px;
			}
			#username,#password,#email,#tel ,#name,#birthday,#checkcode{
				width: 251px;
				height: 32px;
				border: 1px solid #A6A6;
				border-radius: 5px;
				padding-left: 10px;
			}
			#checkcode{
				width: 110px;
			}
			#btn-sub{
				width:150px;
				height:40px;
				background-color: #00CCFF;
				border:1px solid #00CCFF;
			    border-radius: 5px;
			}
			#img_check{
				height: 32px;
				vertical-align: middle;//垂直居中
			}
		style>
	head>
	<body>
		<div class="rg_layout">
			<div class="rg_left">
				<p>新用户注册p>
				<P>USER REGISTERP>
			div>
			<div class="rg_center">
				<form action="#" method="post">
					<table>
						<tr>
							<td class="td_left">
								<label for="username">用户名:label>
							td>
							<td class="td_right">
								<input type="text" name="username" placeholder="请输入用户名" id="username">
							td>
						tr>
						<tr>
							<td class="td_left">
								<label for="password">密码:label>
							td>
							<td class="td_right">
								
							td>
						tr>
						<tr>
							<td class="td_left">
								<label for="email">Email:label>
							td>
							<td class="td_right">
								<input type="email" name="email"  id="email">
							td>
						tr>
						<tr>
							<td class="td_left">
								<label for="name">姓名:label>
							td>
							<td class="td_right">
								<input type="text" name="name" id="name">
							td>
						tr>
						<tr>
							<td class="td_left">
								<label for="tel">手机号:label>
							td>
							<td class="td_right">
								<input type="text" name="tel" id="tel">
							td>
						tr>
						<tr>
							<td class="td_left"><label >性别:label>td>
							<td class="td_right">
								<input type="radio" name="gender" value="man"><input type="radio" name="gender" value="woman">td>
						tr>
						<tr>
							<td class="td_left"><label for="birthday">出生日期label>td>
							<td class="td_right">
								<input type="date" name="birthday" id="birthday">
							td>
						tr>
						<tr>
							<td class="td_left"><label for="checkcode">验证码label>td>
							<td class="td_right">
								<input type="text" name="checkcode" id="checkcode">
								<img src="#" id="img_check">
							td>
						tr>
						<tr>
							<td colspan="2" align="center"><input type="submit" value="注册" id="btn-sub"/>td>	
						tr>

					table>		
				form>	
			div>
			<div class="rg_right">
				<P>已有账号<a href="#">立即登录a>P>	
			div>
		div>
	body>
html>



你可能感兴趣的:(使用html和css写一个简单的登录页面)