公司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>