您的位置：首页 > Web前端 > BootStrap

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

2018-07-04 20:24 387 查看
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35616167/article/details/80917930     暑期实训第一天，主要串讲了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>
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航