HTML5网页设计基础——用户注册界面

案例：代码：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{margin:0;padding: 0;}.wai{margin:auto;width:1000px;height: 600px;backgroun

78岁大龄程序员

5316人浏览 · 2022-02-09 12:30:41

78岁大龄程序员 · 2022-02-09 12:30:41 发布

案例：

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		*{
			margin:0;
			padding: 0;
		}
		.wai{	
				margin:auto;
				width:1000px;
				height: 600px;
				background: #efefef;
		}
		.nei{
			margin:auto;
			width:800px;
			height: 50px;
			background: #38b593;
		}
		span{
			display:inline-block;
			margin-top: 58px;
			width:790px;
			height: 400px;
			border:5px solid #fff;		
		}
		input{
			border:1px solid #b6c6d6;
			width:280px;
			height: 25px;
			margin-left:230px;
			font-size: 12px;
			padding-left: 50px;
			color:#999;
		}
		form{
			margin-top: 20px;
		}
		p{	
			font-size: 14px;
			margin-bottom:30px;
		}
		
		.five{
			border: none;
			font-size: 13px;
			background-color:#38b593;
			color:#fff;
			width:330px;
			height: 30px;
			margin-left:230px;
			padding-right:50px;
		}
		.one{
			font-size:20px;
			color: #7c7c7b;
			margin-left: 150px;
		}
		
		
	
		
	</style>
</head>

<body>
	<div class="wai">
	<div class="nei">
		<span>
			<form action="#" method="post">
				<p class="one">注册新用户</p>
				<p><input type="text"  value="用户名"></p>
				<p><input type="text"  value="密码"></p>
				<p><input type="text"  value="记住密码"></p>
				<p><input type="text"  value="邮箱" ></p>
				<p><input type="button" class="five" value="注册新用户"></p>
			</form>
		</span>
	</div>
	</div>
</body>
</html>