写个表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				margin-top: 30px;
				transition: all .5s;
				padding: 1px;
				letter-spacing: 1px;
			}
			.vli{
				width: 430px;
				margin: 0 auto;
				display: table;
				position: relative;
				min-height: 484px;
			}
			.vli .wrapper{
				border-radius: 6px;
				max-width: 40%;
				height: 120%;
				background: #FFF;
				border: 1px solid rgb(0,0,0,.14);
				transition: all .5s;
				color: #303030;
				overflow: hidden;
			}
			.vli > div{
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				color: #fff;
				min-height: 400px;
				height: 400px;
			}
			#register{
				padding: 15px 30px 30px;
				transition: all .5s;
				background: #fff;
				width: 100%;
				box-sizing: border-box;
			}
			.vli .wrapper div div{
				position: relative;
				margin-bottom: 20px;
				box-sizing: border-box;
			}
			.vli .wrapper input{
				height: 40px;
				padding: 5px 15px;
				width: 100%;
				border: 1px solid #ddd;
				border-radius: 3px;
				color: #353434;
				box-sizing: border-box;
			}
			#login p, #register p{
				position: absolute;
				left: 17px;
			}
			.vli .wrapper h3{
				margin-bottom: 20px;
				margin-top: 5px;
			}
			.marb0{
				margin-bottom: 0 !important;
			}
			#register .pho{
				width: 60%;
				float: left;
			}
			#register .pcd{
				width: 40%;
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="body">
			<div class="vli">
				<div class="wrapper move">
					<div id="register">
						<form class="form2" method="" action="">
							<h3>免费注册</h3>
							<div class="vali">
								<input type="text" name="" value="" class="Required" placeholder="必填">
							<p style="font-size: 12px; display: inline; vertical-align: top; color: red;"></p></div>
							<div class="vali reqtps">
								<input type="text" name="" value="" class="Requireds" placeholder="必填自定义提示">
							<p style="font-size: 12px; display: inline; vertical-align: top; color: red;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" class="uersname" placeholder="请输入用户名">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" placeholder="请输入中文" class="chinese">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" placeholder="请输入数字" class="nub">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" placeholder="请输入11位手机号" class="phone">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="marb0">
								<div class="vali pho">
									<input type="text" name="" value="" placeholder="请输入验证码" class="phcode">
								<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
								<div class="vali pcd">
									<input type="button" name="" value="获取验证码" class="codebtn" disabled="disabled" style="color: rgb(150, 150, 150);">
								<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
								<div class="cl1"></div>
							</div>
							<div class="vali">
								<input type="password" name="" value="" placeholder="请填写长度为6-20个字符的密码" class="pasw">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="password" name="" value="" placeholder="请再次输入密码" id="password" class="pasws">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" class="eal" placeholder="请输入邮箱,邮箱格式,[email protected]">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" class="cid" placeholder="请输入身份证">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="submit">
								<input type="submit" class="btn" value="立即注册">
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
猜你喜欢
