实现登录窗体浏览器始终居中

九九

11 年前

登录框布局:

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不好看,但效果还凑合.