Html+Css+JS制作登录系统【半成品】

最新推荐文章于 2024-04-28 15:36:04 发布

白云千鹤

最新推荐文章于 2024-04-28 15:36:04 发布

阅读量576

点赞数 4

文章标签： css html javascript

本文链接：https://blog.csdn.net/2302_80662476/article/details/134982173

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、Html+Css+JS制作登录系统
二、使用步骤
- 1.引入库
- 2.读入数据
总结

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Html+Css+JS制作登录系统

二、使用步骤

1.引入库

代码如下（示例）：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>登录系统</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="Untitled-4.css">
</head>

<body>
	
	<header>
		<h2 class="logo">Logo</h2>
		<nav class="navigation">
			<a href="#">Home</a>
			<a href="#">About</a>
			<a href="#">Services</a>
			<a href="#">Contact</a>
			<button class="btnLogin-popup">Login</button>
		</nav>
	</header>
	
	<div class="wrapper">
		
		<div class="form-box register">
			<h2 id="othertitle">Registration</h2>
			<form action="#">
				<div class="input-box">
					<span class="icon"><ion-icon name="person"></ion-icon></span>
					<input type="text" required>
					<label id="color2">Username</label>      <!--为啥不能用class，只能用id-->
				</div>
				<div class="input-box">
					<span class="icon"><ion-icon name="lock-closed"></ion-icon></span>
					<input type="password" required >
					<label id="color3">Password</label>    <!--为啥不能用class，只能用id-->
				</div>
				<div class="remember-forgot">
					<label class="color1"><input type="checkbox">I agree to the terms & conditions</label>
				</div>
				<button type="submit" class="btn">Register</button>
				<div class="login-register">
					<p>Already have an account?<a href="#" class="login-link">Login</a></p>
				</div>
			</form>
		</div>
	</div>
	<script src="#"></script>
</body>
</html>

2.读入数据

代码如下（示例）：


*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins',sans-serif;
}

body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: url(file:///C:/Users/86150/Desktop/%E8%83%8C%E6%99%AF%E5%9B%BE.jpg) no-repeat;  /*加入背景图片*/
	background-size: cover;
	background-position: center;
}

header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 20px 100px;
	/*background: red;*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 99;
}

.logo{
	font-size: 2em;
	color: hotpink;
	user-select: none;
}

.navigation a{
	position: relative;
	font-size: 1.1em;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	margin-left: 40px;
}

.navigation a:hover::after{
	transform: scaleX(1);
	transform-origin: left;
}

.navigation a::after{
	content: '';
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -6px;
	height: 3px;
	background: #fff;
	border-radius: 5px;
	transform-origin: right;
	transform: scaleX(0);
	transition: transform .5s;
}

.navigation .btnLogin-popup{
	width: 130px;
	height: 50px;
	background: transparent;
	border: 2px solid #fff;
	outline: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1.1em;
	color: #fff;
	font-weight: 500;
	margin-left: 40px;
	transition: .5s;
}

.input-box input:focus~label,
.input-box input:valid~label{
	top:-5px;
}

.navigation .btnLogin-popup:hover{
	background: #fff;
	color:black;
}

#othertitle{
	color:#fff;
}

.wrapper{
	position: relative;
	width: 400px;
	height: 440px;
	background: transparent;
	border: 2px solid rgba(255,255,255,5);
	border-radius: 20px;
	display:flex;
	justify-content: center;
	align-items: center;
	border-bottom-left-radius: 20px;
	cursor: pointer;
	z-index: 1;
}

.color1{
	color:#fff;
}

.wrapper .form-box{
	width:100%;
	padding: 40px;
}

.form-box h2{
	font-size:2em;
	color:black;
	text-align: center;
}

.input-box{
	position: relative;
	width:100%;
	height: 50px;
	border-bottom: 2px solid #162938;
	margin: 30px 0;
}

.input-box label{
	position: absolute;
	top: 50%;
	left: 5px;
	transform: translateY(-50%);
	font-size: 1em;
	color:black;
	font-weight: 500;
	pointer-events: none;
}

.input-box input{
	width: 100%;
	height: 100%;
	background:transparent;
	border: none;
	outline: none;
	font-size: 1em;
	color: black;
	font-weight: 600;
	padding: 0 35px 0 5px;
}

.input-box .icon{
	position: absolute;
	right: 8px;
	font-size: 1.2em;
	color: black;
	line-height: 57px;
}

#color2{
	color:#fff;
}

#color3{
	color:#fff;
}

.remember-forgot{
	font-size: .9em;
	color:black;
	font-weight: 500;
	margin: -15px 0 15px;
	display: flex;
	justify-content: space-between;
}

.remember-forgot label input{
	accent-color:black;
	margin-right:3px;
}

.remember-forgot a {
	color: #fff;
	text-decoration: none;
}

.remember-forgot a:hover{
	text-decoration: underline;
}

.btn{
	width:100%;
	height: 45px;
	background: pink;
	border: none;
	outline: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1em;
	color: #fff;
	font-weight: 500;
}

.login-register{
	font-size: .9em;
	color: #fff;
	text-align: center;
	font-weight: 500;
	margin:25px 0 10px;
}

.login-register p a {
	color:#fff;
	text-decoration: none;
	font-weight: 600;
}

.login-register p a:hover{
	text-decoration: underline;
}