CSS注册页面实现

最新推荐文章于 2024-04-20 18:03:47 发布

竹杖芒鞋看代码

最新推荐文章于 2024-04-20 18:03:47 发布

阅读量440

点赞数 1

本文链接：https://blog.csdn.net/weixin_43521197/article/details/102752345

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<style>
			body{
				background: url("img/register_bg.jpg") no-repeat;
				background-size: cover;
			}	
			.rg_outer{
				border: 8px solid #988A7B;
				width: 900px;
				height: 500px;
				background-color: white;
				/*让div水平居中*/
				margin: auto;
				margin-top: 15px;
			}
			.rg_left{
				/*border: 1px solid red;*/
				float: left;
				margin: 15px;
			}
			
			.rg_left_one{
				color: #FFCB1D;
				font-size: 20px;
				margin: 0px;
			}
			
			.rg_left_two{
				color: #A4A6A3;
				font-size: 20px;
				margin: 0px;
			}
			
			.rg_center{
				/*border: 1px solid red;*/
				width: 450px;
				float: left;
				margin-top: 25px;
			}
			
			.rg_right{
				/*border: 1px solid red;*/
				float: right;
				margin: 15px;
			}
			
			.rg_right p{
				font-size: 15px;
			}
			.rg_right p a{
				color: orangered;
				text-decoration: none;	
									
			}

			.td_left{
				text-align: right;
				width: 100px;
				height: 45px;
			}
			
			.td_right{
				padding-left: 45px;
			}
			
			#username, #birthday, #email, #password, #tel{
				width: 250px;
				height: 30px;
				border: 1px solid #A4A6A3 ;
				/*设置边框圆角*/
				border-radius: 5px;
				padding-left: 5px;
			}
			#checkcode{
				width: 100px;
				height: 30px;
				border: 1px solid #A4A6A3 ;
				/*设置边框圆角*/
				border-radius: 5px;
				padding-left: 5px;
			}
			#img_check{
				width: 100px;
				height: 30px;
				/*垂直居中对齐*/
				vertical-align: middle;
			}
			
			#btn_sub{
				width: 100px;
				height: 30px;
				background-color: orange;
				border: 1px orange;
			}
		</style>
	</head>
	
	<body>
		<div class="rg_outer">
			<div class="rg_left">
				<p class="rg_left_one">新用户注册</p>
				<p class="rg_left_two">USER REGISTER</p>
			</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" 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="text" 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="email" id="email" 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="gender" value="male">男
								<input type="radio" name="gender" id="gender" value="female">女
							</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" placeholder="请输入验证码" />
								<img id="img_check" src="img/checkcode.jpg" />
							</td>
						</tr>
						
						
						<tr>
							<!--colspan是列合并  rowspan是行合并 后面是是合并的数量-->
							<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册" /></td>
						</tr>
											
					</table>
				</form>
			</div>
			<div class="rg_right">
				<p>已有账号  <a href="#">立即登录</a></p>
			</div>
		</div>
	</body>
</html>

下图为代码运行效果：

竹杖芒鞋看代码

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS注册页面实现

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> body{ background: url("img/register_bg.jpg") no-repeat; ba...
复制链接

扫一扫