HTML与CSS实现的登录界面设计-优快云博客

登录 html与css

<!-- html代码 -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录界面</title>
	<link href="style/div.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="login">
		<form name="loginform" method="post" action="#">
			<div class="loginFunc">
				<span class="loginFuncApp">二维码登录</span>
				<span class="loginFuncNormal">邮箱账号登录</span>
			</div>
			<input type="text" placeholder="邮箱账号或手机号" class="identity">
			<input type="password" placeholder="密码" class="password">
			<p class="info">
				<input type="checkbox" class="checkbox">
				<span>十天内免登录</span>
				<span class="help">
					<a href="#">忘记密码？</a>
				</span>
			</p>
			<input type="submit" value="登 录" class="submit">
			<input type="button" value="注 册" class="button">
		</form>
	</div>
</body>
</html>

<!-- css代码 -->
@charset "utf-8";
/* CSS Document */
*{
	padding: 0px;
	margin: 0px;
	border: 0px;
}
body{
	font-family: "微软雅黑";
}
input:focus{
	outline: none;
}
#login{
	width: 450px;
	height: 380px;
	border: 1px solid #999;
	box-shadow: 10px;
	margin: 40px auto;
}
#login .loginFunc{
	height: 48px;
	width: 100%;
	margin-bottom: 45px;
}
.loginFuncApp,.loginFuncNormal{
	display: inline-block;
	width: 100px;
	text-align: center;
	line-height: 48px;
	color: #666;
	margin: 10px 60px;
}
.loginFuncNormal{
	color: #0a8745;
	border-bottom: 2px solid #0a8745;
}
.identity,.password{
	width: 328px;
	height: 45px;
	margin: 10px 60px 10px 38px;
	border: 1px solid #ccc;
	padding-left: 45px;
}
.identity{
	background: url("../images/timg1.png") no-repeat 10px center;
}
.password{
	background: url("../images/timg2.png") no-repeat 10px center;
}
.identity:focus,.password:focus{
	border: 1px solid #0A8745;
}
::-webkit-input-placeholder{
	color: #ccc;
}
.info{
	height: 20px;
	padding: 0 0 10px 40px;
}
.checkbox{
	width: 16px;
	height: 16px;
	vertical-align: bottom;
}
.info span{
	font-size: 14px;
	color: #666;
	vertical-align: bottom;
	margin-left: 10px;
}
.info span.help{
	margin-left: 190px;
}
.info span a{
	color: #0A8745;
	text-decoration: none;
}
.submit,.button{
	width: 172px;
	height: 50px;
	border-radius: 4px;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
}
.submit{
	background: #0A8745;
	color: #fff;
	margin: 20px 20px 0px 40px;
}
.button{
	border: 1px solid #a7d4bd;
	color: #0A8745;
	background: #e6f3ec;
}
.submit:hover{
	background: #077e3f;
}
.button:hover{
	background: #cee7da;
}