html-css练习题 (注册表单)

代码赏析：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	body{
	background:#18c1ff;
	}
	.box{
	width:500px;
	height:550px;
	background: #f9f9f9;
	margin:50px auto;
	overflow:hidden;
	}

	.box h2{
	width:430px;
	font-size:24px;
	line-height: 50px;
	color:#fd8653;
	font-weight:normal;
	margin:10px auto 20px;
	border-bottom:1px solid #d5d5d5;

	}
	.form{
	width:430px;
	overflow:hidden;
	margin:15px 0 25px 25px;
	}

	.form label{
	float:left;
	width:100px;
	height:38px;
	line-height: 38px;
	text-align: right;
	font-size:14px;
	}

	.form input{
	width:300px;
	height:30px;
	border:1px solid red;
	outline:none;
	text-indent:10px;
	float:left;
	font-size:14px;
	}

	.form textarea{
	width:300px;
	height:60px;
	border:1px solid blue;
	outline:none;
	}

	.form .check{
	width:15px;
	height:15px;
	border:1px solid #ccc;
	margin-left:100px;
	}

	.form .xieyi{
	float:left;
	color:#333;
	font-size:14px;
	margin-left:10px;

	}

	.zhuce{
	width:330px;
	height:38px;
	background:#00ccff;
	border:0px;
	font-size:18px;
	color:#fff;
	margin-left:100px;
	}

	</style>
	</head>
	<body>
	<!-- 1.搭建框架界面 -->
	<div class="box">
	<h2>注册表单</h2>
	<form action="">
	<div class="form">
	<label for="">用户名：</label>
	<input type="text">
	</div>
	<div class="form">
	<label for="">密码：</label>
	<input type="password">
	</div>
	<div class="form">
	<label for="">确认密码：</label>
	<input type="password">
	</div>
	<div class="form">
	<label for="">邮箱：</label>
	<input type="text">
	</div>
	<div class="form">
	<label for="">个人简介：</label>
	<textarea name="" id=""></textarea>
	</div>
	<div class="form">
	<input type="checkbox" class="check">
	<span class="xieyi">同意用户协议</span>
	</div>
	<input type="submit" value="注册" class="zhuce">

	</form>

	</div>

	</body>
	</html>