实现一屏幕自适应登陆

来源：互联网发布：从零开始学mt4编程编辑：程序博客网时间：2024/04/18 20:41
<!DOCTYPE html><html>    <head>        <title><php>if(empty($breadHeaders)){echo '';}else{echo $breadHeaders.'-';}</php>基于ThinkPHP的项目</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <style>            * { margin: 0; padding: 0; font-family: 微软雅黑; font-size: 12px;}            img,input { border: 0;}            .div_login_main { overflow: hidden; }            .div_login { width: 460px; height: 260px; border-radius: 10px; padding: 20px; background-color: #f0f0f0; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; }            .div_login_title { font-size: 14px; font-weight: bold; height: 34px; line-height: 34px; }            .div_login_content table { border-collapse:collapse; width: 100%; margin-top: 30px; font-size: 14px; font-weight: bold; }            .div_login_content table tr {height: 54px; line-height: 54px;}            .login_First_Td_Class { width: 20%;}            .login_Second_Td_Class { width: 10%; text-align: right; padding-right: 10px; font-size: 14px;}            .login_Third_Td_Class input { width: 100%; height: 28px; line-height: 28px; border-radius: 5px; border: #ccc solid 1px; color: #505050;}            .login_submit { text-align: left; padding-top: 7px; padding-left: 10px;  }            .login_submit input { width: 150px; height: 44px; color: #fff; font-size: 14px; font-weight: bold; border: #4dacdb solid 1px; border-radius: 5px; background-color: #2d64b3; }        </style>        <script type="text/javascript" src="/js/jquery-1.7.js"></script>        <script type="text/javascript">              //根据浏览器大小调整左右布局的大小              $(window).ready(function(){                  var wheight=$(window).height();                 var wwidth=$(window).width();                  $("body").css("height",(wheight));                 $(".div_login_main").css("height",(wheight));                 $(".div_login").css("top",((wheight-300)/2));                $(".div_login").css("left",((wwidth-500)/2));            });              $(window).resize(function(){                  var wheight=$(window).height();                  var wwidth=$(window).width();                  $("body").css("height",(wheight));                    $(".div_login_main").css("height",(wheight));                  $(".div_login").css("top",((wheight-300)/2));                $(".div_login").css("left",((wwidth-500)/2));            });          </script>      </head>    <body style="overflow: hidden; overflow-x: hidden; overflow-y: hidden; position: relative;">        <div class="div_login_main">            <img style="position: absolute; width: 100%; height: 100%; overflow: hidden; text-align: center; z-index: 1;" src="/images/Penguins.jpg" />        </div>        <div class="div_login" style="position: absolute; top: 0; left: 0; z-index: 9999;">            <div class="div_login_title">                用户登录            </div>            <div class="div_login_content">                <form action="/home/doLogin" name="" method="post">                    <table>                        <tr><td rowspan="4" class="login_First_Td_Class"> </td><td class="login_Second_Td_Class">账  户</td><td class="login_Third_Td_Class"><input type="text" name="loginname" value="" /></td><td rowspan="4" class="login_First_Td_Class"> </td></tr>                        <tr><td class="login_Second_Td_Class">密  码</td><td class="login_Third_Td_Class"><input type="password" name="password" value="" /></td></tr>                        <tr><td colspan="2" class="login_submit"><input type="submit" name="doLogin" value="立即登录" />             <a href="">忘记密码?</a></td></tr>                    </table>                </form>            </div>        </div>    </body></html>
0 0