微信小程序相關1、模仿京東靜態登陸頁面

時間 2019-11-25

原文原文鏈接

1、培訓的第一天，基本上沒有什麼最新的東西，可是看到老師的代碼收穫的確實是很多。css

　　1.一、首頁代碼很簡潔，將共有的樣式都提取的很好。html

　　1.二、其次是每個小塊寫樣式的時候用到了好多子代選擇器和後代選擇器，這樣看起來css的一個樣式就寫的很長，可是比以前咱們只是單一的寫一個樣式，大大提升了IO請求，總體css渲染也變快了。由於當渲染css的時候是從右向左的，就是先肯定後代，在往上尋找祖輩，直到找到相對應的樣式。dom樹從葉子節點往上所有掃描一遍，可想而知只寫一個單一的樣式，效率是多麼的低。安全

　　1.三、在開始寫以前，先分析頁面的結構，分紅上中下仍是左右仍是什麼本身內心要清楚，而後css樣式要有初始化的樣式，還有簡單的公用的樣式先提取出來。組後每一個小的模塊還能夠再寫一寫公共的樣式。還有wrapper樣式.wrapper{width:990px;margin:0 auto;}儘可能在每一個模塊中都套一層微信

　　1.4註釋註釋註釋必定要多寫點寫好，還有代碼格式tab鍵給對齊，將代碼整理一下app

2、下面是第一節具體的知識點dom

　　2.1 當圖片和文字進行排列的時候，要想使圖片和文字在同一水平線上？
　　答: 在img和文本上都設置vertical-align:middle
　　2.2 display:inline-block;
　　行級標籤的特性: 不獨佔一行、寬高無效、margin和padding上下無效。
　　2.3 input爲checkbox類型時，想和文字在同一水平線上？
　　在父元素加上font-size:0; 在子元素上都加上vertical-align:middle;
　　2.4 精靈圖（雪碧圖、css sprites）
　　減小加載次數，提升加載速度。
　　怎麼截取精靈圖？
　　background-position: X Y;url

3、模仿京東登陸頁spa

　　3.1頁面展現code

　　3.2代碼orm

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>京東-歡迎登陸</title>
 6         <!--加入title裏面的圖標-->
 7         <link rel="icon" href="img/title.ico" type="image/x-icon">
 8         <link rel="stylesheet" href="css/index.css" />
 9     </head>
 10     <body>
 11         <!--頭部開始-->
 12         <header class="wrapper">
 13             <div class="header-left left">
 14                 <img src="img/logo.png" />
 15                 <a>歡迎登陸</a>
 16             </div>
 17             <div class="header-right right">
 18                 <img src="img/q-icon.png" />
 19                 <a>登陸頁面，調查問卷</a>
 20             </div>
 21         </header>
 22         <!--頭部結束-->
 23         <!--中間內容開始-->
 24         <div class="content">
 25             <div class="wrapper beijing">
 26                 <!--登陸表單-->
 27                 <div class="login-form right">
 28                     <!--掃碼登陸-->
 29                     <div class="login-tab login-tab-left left" id="saomaTab" >
 30                         <a>掃碼登陸</a>
 31                         <span class="right">|</span>
 32                     </div>
 33                     <!--帳號登錄-->
 34                     <div class="login-tab login-tab-right left" id="zhanghuTab" >
 35                         <a>帳戶登陸</a>
 36                     </div>
 37                     <!--帳戶登陸的內容項-->
 38                     <div class="zhanghu-login" id="zhanghu-content">
 39                         <div id="zhanghu">
 40                             <label class="login-label login-rentou" for="name"></label>
 41                             <input type="text" class="name" id="name" placeholder="郵箱/用戶名/已驗證手機"/>
 42                         </div>
 43                         <div id="mima">
 44                             <label class="login-label login-mima" for="password"></label>
 45                             <input type="text" class="name" id="password" placeholder="密碼"/>
 46                         </div>
 47                         <a class="right forget">忘記密碼</a>
 48                         <input type="submit" class="denglu" value="登陸"/>
 49                     </div>
 50                     
 51                     <!--掃碼登陸的內容項-->
 52                     <div class="saoma-login" id="saomiao-content">
 53                         <div class="saoma-login-top">
 54                             <img src="img/show.png" class="erweima left" id="erweima"/>
 55                             <img src="img/phone-orange.png" class="phone left" id="phone"/>
 56                         </div>
 57                         <div class="saoma-login-bottom">
 58                             <span class="one">打開<a>手機京東</a>&nbsp;&nbsp;掃描二維碼</span>
 59                             <ul class="saomiaodibu">
 60                                 <li>
 61                                     <span class="saoma-span shuru"></span>
 62                                     <span class="ziti">免輸入</span>
 63                                     <span class="saoma-span gengkuai"></span>
 64                                     <span class="ziti">更快</span>
 65                                     <span class="saoma-span anquan"></span>
 66                                     <span class="ziti">更安全</span>
 67                                 </li>
 68                             </ul>
 69                         </div>
 70                         
 71                     </div>
 72                     <!--底部的微信qq標誌-->
 73                     <div class="dibu">
 74                         <label class="qq"></label>
 75                         <a>QQ</a>
 76                         <span>|</span>
 77                         <label class="weixin"></label>
 78                         <a>微信</a>
 79                         <div class="lijizhuce right">
 80                             <i class="liji"></i>
 81                             <a>當即註冊</a>
 82                         </div>
 83                     </div>
 84                 </div><!--登錄表單結束-->
 85             </div><!--背景結束-->
 86         </div>
 87         <!--中間內容結束-->
 88         <!--尾部開始-->
 89         <footer class="wrapper">
 90             <div class="dibudaohang">
 91                 <div class="lianjie">
 92                 <a href="">關於咱們</a><span>|</span>
 93                 <a href="">聯繫咱們</a><span>|</span>
 94                 <a href="">人才招聘</a><span>|</span>
 95                 <a href="">商家入駐</a><span>|</span>
 96                 <a href="">廣告服務</a><span>|</span>
 97                 <a href="">友情連接</a><span>|</span>
 98                 <a href="">銷售聯盟</a><span>|</span>
 99                 <a href="">京東社區</a><span>|</span>
100                 <a href="">京東公益</a><span>|</span>
101                 <a href="">English Site</a>
102                 </div>
103                 <div class="dianhua">
104  Copyright © 2004-2017 京東JD.com 版權全部 105                 </div>
106             </div>
107         </footer>
108         <!--尾部結束-->
109         
110         
111         
112         
113         <script>
114             var zhanghuTab = document.getElementById("zhanghuTab"); 115             var saomiaoTab = document.getElementById("saomaTab"); 116             var zhanghuContent = document.getElementById("zhanghu-content"); 117             var saomiaoContent = document.getElementById("saomiao-content"); 118             var erweima = document.getElementById("erweima"); 119             var phone = document.getElementById("phone"); 120  zhanghuTab.onclick = function(){ 121  saomiaoContent.style.display= "none"; 122  zhanghuContent.style.display="block"; 123  }; 124             
125  saomiaoTab.onclick=function(){ 126  zhanghuContent.style.display="none"; 127  saomiaoContent.style.display="block"; 128  }; 129             
130  erweima.onmouseover = function(){ 131  erweima.style.marginLeft = "0px"; 132  phone.style.display = "block"; 133  } 134  phone.onmouseover = function(){ 135  erweima.style.marginLeft = "0px"; 136  phone.style.display = "block"; 137  } 138  erweima.onmouseout= function(){ 139  erweima.style.marginLeft = "75px"; 140  phone.style.display="none"; 141  } 142  phone.onmouseout= function(){ 143  erweima.style.marginLeft = "75px"; 144  phone.style.display="none"; 145  } 146         </script>
147     </body>
148 </html>

/*css初始化*/ *{ margin:0; padding: 0;
} a{
    /*text-decoration: none;*/
} ul{ list-style: none;
}

/*公用樣式*/ .wrapper{ width:990px; margin:0 auto;
} .left{ float:left;
} .right{ float: right;
} .clearfix{ clear: both;
} a{ color: #666666;
} a:hover{ color: red; cursor: pointer;
}
/*頭部*/ .header-left{ width: 300px; height: 60px; margin: 10px 0px;
}
/*圖片和文字都寫上vertical-align:middle便可實如今一個水平線上*/ .header-left img{ vertical-align: middle;
} .header-left a{ vertical-align: middle; font-size: 23px; margin-left: 20px;
} .header-left>a:hover{ color: #666666;
} .header-right{ margin-top: 50px;
} .header-right img{ vertical-align: middle;
} .header-right a{ vertical-align: middle; font-size: 12px;
}
/*.header-right a:hover{ color: red; }*/


/*中間內容*/ .content{ clear: both; height: 475px; width: 100%; background-color: #DCDCDC;
} .content>.beijing{ height: 470px; background: url(../img/beijing.jpg);
} .content>.wrapper>.login-form{ background: white; height: 370px; width: 351px; margin: 40px auto;
}

/*表單下面的登陸*/ .login-tab{ height: 54px; line-height: 54px; font-size: 18px; text-align: center; display: block; border-bottom: 1px solid #f4f4f4;
} .login-tab-left{ width:175px;
} .login-tab-left>span{ color: #f4f4f4;
} .login-tab-right{ width: 175px;
}


/*帳戶登陸的內容*/ .zhanghu-login{ margin: 80px auto; width: 306px; height: 222px; display: none;
    /*border: 1px solid red;*/
} #zhanghu{ border: 1px solid #bdbdbd; height: 38px; width: 300px;
} .login-label{ display: inline-block; vertical-align: middle; height: 38px; width: 38px; border-right: 1px solid #bdbdbd; background: url(../img/pwd-icons-new.png) no-repeat;
} .login-rentou{ background-position: 0px 0px;
} .name{ vertical-align: middle; width: 234px;
    /*height: 18px;*/
    /*line-height: 18px;*/ padding: 10px 0px 10px 16px; overflow: hidden; font-size: 14px; border: none;
} #mima{ border: 1px solid #bdbdbd; height: 38px; width: 300px; margin-top: 18px;
} .login-mima{ background-position: -48px -48px;
} .forget{ margin-top: 20px; font-size: 14px; margin-right: 2px;
} .denglu{ margin-top: 22px; width: 306px; height: 32px; line-height: 32px; border: none; background: #e4393c; border: 1px solid red; color: white; font-size: 20px;
} .denglu:hover{ cursor: pointer;
}

/*密碼登錄的內容頁*/ .saoma-login{ position: relative; margin: 80px auto; width: 306px; height: 222px; display: block;
} .saoma-login>.saoma-login-top>.erweima{
    /*position: absolute;*/
    /*left: 20%;*/ background: white; border: 5px solid white; margin-left: 75px; transition: margin-left 0.5s ease;
} .saoma-login>.saoma-login-top>.phone{ display: none; margin-top: -5px; margin-left: 158px; position: absolute;
} .saoma-login>.saoma-login-bottom{ position: absolute; bottom: -10px; left: 25%;
} .saoma-login>.saoma-login-bottom>span{ color: #BDBDBD; font-size: 12px;
} .saoma-login>.saoma-login-bottom>span>a{ color: red!important;
} .saomiaodibu{ margin: 10px 0px 5px -35px;
} .saomiaodibu li span{ margin-left: 5px;
} .saoma-span{ vertical-align: middle; display: inline-block; background: url(../img/qr-coagent.png) no-repeat; width: 25px; height: 25px;
} .ziti{ vertical-align: middle; color: #BDBDBD; font-size: 12px;
} .shuru{ background-position: 0 0 ;
} .gengkuai{ background-position: -27px 0px;
} .anquan{ background-position: -54px 0px;
}
/*登陸表單的底部qq微信*/ .dibu{ margin-top: -65px; border-top: 1px solid #bdbdbd; background: #fcfcfc; line-height: 50px; padding-left:20px; padding-right: 20px;
} .qq{ display: inline-block; background: url(../img/QQ-weixin.png) no-repeat 0px 0px; vertical-align: middle; height: 20px; width: 20px;
} .dibu a{ font-size: 12px; vertical-align: middle;
} .dibu span{ margin-left: 5px; margin-right: 5px; color: #DCDCDC;
} .weixin{ display: inline-block; background: url(../img/QQ-weixin.png) no-repeat -20px 0px; vertical-align: middle; height: 20px; width: 20px;
} .liji{ display: inline-block; background: url(../img/pwd-icons-new.png) no-repeat -100px -71px; vertical-align: middle; height: 20px; width: 20px;
} .liji a{ color: red!important; vertical-align: middle;
} .liji a:hover{ text-decoration: underline;
}

/*底部的內容*/ .dibudaohang{ margin-top: 30px; text-align: center; font-size: 12px; color: #DCDCDC;
} .dibudaohang a,.dibudaohang span{ padding-left: 10px;
} .dianhua{ margin-top:10px; margin-bottom: 30px; text-align: center; font-size: 12px; color: #666666;
}