HTML 实现一个简单而精美的登录界面

效果图代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-wi

News777

6381人浏览 · 2022-04-15 10:21:45

News777 · 2022-04-15 10:21:45 发布

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./login.css" />
	</head>
	<body>
		<div class="container">
			<div class="loginForm">
				<div class="formHeader">
					<div class="logo">
						<img src="./img/logo.png" alt="" />
					</div>
					<div class="comName">
						<h3>WHH</h3>
						<p>找到属于你的哇哈哈饮料</p>
					</div>
				</div>
				<div class="formTitle">登录你的账户</div>
				<form action="">
					<div class="items">
						<label class="itemsTitle"><strong>Email</strong></label>
						<input
							type="email"
							class="form-control"
							value="hello@example.com"
						/>
					</div>
					<div class="items">
						<label class="itemsTitle"><strong>Password</strong></label>
						<input type="password" class="form-control" value="123456" />
					</div>
					<div class="form-check">
						<div>
							<input type="checkbox" id="basic_checkbox_1" />
							<label class="form-check-label" for="basic_checkbox_1"
								>记住我</label
							>
						</div>
						<div class="forgetPwd">
							<a href="#">忘记密码?</a>
						</div>
					</div>
					<div class="form-submit">
						<button type="submit">登 录</button>
					</div>
				</form>
				<div class="new-account">
					<p>
						还没有账号?
						<a href="#">点击注册</a>
					</p>
				</div>
			</div>
		</div>
	</body>
</html>

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
h3,
p {
	margin: 0;
	padding: 0;
}
.container {
	background: #f8e5e0;
	height: 100vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}
.container .loginForm {
	width: 30%;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	height: 60%;
	background: #fff;
	border-radius: 10px;
	padding: 3.125rem;
}
.container .loginForm .formHeader {
	display: flex;
	justify-content: center;
	margin-bottom: 10px;
}
.container .loginForm .formHeader .comName {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin-left: 15px;
}
.container .loginForm .formHeader .comName h3 {
	font-size: 36px;
	font-weight: 600;
	vertical-align: top;
	color: rgb(70, 66, 66);
	font-family: 'Georgia', Tahoma, Sans-Serif;
}
.container .loginForm .formHeader .comName p {
	color: rgb(61, 51, 51);
}
.container .loginForm .formTitle {
	text-align: center;
	font-size: 24px;
	letter-spacing: 10px;
	text-indent: 10px;
	font-weight: 800;
	margin-bottom: 20px;
}
.container .loginForm form .items {
	margin-bottom: 25px;
}
.container .loginForm form .items .itemsTitle {
	margin-bottom: 10px;
	font-family: 'poppins', sans-serif;
	color: #393939;
}
.container .loginForm form .items .form-control {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0.3125rem 1.25rem;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.5;
	color: #393939;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #f5f5f5;
	appearance: none;
	border-radius: 1rem;
	height: 3.5rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.container .loginForm form .form-check {
	margin-bottom: 40px;
	display: flex;
	justify-content: space-between;
}
.container .loginForm form .form-check .form-check-label {
	color: #292424;
	font-weight: 600;
}
.container .loginForm form .form-check .forgetPwd a {
	text-decoration: none;
	color: #898282;
}
.container .loginForm form .form-submit {
	margin-bottom: 15px;
}
.container .loginForm form .form-submit button {
	outline: 0;
	border: none;
	width: 100%;
	background-color: #f93a0b;
	padding: 0.938rem 1.5rem;
	border-radius: 1.125rem;
	font-weight: 400;
	font-size: 1.4rem;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
.container .loginForm .new-account {
	color: #898282;
}
.container .loginForm .new-account a {
	text-decoration: none;
	color: #c72e09;
}