asp.net 利用jquery让登录页面垂直居中显示

直接源码,有不懂的请留言。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>权限登录</title>
<link href="css/master.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
       $(function(){
           divresize();
       });
       /**自应高度**/
        function divresize() {
            resizeU();
            $(window).resize(resizeU);
            //这个方法是让无论,浏览者电脑屏幕如何。都能让div居中,垂直居中,div的id是AT
            function resizeU() {
                //css("width")这样获取的是 数字加px,
                var logindiv_width = $("#AT").css("width").replace("px", "");
                //css("height")这样获取的是 数字加px
                var logindiv_height = $("#AT").css("height").replace("px", "");
                $("#AT").css({
                    "margin-left": ($(document).width() - logindiv_width) / 2,
                    "margin-top": ($(document).height() - logindiv_height) / 2,

                });
            }
        }
</script>
</head>

<body class="move">
    <div id="AT">
	<div class="header">
	     <div class="headerLogo"><img src="images/headerLogo.gif" /></div>
	</div>
	<div class="main">
		<div class="login">
			<div class="loginTitle">
				用户权限管理系统
			</div>
			<div class="loginForm">
				<form>
					<div class="prompt">请输入正确的用户名或密码!</div>
					<input type="text" value="请输入用户名" class="loginUser" />
					<input type="text"  value="请输入密码" class="loginPassword"/>
					<div class="rememberPs">
						<input type="checkbox"  class="mr10" />记住密码
					</div>
					<input type="button" class="loginBtn">
				</form>
			
			</div>
		</div>
	</div>
	<div class="footer">技术支持:安徽省XXX有限公司</div>
    </div>
</body>
</html>
 如下图所示:

asp.net 利用jquery让登录页面垂直居中显示_第1张图片


你可能感兴趣的:(asp.net 利用jquery让登录页面垂直居中显示)