bootstrap 一个简单的登陆页面
2018-02-10 11:52
423 查看
效果如图:用bootstrap 写的一个简单的登陆
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/27/3e4748a829d29fd248d225bfe2df0089.png)
一、修改样式
样式可以自己调整,例如换个背景色之类的,修改 background-color属性就可以
我自己调的时候只给from加了背景色,当然可以给整个页面加背景色,设置body背景色就可以
当然也可以设置背景图片之类的
至于效果,可以自己去试验。
二、废话少说,上完整代码
![](https://oscdn.geek-share.com/Uploads/Images/Content/202002/27/3e4748a829d29fd248d225bfe2df0089.png)
一、修改样式
样式可以自己调整,例如换个背景色之类的,修改 background-color属性就可以
#from { background-color: #96b97d; }
我自己调的时候只给from加了背景色,当然可以给整个页面加背景色,设置body背景色就可以
body { background-color: #96b97d; }
当然也可以设置背景图片之类的
body { background:url(../img/login_bg_0.jpg) #f8f6e9; }
至于效果,可以自己去试验。
二、废话少说,上完整代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8" /> <title>用户登录</title> <link rel="stylesheet" href="css/style.css" /> <script src="js/bootstrap.min.js"></script> <link href="../css/bootstrap.css" rel="stylesheet" type="text/css" /> <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script> <style> #from { background-color: #96b97d; } .mycenter { margin-top: 100px; margin-left: auto; margin-right: auto; height: 350px; width: 500px; padding: 5%; padding-left: 5%; padding-right: 5%; } .mycenter mysign { width: 440px; } .mycenter input, checkbox, button { margin-top: 2%; margin-left: 10%; margin-right: 10%; } .mycheckbox { margin-top: 10px; margin-left: 40px; margin-bottom: 10px; height: 10px; } </style> <script type="text/javascript"> $(function () { $('#btn').click(function (e) { window.location.href = "main.aspx"; }); }); </script> </head> <body> <form id="from"> <div class="mycenter"> <div class="mysign"> <div class="col-lg-11 text-center text-info"> <h2> 请登录</h2> </div> <div class="col-lg-10"> <input type="text" class="form-control" name="username" placeholder="请输入账户名" required autofocus /> </div> <div class="col-lg-10"> </div> <div class="col-lg-10"> <input type="password" class="form-control" name="password" placeholder="请输入密码" required autofocus /> </div> <div class="col-lg-10"> </div> <div class="col-lg-10 mycheckbox checkbox"> <input type="checkbox" class="col-lg-1">记住密码</input> </div> <div class="col-lg-10"> </div> <div class="col-lg-10"> <button type="button" id="btn" class="btn btn-success col-lg-12"> 登录</button> </div> </div> </div> </form> </body> </html>
相关文章推荐
- 一个简单的学生登陆系统的jsp实现之登陆主页面main.jsp
- 一个简单的登陆页面(密码用MD5算法加密)
- bootstrap4 创建一个简单页面
- 简单地用swing写一个登陆页面
- 【Bootstrap】一个PC、平板、手机同时使用而且美观的登陆页面
- 初识Bootstrap及制作一个简单的页面
- bootstrap入门-做一个简单的页面
- 【Bootstrap】一个PC、平板、手机同一时候使用并且美观的登陆页面
- 用bootstrapt写一个响应式的简单页面
- bootstartp 简单登陆页面(另成一个html就可以看到效果)
- 一个简单的登陆前准备页面
- Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
- 一个简单的登陆页面实现
- 编写一个简单的登陆和查询页面用jsp
- 创建一个简单注册页面步骤
- 复杂页面消退的一个简单实例
- 实现session登陆时间的验证,验证用户登录页面的一个监听器
- 一个简单jqueryAjax前端页面展示
- 使用java的GUI设计一个简单的登陆界面(1)
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。