類似百度的登錄彈出框，可用jquery的fadeIn()，hide()，show()，slideDown()等動畫函數實現，一下為html5 代碼： 小結：為獲取文檔元素可以為該元素設置一個空類，由空類名稱獲取，如上面的獲取.close；在寫表單的時候可以 放在<ol>和<ul>中，方便對齊格式；在 ...
類似百度的登錄彈出框，可用jquery的fadeIn()，hide()，show()，slideDown()等動畫函數實現，一下為html5
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href="msty.css"> <script src="jquery-2.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn_click").click(function(){ // alert("hello"); $(".box_bg").fadeIn(100); $(".box_lg").slideDown(200); }); $(".close").click(function(){ $(".box_bg").fadeOut(100); $(".box_lg").hide(100); }) }); </script> </head> <body> <div> <a class="btn btn-primary btn_click">百度登錄框</a> </div> <div class="box_lg"> <div class="box_tit"> <a class="close" href="#">×</a> <h3>登錄賬號</h3> </div> <div class="box_cont"> <form class="box_frm" action="http://www.baidu.com"> <ol> <li><input type="text" class="ipt" placeholder="學號"/></li> <li><input type="text" class="ipt" placeholder="密碼"/></li> <li><input type="submit" value="登錄" class="btn btn-primary btn_frm"></li> </ol> </form> </div> <div class="box_ft"> <input type="checkbox" style="margin-right: 8px"><label>下次自動登錄</label> <a href="#" >立即註冊</a> </div> </div> <div class="box_bg"></div> </body> </html>
小結：為獲取文檔元素可以為該元素設置一個空類，由空類名稱獲取，如上面的獲取.close；在寫表單的時候可以 放在<ol>和<ul>中，方便對齊格式；在寫css時需要對一些東西進行預設，如下：
*{ padding: 0px; margin: 0px; } ol,ul{ list-style:none; } a{ text-decoration: none; } input,label{ vertical-align: middle; }
註：文章轉載出入：http://blog.csdn.net/szu_aker/article/details/50792359
