HTML和CSS案例：注册页面

最新推荐文章于 2021-11-29 20:15:02 发布

夜ASK

最新推荐文章于 2021-11-29 20:15:02 发布

阅读量756

点赞数 2

本文链接：https://blog.csdn.net/qq_43791139/article/details/99441125

版权

样式

在这里插入图片描述

源码

<!DOCTYPE html>
<html>
<head>
	<title>注册页面</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			box-sizing: border-box;
		}
		body{
			background: url(2.png) ; /*引入背景图片*/
			/*no-repeat center 图片不重复，居中，这里不使用*/
		}

		.rg_layout{
			width: 900px;
			height: 500px;
			border: 8px solid #EEEEEE; /*边框*/
			background-color: white; 
			/*让div水平居中*/
			margin: auto;
			margin-top: 55px;
		}

		.rg_left{
			/*border:1px solid #99ffff;*/ /*边框不要*/
			float: left;
			margin: 15px;	/*外边距*/
		}

		.rg_left > p:first-child{
			color:#FFD026;
			font-size: 20px;
		}
		.rg_left > p:last-child{
			color: #A6A6A6;
			font-size: 20px;
		}

		.rg_center{
			/*border:1px solid #99ffff;*/
			float: left;
			width: 450px;

		}
		.rg_right{
			/*border:1px solid #99ffff;*/
			float: right;
			margin: 15px;	/*外边距*/
		}
		.rg_right > p:first-child{
	
			font-size: 15px;
		}
		.rg_right p a{
			color: pink;
		}

		.td_left{
			width: 100px;
			text-align: right;
			height: 45px;
		}

		.td_right{
			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;
		}

		#btn_sub{
			width: 150px;
			height: 40px;
			background-color:#ffffcc;  
			border:1px solid #ffffcc;
		}

	</style>
</head>
<body>
		<div class="rg_layout">
			<div class="rg_left">
				<p >新用户注册</p>
				<p>USER REGISTER</p>
			</div>
			<div class="rg_center">
				<div class="rg_form">
					<!--定义表单-->
					<form action="#" method="post">
						<table>
			 				<tr>
			 					<td class="td_left"><label for="username">用户名</label></td>
			 					<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
			 				</tr>

			 				<tr>
			 					<td class="td_left"><label for="password">密码</label></td>
			 					<td class="td_right"><input type="password" name="password" id="password"  placeholder="请输入密码"></td>
			 				</tr>

			 				<tr>
			 					<td class="td_left"><label for="email">Email</label></td>
			 					<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
			 				</tr>

			 				<tr>
			 					<td class="td_left"><label for="name">姓名</label></td>
			 					<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
			 				</tr>

			 				<tr>
			 					<td class="td_left"><label for="tel">手机号</label></td>
			 					<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
			 				</tr>

			 				<tr>
			 					<td class="td_left"><label >性别</label></td>
			 					<td class="td_right"><input type="radio" name="gender" id="male" >男
			 						<input type="radio" name="gender" id="female">女
			 					</td>
			 				</tr>

			 				<tr>
			 					<td class="td_left"><label for="birthday">出生日期</label></td>
			 					<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
			 				</tr>

			 				<tr>
			 					<td class="td_left"><label for="checkcode">验证码</label></td>
			 					<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
			 						<img id="img_check" src="1.png">
			 					</td>

			 				</tr>

			 				<tr>
			 					<td colspan="2" align="center" ><input type="submit" value="注册" id="btn_sub"></td>
			 				</tr>

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