之前计划是一周还原一个网页或者切一张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
技能页可以收藏当作前端知识的索引呢，至少我是这么用的