如何制作百度登录框架
程序员文章站
2022-03-24 19:43:52
...
百度登录
<!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>
以上就是如何制作百度登录框架 的详细内容,更多请关注其它相关文章!