百度登录框架

来源：互联网发布：管家婆软件费用编辑：程序博客网时间：2024/06/10 10:25
百度登录

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            body{                margin: 0;                padding: 0;            }            img{                width: 270px;                height: 129px;                display: block;                margin: 10px auto;            }            .btn{            }            font:hover{                cursor: pointer;                color: red;            }            .back-img{                border: 1px solid #000000;                position: absolute;                width: 100%;                height: 100%;                top: 0px;                left: 0px;                background-color: #000000;                opacity: 0.3;                z-index: 100;                display: none;            }            .login{                border: 1px solid #000000;                width: 390px;                height: 500px;                position: absolute;                top:26%;                left: 35%;                background-color:pink;                z-index: 110;                display: none;            }            .login-top{                position: absolute;                width: 100%;                height: 10%;                background-color: gray;            }            .close-login{                display: block;                position: absolute;                right: 10px;                top: 5px;                width: 30px;                height: 30px;                text-align: center;                line-height: 30px;                font-size: 30px;                color: #FFFFFF;            }            .close-login:hover{                border: 1px solid #FFFFFF;                cursor: pointer;            }            .login-top:hover{                cursor: move;            }        </style>        <script type="text/javascript" src="js/a.js" ></script>        <script>            //点击登录            function login(){                //获取覆盖图层对象                var backimg = document.getElementById("backimg");                //登录框的div对象                var login = document.getElementById("move_div");                login.style.display = "block";                backimg.style.display = "block";            }            //隐藏登录弹出框            function loginClose(){                //登录框的div对象                var login = document.getElementById("move_div");                //获取覆盖图层对象                var backimg = document.getElementById("backimg");                login.style.display = "none";                backimg.style.display = "none";            }        </script>    </head>    <body>        <div id="backimg" class="back-img" ></div>        <div  id="move_div" class="login">            <!--登录弹出框顶部-->            <div class="login-top" onmousedown="down()" onmouseup="up()" onmousemove="move()">                <span class="close-login" onclick="loginClose()">×</span>            </div>        </div>        <div class="top">            <font onclick="login()">登录</font>        </div>        <img src="img/logo.png" />        <div class="btn">            <input type="text" />            <button>百度一下</button>        </div>    </body></html>
阅读全文
1 0