如何制作百度登录框架

来源：舟合美食网
百度登录

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