登录框布局:
1.弹出的 背景div 全屏;
2.登录框 全局居中;
实现1:背景div 全屏:
<head>
<title></title>
<style type="text/css">
.div1{width:100%;height:100%;position:absolute;z-index:5;top:0;left:0;background-color:Silver;}
</style>
</head>
<body>
<div id="div1" class="div1"></div>
</body>
PS:top:0;left:0;关键
效果:
实现2:登录框div 在屏幕中间:
<head>
<title></title>
<style type="text/css">
.div1{width:100%;height:100%;position:absolute;z-index:5;top:0;left:0;background-color:Silver;}
.div2{width:200px;height:150px;position:absolute;z-index:7;background-color:#696969;top:50%;left:50%;margin-left:-100px;margin-top:-75px;}
</style>
</head>
<body>
<div id="div1" class="div1">
<div id="div2" class="div2">
</div>
</div>
</body>
PS:
z-index:7;设置div2在div1上层;
top:50%;left:50%;与 主div(即 div1)左边距离50%;上面距离50%;这样之后 再利用margin将div2分别向左移动半个div2的宽度,向上移动半个div2高度之后,div2就在中间了;
效果:
3.在div2中增加 相关登录填写的控件:
<head>
<title></title>
<style type="text/css">
.div1{width:100%;height:100%;position:absolute;z-index:5;top:0;left:0;background-color:Silver;text-align:center;}
.div2{width:200px;height:150px;position:absolute;z-index:7;background-color:#696969;top:50%;left:50%;margin-left:-100px;margin-top:-75px;}
.divtop{width:100%;height:20px;}
.divid{width:40%;height:30%;z-index:9;background-color:#696969;float:left;}
.divpw{width:60%;height:30%;z-index:9;background-color:#696969;float:right;}
.txtput{width:90%;background-color:Silver;}
</style>
</head>
<body>
<input id="showlogin" type="button" value="显示登录框"/>
<div class="div1" id="div1">
<div class="div2" id="div2">
<div class="divtop">
<!--调整-->
</div>
<div class="divid">
用户名:
</div>
<div class="divpw">
<input id="Text1" type="text" class="txtput" />
</div>
<div class="divid">
密码:
</div>
<div class="divpw">
<input id="Password1" type="password" class="txtput"/>
</div>
<div>
<input id="btnlogon" type="button" value="登录" />
<input id="btncancel" type="button" value="取消" />
</div>
</div>
</div>
</body>
</html>
效果图:
加点JQuery动画一下:
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showlogin").click(function () {
$("#div1").slideDown();
});
$("#btncancel").click(function () {
$("#div1").slideUp();
});
});
</script>
UI不好看,但效果还凑合.