登入介面居中效果

㼛思碼雨發表於2020-10-13

效果如下: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-widthh, initial-scale=1.0">
    <title>Document</title>
    <style>
        #login {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="login"><img src="img/login.jpg" />
    </div>
    <script>
        function show() {
            var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            //獲取寬度
            var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            //獲取高度
            var login = document.getElementById('login');
            var top = (h - 300) / 2;
            var left = (w - 533) / 2;
            //獲得的瀏覽器高度，寬度減去圖片的高、寬、再除以2.得到相對應的留白，使其居中
            login.style.top = top + 'px';
            login.style.left = left + 'px';
        }
        window.onload=function(){
            show();
        };//當頁面載入完畢時呼叫show();
        window.onresize=function(){
            show();
        };//當視窗改變大小時觸發事件resize,呼叫show();

    </script>
</body>

</html>

 

相關文章