之前計劃是一周還原一個網頁或者切一張psd來練習基本功的。正好周五的時候接到一個電話面試，讓我還原一下163郵箱主頁，晚上發給他，就正好當是這周的練習吧。 吃完晚飯開工，做到12點，差不多4個小時，基本上做完了，不過還有些局部沒完成。算還原度90%吧，剩下的這兩天有空再補啦。 這是目前的完成情況 w
之前計劃是一周還原一個網頁或者切一張psd來練習基本功的。正好周五的時候接到一個電話面試，讓我還原一下163郵箱主頁，晚上發給他，就正好當是這周的練習吧。
吃完晚飯開工，做到12點，差不多4個小時，基本上做完了，不過還有些局部沒完成。算還原度90%吧，剩下的這兩天有空再補啦。
這是目前的完成情況 wzlinsen.com/program/163mail
記錄一下收穫吧
一、首先是這個二維碼的滑動效果吧，其實就是絕對定位加上透明度變化加上css3的transition屬性
<div class="qrImgBox"> <img src="images/getUrlQrcode.jpg" alt="getUrlQrcode" class="imgLeft"> <img src="images/saoyisao.png" alt="saoyisao" class="imgRight"> </div>
1.結構很簡單，就是一個div中間兩張圖
.qrImgBox{position: relative;height: 150px;width: 100%;} .imgLeft{height: 130px;width: 130px;position:absolute;z-index: 1;left:80px;top:24px;transition:left 0.75s;border:2px solid white;} .imgRight{position:absolute;left:158px;opacity: 0;transition: opacity 0.75s;} .qrImgBox:hover .imgLeft{left:12px;} .qrImgBox:hover .imgRight{opacity:1;}
2.樣式方面，給div一個相對定位，然後兩張圖絕對定位。給二維碼這張圖設置一個z-index,使其高於另一張圖，然後先將其定位與div的中央
另一種圖絕對定位到右側，然後透明度設置成0
3.給盒子增加hover偽類，使二維碼移到左側，右側圖透明度恢復
4.再分別加上transition屬性，針對其變化的屬性，比如二維碼圖就是transition:left 0.75s;
二、就是圖下這兩個標簽的切換啦
1.結構就是先一個大盒子，盒子中先是一個盒子存放左右兩個標簽，又有兩個盒子分別是對應的兩個頁面
<div class="mainBox"> <div class="logButton"> <div id="QrLogo">二維碼登錄</div> <div id="emailLogo">郵箱賬號登錄</div> </div> <div id="QrPage"></div> <div id="emailPage"></div> </div>
2.樣式 為了簡化，我省略了設置寬高，浮動，文字位置之類的樣式，剩下就只有給大盒子設置背景，給未選擇的便簽設置不同的背景，隱藏未選擇的頁面
.mainBox{background-color: #daeaeb;} #emailLogo{background-color: #dae1e7;} #emailPage{display: none;}
3.然後用js操作，圖方便，我是用jquery操作的
$("#emailLogo").mouseover(function(){
$("#emailLogo").css("background-color","#eaeaeb");
$("#QrLogo").css("background-color","#dae1e7");
$("#emailPage").css("display","flex");
$("#QrPage").css("display","none");
});
$("#QrLogo").mouseover(function(){
$("#QrLogo").css("background-color","#eaeaeb");
$("#emailLogo").css("background-color","#dae1e7");
$("#QrPage").css("display","flex");
$("#emailPage").css("display","none");
滑鼠移到email便簽時，兩個便簽的背景色互換，兩個頁面的display也互換（由於我頁面內是flexbox佈局的，所以display是flex）
反之同理。
3.收穫的小技巧
本來是用mark man 來測顏色，測距離的
後來發現用QQ自帶的截屏功能就可以了呢，顏色，距離一應俱全。摁住ctrl鍵，顏色就會變成#ffffff的格式啦。
未完成的點：
1.標簽邊框似乎用box-shadow處理了，有一點立體的感覺
2.點擊版本切換，這個div+絕對定位可以實現，算是偷懶吧，之後再補上
好了，就學到這裡吧，每次有進步有收穫就好啦
歡迎來我的個人主頁瞭解我哦，wzlinsen.com
技能頁可以收藏當作前端知識的索引呢，至少我是這麼用的
