简单表单框架

最新推荐文章于 2023-12-18 12:21:27 发布

对你微笑纯属礼貌16

最新推荐文章于 2023-12-18 12:21:27 发布

阅读量348

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40060410/article/details/78328485

代码展示

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>表单样式</title>
	<style type="text/css">
	* {
	font-size: 12px;
	margin: 0;
	padding: 0;
	}

	input {
	width: 320px;
	height: 24px;
	border: 1px solid #999;
	border-radius: 4px;
	}

	.formErr {
	border: 1px solid red;
	}

	.form .label {
	display: block;
	float: left;
	width: 128px;
	height: 40px;
	line-height: 40px;
	text-align: end;
	}

	.form .txt {
	display: block;
	float: left;
	width: 340px;
	height: 40px;
	line-height: 40px;
	padding-left: 16px;
	}

	.form button {
	width: 56px;
	height: 24px;
	background-color: green;
	border: 0;
	border-radius: 4px;
	color: white;
	}

	.form .errTips {
	width: 226px;
	background-color: lightpink;
	color: darkred;
	border-radius: 4px;
	margin-left: 144px;
	margin-top: 6px;
	margin-bottom: 4px;
	padding: 16px 48px;
	}
	</style>
	</head>
	<body>
	<div class="form">
	<div>
	<span class="label">用户名</span>
	<span class="txt"><input type="text" placeholder="6-20个字符"/></span>
	</div>
	<div style="clear: both"></div>
	<div>
	<span class="label">密码</span>
	<span class="txt"><input type="password" placeholder="6-20个字符" class="formErr"/></span>
	</div>
	<div style="clear: both"></div>
	<div>
	<span class="label">重复密码</span>
	<span class="txt"><input type="password" placeholder="再次输入密码"/></span>
	</div>
	<div style="clear: both"></div>
	<div class="errTips">
	<ul>
	<li>密码长度不能小于6个字符！</li>
	<li>密码不能为空！</li>
	<li>两次密码输入不一致！</li>
	</ul>
	</div>
	<div style="clear: both"></div>
	<div>
	<span class="label"></span>
	<span class="txt"><button>提交</button></span>
	</div>
	<div style="clear: both"></div>
	</div>
	</body>
	</html>