2018--12-12 喜迎雙十二，咳咳，，，，我不是打廣告哈，購物的節日也不要忘記學習。
大家好，我又來了。
今天抽出來空把自己的學習心得給大家分享，這是一個可開發可擴展的用戶登錄界面，用於開發學習當然是適合入門級別的，
把代碼都研究一下，學習速度遠比你自己從最基本的html是什么、html的基本標簽學習、用法。。。。一點點真的是一點點的從頭
學習這樣雖說基礎打得更牢，但效率太低，你不投入到實際應用中去，很快你就會忘卻那些知識點，所以理論和實干的結合，
"傳說中“的事半功倍，即使如此。
但一開始還是從基礎的案例開始學習，用到什么學什么，現學現用記憶更久更牢固，比如：
首先將文檔的結構清晰的構建出來，什么東西就放什么里，合理分類避免文件繁雜紊亂。
准備：
1.下載：jquery.min.js
(min是壓縮版，去除了注釋和空格，主要是生產環境中使用，不帶min是帶有注釋和空格的，方便閱讀源碼）
2.style.css——編纂css文件
需要的朋友私信我或留言吧，這里不能上傳文件，無法....
3.image——網頁的背景和那個鎖都是可以更換的
我也可以提供，方法同上。
代碼分析：
<!DOCTYPE HTML><!--html5聲明--> <html> <head> <title>Welcome | Home&濟大泉院</title> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--元(meta)數據--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- --> <script>var __links = document.querySelectorAll('a'); function __linkClick(e) { parent.window.postMessage(this.href, '*');} ; for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('data-t') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);} } </script> <!--(document).ready里的代碼是在頁面內容都加載完才執行的 <*>這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼。 fadeOut 淡出，改變不透明度 click 按鍵觸發 --> <script src="js/jquery.min.js"></script> <script>$(document).ready(function(c) { $('.alert-close').on('click', function(c){//點擊事件 $('.message').fadeOut('slow', function(c){ $('.message').remove(); /* $(".message")on('click',function(c){ $('.message').remove(); }) as same as : $(".message")click(function(){ $(".message").remove(); }) */ }); }); }); </script> </head> <body> <!-- contact-form --> <div class="message warning"> <div class="inset"> <div class="login-head"> <h1>Login Form</h1> <div class="alert-close"> </div> </div> <form action="" method="get"> <li> <input type="text" class="text=" value"Username" onfocus="if(this.value == 'Username')this.value = '';" onblur="if (this.value == '') {this.value = 'Username';}"> <a href="#" class=" icon user"></a><!--remember user--> </li> <div class="clear"> </div> <li> <input type="password" value="Password" onfocus="if(this.value == 'Password')this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"> <a href="#" class="icon lock"></a><!--remember password--> </li> <!--Verification code <li> <input type="text" class="yanZheng" value="請輸入驗證碼" onfocus = "if(this.value == '請輸入驗證碼')this.value = '';" onblur = "if(this.value == '')this.value = '請輸入驗證碼';"> </li> --> <div style = "text-align:left"> <label><br><input name="password" type="radio" value="">Remember</br></label><!--remeber password--> </div> <div class="clear"> </div> <div class="submit"> <input type="submit" onclick="myFunction()" value="Sign in" > <h4><a href="#">Lost your Password ?</a></h4><!--forgot password confirm herf--> <div class="clear"> </div> </div> </form> </div> </div> <div class="clear"> </div> <!--- footer ---> <div class="footer"> <p>Copyright © 2018.</p> </div> </body> </html>
我注釋掉了一段驗證碼的代碼，其實也就只是一個非常初級界面，后面的文章在寫吧這里就不贅述了。當然可以自己在添加其他的功能，哎呀，思維發散開啊。
總結：
就是這樣一個用戶登錄界面的實現制作涵蓋html5，css，jquary從中一下接觸到了三個技術，試想你自己要是用一點點看的那個方法，是不是看完了一門再看下一門，，，，
Please tell me how much precious time you will spend. yeah,so long.
所以是不是應該改變一下自己的學習方法；
——————————學無止境——————————