如何製作百度登入架構

最後更新：2017-09-27 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

百度登入

<!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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More