求解怎么做这个，【百科全说】

操作方法

01

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登陆首页</title> <link href="_css/site.css" rel="stylesheet"> <script src="_js/jquery.js"></script> <style> #login { width: 300px; position: absolute; left: 585px; top: 6px; z-index: 100; } #open { margin: 0; cursor: pointer; background: rgb(255,255,255) url(_images/open.png) no-repeat 8px 7px; color: rgb(58,80,123); padding: 5px 0 2px 30px; } #login .close { background-image: url(_images/close.png); background-color: rgb(110,138,195); } #open:hover { color: rgb(0,0,0); background-color: rgb(110,138,195); } #login form { padding: 10px 10px 10px 10px; display: none; background-color: rgb(255,255,255); } #login label { display: inline-block; width: 100px; text-align:right; margin: 0 15px 0 0; color: rgb(58,80,123); } #login input { font-size: 14px; } #login #button { margin-left: 50px; } </style> <script> $(document).ready(function() { $("form").submit(function(){ /* 判断输入正确的用户名和密码，如果正确就跳转，否则弹出"请输入正确的用户名和密码!"消息框并且不跳转。 */ }); $("#open").click(function(){ /* 点击登录，弹出登录界面，再次点击登录，收起登录界面。 */ }); }); // end ready </script> </head> <body> <div class="wrapper"> <div class="header"> <p class="logo">JavaScript <i> & </i> jQuery编程 <i class="mm">jQuery<br/>权威<br/>指南</i></p> </div> <div id="login"> <p id="open">登陆</p> <form action="faq_complete.html" method="post"> <p> <label for="username">用户名:</label> <input type="text" name="username" id="username"/> </p> <p> <label for="password">密码: </label> <input type="password" name="password" id="password"/> </p> <p align="center"> <input type="submit" name="btnlogin" id="btnlogin" value="登陆" /> <input type="reset" name="btnexit" id="btnexit" value="取消" /> </p> </form> </div> <div class="content"> <div class="main"> <h1>欢迎来到jQuery精彩世界！</h1> <p style="font-size:36px; color:red">Write Less, Do more!</p> </div> </div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery问答</title> <link href="_css/site.css" rel="stylesheet"> <script src="_js/jquery.js"></script> <style type="text/css"> h2 { background: url(_images/open.png) no-repeat 0 11px; padding: 10px 0 0 25px; cursor: pointer; } h2.close { background-image: url(_images/close.png); } .answer { margin-left: 25px; } </style> <script> $(document).ready(function() { $('.answer').hide(); $("h2").click(function(){ /* 点击问题，在其下方显示答案；再次点击问题，隐藏答案。 */ }); }); </script> </head> <body> <div class="wrapper"> <div class="header"> <p class="logo">JavaScript <i> & </i> jQuery编程 <i class="mm">jQuery<br/>权威<br/>指南</i></p> </div> <div class="content"> <div class="main"> <h1>常见问题回答</h1> <h2>学习jQuery必须要学JavaScript吗?</h2> <div class="answer"> <p>jQuery是一个非常优秀的JavaScript库，语法简洁，兼容各种浏览器，极大简化了JavaScript开发工作。JavaScript是jQuery的基础，对JavaScript有一定的学习基础，可以帮助你快速进入jQuery的精彩世界。</p> </div> <h2>jQuery有哪些优势，jQuery好学吗?</h2> <div class="answer"> <p>jQuery优势很多，比如：开源，学习资料文档比较丰富，出色的DOM封装，可靠地事件绑定机制等等，随着你对它的深入掌握和应用，你会发现更多的优点。它的理念就是：write less, do more。由于jQuery是一个轻量级的JavaScript库，学习门槛很低，只要你了解最基本的JavaScript语法就可以开始学习了。</p> </div> <h2>jQuery有哪些功能?</h2> <div class="answer"> <p>目前jQuery主要提供的功能包括：访问DOM、修改页面CSS、更改页面内容、相应事件、为页面添加动画、简化Ajax操作等。</p> </div> </div> </div> </body> </html>

求解怎么做这个，

操作方法

相关推荐