bootstrap div模块组成的登陆界面

最新推荐文章于 2024-08-08 07:51:55 发布

Java软件小白

最新推荐文章于 2024-08-08 07:51:55 发布

阅读量2.5k

点赞数 2

分类专栏： javascript 文章标签： bootstrap jquery 浏览器火狐谷歌

本文链接：https://blog.csdn.net/qq_34117825/article/details/51601744

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

公司logo是图片形式，方便更换，

下面的自动化巡检BOX是文字形式，自带阴影效果，便于更换，

用户登录框子也是div模块，格式不变。

bootstrap框架和jquery的使用，结合了大小屏的各种情况，并兼用了ie，火狐，谷歌浏览器。

最终效果图如下：

jsp页面源代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
           <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet">
            <script type="text/javascript">
                window.onload = function(){
                        changeSize();
                }
                   window.onresize = function(){
                    changeSize();
                   }
                   function changeSize(){
                       var ttingo = $(window).height()-117;
                       $("#imageheight").css("height",ttingo);
                   }
               $().ready(function () {
                    $('#login').click(function () {
                            $.ajax({    
                                type: "POST",
                                url: "login.action",
                                data: "sysUser.loginName=" + escape($('#username').val()) + "&sysUser.password=" + escape($('#password').val()),
                                success: function (msg) {
                                    if (msg == "success") {
                                        parent.document.location.href = "mainPage.action"; //如果登录成功则跳到管理界面
                                    }
                                    if (msg == "failure") {
                                        alert('用户名或密码错误！');
                                        $('#username').val("");
                                        $('#password').val("");
                                    }
                                },
                                error: function (XMLHttpRequest, textStatus, thrownError) {
                                    alert('模块加载异常！');
                                }
                            });
                    });
                });
                 $().ready(function () {
                         $('#reset').click(function(){
                             $('#username').val("");
                           $('#password').val("");
                         });
                 });
            $().ready(function () {
             $("body").keydown(function(e) {
                  e = e||event; <span><span class="comment">//这边是火狐和ie，使用的标准不同，所以添加一个e参数，兼容ie和火狐!
                if (e.keyCode == "13") {//keyCode=13是回车键
                    $('#login').click();
                }
                });  
         });
              </script>
    </head>
    <body>
        <div class="container-fluid" id="imageheight" style="background-image:url('image/background.png');background-repeat: no-repeat;min-width: 600px;min-height:589px;">
            <div class="row" style="margin-top: 1%;">
                <div class="col-md-12" align="center">
                     <img src="image/a_03.png" align="center"/>
                </div>
            </div>
            <div class="row" style="margin-top: 1%;">
                <!--<div class="col-md-12" align="center">
                     <img src="image/a_07.png" align="center"/>
                </div>-->
                <div class="col-md-12" align="center" style="background-color: #0389DE;font-family:黑体;font-size:45px;color:white;text-shadow: 0 8px 9px black, 0px -2px 1px #fff;">
                    自动化巡检BOX
                </div>
            </div>
            <div class="row" style="margin-top: 2%;">
                <div class="col-md-8 col-sm-5 col-xs-5"></div>
                <div class="col-md-4 col-sm-7 col-xs-7" style="background-image:url(image/aaaa.png);background-repeat: no-repeat;height: 339px;width: 344px;">
                    <form action="" method="post" id="loginform">
                        <div class="row" style="margin-top: 80px;">
                            <div class="col-md-12" style="width: 325px; margin-left: 10px;">
                                 <div class="input-group">
                                    <span class="input-group-addon"><img src="image/ren16.png"/></span>
                                    <input type="text" class="form-control" aria-describedby="sizing-addon2" id="username"  value="" placeholder="请输入账号">
                                 </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 15px;">
                            <div class="col-md-12" style="width: 325px; margin-left: 10px;">
                                 <div class="input-group">
                                    <span class="input-group-addon"><img src="image/suo16.png"/></span>
                                    <input type="password" class="form-control" aria-describedby="sizing-addon2" id="password"  value="" placeholder="请输入密码">
                                 </div>
                            </div>
                        </div>
                    </form>
                        <div class="row" style="margin-top: 30px;">
                             <div class="col-md-12" align="center" style="padding-left: 25px; padding-right: 25px;">
                                 <input type="button" value="登录" id="login" class="btn-info" style="width: 100%;border: 1px solid #55bafb;height: 41px;"/>
                             </div>    
                        </div>
                        <div class="row" style="margin-top: 15px;">
                             <div class="col-md-12" align="center" style="padding-left: 25px; padding-right: 25px;">
                                 <input type="button" value="取消" id="reset" class="btn-infohui" style="width: 100%;border: 1px solid #999999;height: 41px;"/>
                             </div>    
                        </div>
                </div>
            </div>
        </div>
        <div class="container-fluid" style="min-width: 600px;">
                <div class="row" >
                    <div class="col-md-12" align="center" style="background-color: #0389DE;height: 117px;line-height: 117px;font-family:黑体;font-size:15px;color:white;">
                     
                    </div>
                </div>
        </div>
    </body>
</html>