请收下简洁好看的登录注册页面（html+css+js）

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

匣子TechCrate

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

阅读量2k

点赞数 6

文章标签： html css js javascript

本文链接：https://blog.csdn.net/qq_53122285/article/details/131359830

版权

这次的登录注册页面太香了，用到的技术是html+css+js，整体简洁好看，源码齐全，适合继续延伸拓展喜欢的朋友走过路过不要错过哦，请看下面的效果图

登录页面部分代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		
		<link rel="stylesheet" href="fonts/material-icon/css/material-design-iconic-font.min.css">
		<link rel="stylesheet" href="css/style.css">
		</head>
		<body>
		
			<div class="main">
		
				<!-- Sing in  Form -->
				<section class="sign-in">
					<div class="container">
						<div class="signin-content">
							<div class="signin-image">
								<figure>
									<img src="images/signin-image.jpg" alt="sing up image">
								</figure>
								<a href="registration.html" class="signup-image-link">创建一个新的账户</a>
							</div>
		
							<div class="signin-form">
								<h2 class="form-title">登&nbsp;录</h2>
								<form method="" action="" class="register-form"
									id="login-form">
									<div class="form-group">
										<label for="username"><i
											class="zmdi zmdi-account material-icons-name"></i></label> <input
											type="text" name="username" id="username"
											placeholder="用户名" />
									</div>
									<div class="form-group">
										<label for="password"><i class="zmdi zmdi-lock"></i></label> <input
											type="password" name="password" id="password"
											placeholder="密码" />
									</div>
									<div class="form-group">
										<input type="checkbox" name="remember-me" id="remember-me"
											class="agree-term" /> <label for="remember-me"
											class="label-agree-term"><span><span></span></span>记住用户名和密码</label>
									</div>
									<div class="form-group form-button">
										<input type="submit" name="signin" id="signin"
											class="form-submit" value="登录" />
									</div>
								</form>
								<div class="social-login">
									<span class="social-label">使用其他方式登录</span>
									<ul class="socials">
										<li><a href="#"><i
												class="display-flex-center zmdi zmdi-facebook"></i></a></li>
										<li><a href="#"><i
												class="display-flex-center zmdi zmdi-twitter"></i></a></li>
										<li><a href="#"><i
												class="display-flex-center zmdi zmdi-google"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</section>
		
			</div>
		
			<!-- JS -->
			<script src="vendor/jquery/jquery.min.js"></script>
			<script src="js/main.js"></script>
		</body>
		</html>

喜欢可以联系作者要整个源码哦