CSS表单实例

最新推荐文章于 2024-11-06 22:19:17 发布

覆东流

最新推荐文章于 2024-11-06 22:19:17 发布

阅读量483

点赞数 3

分类专栏：前端文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_41807399/article/details/139077066

版权

前端专栏收录该内容

50 篇文章

订阅专栏

用户登录页

用户登录页由用户名输入框、密码输入框、验证码输入框、单项选择、登录按钮和注册按钮组成。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.user{
				width: 210px;
				border: 1px solid #dBdbd0;
				padding: 1px;
			}
			.user *{
				margin: 0;
				padding: 0;
				font: normal 12px "宋体",verdana,Lucida,Arial;
			}
			.user h3{
				text-align: center;
				height: 24px;
				line-height: 24px;
				background-color: #eeeee8;
				font-weight: bold;
			}
			.user .content{
				padding: 5px;
			}
			.user .frm{
				margin-bottom: 5px;
			}
			.user .frm{
				cursor:pointer;
			}
			.frm_password label,.frm_userNAme label{
				display: block;
			}
			.frm_yjvgma input{
				width: 40px;
			}
			.frm_djxr{
				padding-left: 45px;
			}
			.frm_btns{
				padding-left: 45px;
			}
			.frm_btns a{
				text-decoration: none;
				color: #000;
				font-family: '宋体',Verdana, Geneva, Tahoma, sans-serif;
				border: 1px solid #767676;
				display: inline-block;
				height: 13px;
				line-height: 13px;
				text-align: center;
				padding: 1px;
				border-radius: 2px;
				background-color: #EFEFEF;
			}
		</style>
	</head>
	<body>
		<div class="user">
			<h3>用户登录</h3>
			<div class="content">
				<form action=" " method="post">
					<div class="frm frm_userNAme">
						<label for="userName">用户名：</label>
					<input type="text" id="userName" />
					</div>
					<div class="frm_password frm">
						<label for="password">密码：</label>
					<input type="password" id="password" />
					</div>
					<div class="frm_yjvgma frm">
						<label for="yjvgma">验证码：</label>
						<input type="text"  id="yjvgma"/>
						<!-- 一般是一组图片，在这里我使用sapn代替 -->
						<span>1547</span>  
					</div>
					<div class="frm_djxr frm">
						<input type="checkbox"  id="djxr">
						<label for="djxr">记住我的登录信息</label>
					</div>
					<div class="frm_btns">
						<button type="submit" class="btn_login">登录</button>
						<a href="#" class="reg">用户注册</a>
					</div>
				</form>
			</div>
		</div>
	</body>
</html>