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

IT女孩儿的日常

于 2018-07-04 20:24:11 发布

阅读量1.4w

点赞数 7

分类专栏：暑期实训文章标签： bootstrap html css

本文链接：https://blog.csdn.net/qq_35616167/article/details/80917930

版权

本文介绍了如何利用bootstrap框架配合粒子效果js，简洁高效地实现一个静态登录页面。通过提供的资源链接，读者可以获取相关工程包和bootstrap开源包进行实践。

摘要由CSDN通过智能技术生成

暑期实训第一天，主要串讲了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{
			wid