利用bootstrap框架实现静态登录页面

程序员文章站 2022-04-28 21:27:04

...

暑期实训第一天，主要串讲了html+css的基础知识，实现了计算器的静态页面，计算器就不在这里展示了。一天的学习结束，留下了作业，实现静态的登录页面，可以借助于bootstrap框架，待实现的页面如下图所示。

不得不说bootstrap框架真的好用，再加上老师提供了背景实现粒子的js，很快就实现了页面。

工程包链接https://download.csdn.net/download/qq_35616167/10520327

bootstrap开源包链接：https://pan.baidu.com/s/1xIbFspdVSx2iA8WxFemH9g 密码：p4k4

代码如下：

<!DOCTYPE html>
<html>
	<style>
		#box{
			width: 370px;
			height: 400px;
			border: 1px solid #E2E3E5;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-left: -185px;
			margin-top: -200px;
		}
		#logo{
			width: 370px;
			height: 95px;
			font-size: 30px;
			color: #676A6C;
			line-height: 95px;
			margin-left: 40px;
		}
		#user{
			width: 295px;
			height: 50px;
			margin-left: 40px;
		}
		#pass{
			width: 295px;
			height: 50px;
			margin-left: 40px;
		}
		.input-group{
			margin-left: 40px;
		}
		#img-submit {
			width: 95px;
			height: 30px;
			margin-top: 15px;
			border-radius: 2px;
			cursor: pointer;
			position: absolute;
			z-index: 3;
			left: 10px;
			top: 0;
		}
		#validateCode {
			height: 55px;
			padding-left: 120px;
			width: 295px;
		}
		#verify{
			width: 295px;
			height: 60px;
			margin-left: 40px;
			border: 1px solid #EDEDEE;
		}
		#btn-login{
			width: 295px;
			height: 50px;
			margin-left: 40px;
			margin-top: 20px;
		}
		#remember{
			width: 80px;
			height: 20px;
			margin-left: 50px;
			margin-top: 20px;
			color: #676A6C;
			font-size: 15px;
		}
	</style>
	
	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
		<meta name="author" content="Vincent Garreau" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="../bootstrap.min.css">
		<script src="jquery.min.js"></script>
		<script src="particle.js"></script>
	</head>
	<body>
		<canvas class="particle"></canvas>
		<div id="box">
			<div id="logo">欢迎登陆！</div>
			<div id="info">
				<input type="text" class="form-control" id="user" placeholder="账号:">
				<input type="password" class="form-control" id="pass" placeholder="密码:">
				<div class="input-group">
					<img id="img-submit" src="submit.jpg">

					<u><input type="text" class="form-control"
							  id="validateCode" name="validateCode"
							  placeholder="验证码:"></u>
				</div>

				<button class="btn btn-info" id="btn-login" onclick="VerifyLogin()">登录</button>
				<div id="remember">记住登陆 <input type="checkbox"></div>
			</div>
		</div>
	</body>
</html>

利用bootstrap框架实现静态登录页面

Android利用CountDownTimer实现倒计时功能 Android实现停留5s跳转到登录页面

require.js与bootstrap结合实现简单的页面登录和页面跳转功能

Laravel框架基于中间件实现禁止未登录用户访问页面功能示例

在Bootstrap开发框架的前端视图中使用@RenderPage实现页面内容模块化的隔离，减少复杂度

Android利用CountDownTimer实现倒计时功能 Android实现停留5s跳转到登录页面

利用会话控制实现页面登录与注销功能（高颜值许愿墙实例源码）

【Web】Bootstrap框架实现简单旅游网站页面

require.js与bootstrap结合实现简单的页面登录和页面跳转功能

我在自己写的PHP框架中实现了静态页面缓存也就是文件缓存，请问可以加快页面加载速度吗？

我在自己写的PHP框架中实现了静态页面缓存也就是文件缓存，请问可以加快页面加载速度吗？