Rumah > Artikel > hujung hadapan web > 如何制作百度登录框架

如何制作百度登录框架

一个新手asal: 2017-09-27 09:40:502545semak imbas

百度登录

<!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");                //登录框的p对象
                var login = document.getElementById("move_p");

                login.style.display = "block";
                backimg.style.display = "block";

            }            //隐藏登录弹出框
            function loginClose(){
                //登录框的p对象
                var login = document.getElementById("move_p");                //获取覆盖图层对象
                var backimg = document.getElementById("backimg");

                login.style.display = "none";
                backimg.style.display = "none";

            }        </script>
    </head>
    <body>

        <p id="backimg" class="back-img" ></p>

        <p  id="move_p" class="login">

            <!--登录弹出框顶部-->
            <p class="login-top" onmousedown="down()" onmouseup="up()" onmousemove="move()">
                <span class="close-login" onclick="loginClose()">×</span>
            </p>

        </p>

        <p class="top">
            <font onclick="login()">登录</font>
        </p>

        <img src="img/logo.png" />

        <p class="btn">
            <input type="text" />
            <button>百度一下</button>
        </p>

    </body></html>

Atas ialah kandungan terperinci 如何制作百度登录框架 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：使用CSS做贝塞尔曲线Artikel seterusnya：如何在div内部实现图片旋转、放大、缩小、拖拽

Artikel berkaitan

Lihat lagi