Html登录系统（未完成）

最新推荐文章于 2024-05-23 20:09:14 发布

白云千鹤

最新推荐文章于 2024-05-23 20:09:14 发布

阅读量397

点赞数 8

文章标签： html 前端

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

版权

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

文章目录

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

前言

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

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

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

一、Html登录系统

二、使用步骤

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-2.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 login">
			<h2>Login</h2>
			<form action="#">
				<div class="input-box">
					<span class="icon"><ion-icon name="mail"></ion-icon></span>
					<input type="email" required>
					<label>Email</label>
				</div>
				<div class="input-box">
					<span class="icon"><ion-icon name="lock-closed"></ion-icon></span>
					<input type="password" required>
					<label>Password</label>
				</div>
				<div class="remember-forgot">
					<label><input type="checkbox">Remember me</label>
					<a href="#">Forgot Password?</a>
				</div>
				<button type="submit" class="btn">Login</button>
			</form>
		</div>
	</div>
	<script src="#"></script>
</body>
</html>

2.读入数据

代码如下（示例）：

@charset "utf-8";
/* CSS Document */

*{
	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("#") 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: #fff;
	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;
}

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

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

白云千鹤

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Html登录系统（未完成）

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考提示：这里对文章进行总结：例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
复制链接

扫一扫