微信小程序相关一、模仿京东静态登录页面
生活随笔
收集整理的這篇文章主要介紹了
微信小程序相关一、模仿京东静态登录页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、培訓的第一天，基本上沒有什么最新的東西，但是看到老師的代碼收獲的確實是不少。
1.1、首頁代碼很簡潔，將共有的樣式都提取的很好。
1.2、其次是每一個小塊寫樣式的時候用到了好多子代選擇器和后代選擇器，這樣看起來css的一個樣式就寫的很長，但是比之前我們只是單一的寫一個樣式，大大提高了IO請求，整體css渲染也變快了。因為當渲染css的時候是從右向左的，就是先確定后代，在往上尋找祖輩，直到找到相對應的樣式。dom樹從葉子節點往上全部掃描一遍，可想而知只寫一個單一的樣式，效率是多么的低。
1.3、在開始寫之前，先分析頁面的結構，分成上中下還是左右還是什么自己心里要清楚，然后css樣式要有初始化的樣式，還有簡單的公用的樣式先提取出來。組后每個小的模塊還可以再寫一寫公共的樣式。還有wrapper樣式.wrapper{width:990px;margin:0 auto;}盡量在每個模塊中都套一層
1.4注釋注釋注釋一定要多寫點寫好，還有代碼格式tab鍵給對齊，將代碼整理一下
二、下面是第一節具體的知識點
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;
三、模仿京東登錄頁
3.1頁面展示
3.2代碼
?
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> 掃描二維碼</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; }?
轉載于:https://www.cnblogs.com/zhangxue521/p/6888204.html
總結
以上是生活随笔為你收集整理的微信小程序相关一、模仿京东静态登录页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大学生考软考合适吗？
- 下一篇： SSM配置地狱？一篇整合模板迅速解决！【