asp.net 利用jquery讓登入頁面垂直居中顯示

暖楓無敵發表於2015-07-07
ASP.NETjQuery

直接原始碼，有不懂的請留言。

<!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>
 如下圖所示：




相關文章