css注册页面

最新推荐文章于 2023-07-26 21:17:30 发布

star walkin

最新推荐文章于 2023-07-26 21:17:30 发布

阅读量273

点赞数

文章标签： java

本文链接：https://blog.csdn.net/qq_44336097/article/details/109757281

版权

<!--案例-->
<!DOCTYPE html>
<html>
<head>
	<title>注册页面</title>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
	}

	body{
		background: url("img/bg.png") no-repeat center;
	}

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

	.rg_left{
		/*border: 1px solid red;*/
		float: left;
		margin: 15px;
	}

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

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


	.rg_center{
		/*rder: 1px solid red;*/
		float: left;

		width: 450px;
	}

	.rg_right{
		/*border: 1px solid red;*/
		float: right;
		margin: 15px;
	}

	.rg_left > p: first-child{
		color: #A6A6A6;
		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: 10px;
	}

	#checkcode{
		width: 110px;
	}

	#img_check{
		height: 32px;
		vertical-align: middle;
	}

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

</style>
</head>
<body>
	<div class="rg_layout">
		<div class="rg_left">
			<p class="p_reg">新用户注册</p>
			<p>USER REGISTER</p>
		</div>

		<div class="rg_center">
			<div class="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"></label> Email</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"> 性别</td>
							<td class="td_right">
								<input type="radio" name="gender" value="male"> 男
								<input type="radio" name="gender" value="male"> 女
							</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="img/ver_vode.jpg">
							</td>
						</tr>

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

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

在这里插入图片描述