html簡約風用戶登陸界面網頁製做html5-css-jquary-學習模版

時間 2019-11-10

標籤 html 簡約用戶登陸界面網頁製做 html5 css jquary 學習模版欄目 HTML 简体版

原文原文鏈接

　　2018--12-12 喜迎雙十二，咳咳，，，，我不是打廣告哈，購物的節日也不要忘記學習。css

　　你們好，我又來了。html

　　今天抽出來空把本身的學習心得給你們分享，這是一個可開發可擴展的用戶登陸界面，用於開發學習固然是適合入門級別的，html5

把代碼都研究一下，學習速度遠比你本身從最基本的html是什麼、html的基本標籤學習、用法。。。。一點點真的是一點點的從頭jquery

學習這樣雖然說基礎打得更牢，但效率過低，你不投入到實際應用中去，很快你就會忘卻那些知識點，因此理論和實幹的結合，post

"傳說中「的事半功倍，即便如此。學習

　　但一開始仍是從基礎的案例開始學習，用到什麼學什麼，現學現用記憶更久更牢固，好比：ui

首先將文檔的結構清晰的構建出來，什麼東西就放什麼裏，合理分類避免文件繁雜紊亂。this

準備：spa

1.下載：jquery.min.jscode

　　(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 &copy; 2018.</p>
</div>

</body>
</html>