之前计划是一周还原一个网页或者切一张psd来练习基本功的。正好周五的时候接到一个电话面试,让我还原一下163邮箱主页,晚上发给他,就正好当是这周的练习吧。
吃完晚饭开工,做到12点,差不多4个小时,基本上做完了,不过还有些局部没完成。算还原度90%吧,剩下的这两天有空再补啦。
这是目前的完成情况 wzlinsen.com/program/163mail
记录一下收获吧
一、首先是这个二维码的滑动效果吧,其实就是绝对定位加上透明度变化加上css3的transition属性
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="qrImgBox"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="images/getUrlQrcode.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="getUrlQrcode"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="imgLeft"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="images/saoyisao.png"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="saoyisao"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="imgRight"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
1.结构很简单,就是一个div中间两张图
<span style="color: #800000;">.qrImgBox</span>{<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 100%</span>;}<span style="color: #800000;"> .imgLeft</span>{<span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> 130px</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 130px</span>;<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">absolute</span>;<span style="color: #ff0000;">z-index</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">80px</span>;<span style="color: #ff0000;">top</span>:<span style="color: #0000ff;">24px</span>;<span style="color: #ff0000;">transition</span>:<span style="color: #0000ff;">left 0.75s</span>;<span style="color: #ff0000;">border</span>:<span style="color: #0000ff;">2px solid white</span>;}<span style="color: #800000;"> .imgRight</span>{<span style="color: #ff0000;">position</span>:<span style="color: #0000ff;">absolute</span>;<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">158px</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">transition</span>:<span style="color: #0000ff;"> opacity 0.75s</span>;}<span style="color: #800000;"> .qrImgBox:hover .imgLeft</span>{<span style="color: #ff0000;">left</span>:<span style="color: #0000ff;">12px</span>;}<span style="color: #800000;"> .qrImgBox:hover .imgRight</span>{<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">1</span>;}
2.样式方面,给div一个相对定位,然后两张图绝对定位。给二维码这张图设置一个z-index,使其高于另一张图,然后先将其定位与div的中央
另一种图绝对定位到右侧,然后透明度设置成0
3.给盒子增加hover伪类,使二维码移到左侧,右侧图透明度恢复
4.再分别加上transition属性,针对其变化的属性,比如二维码图就是transition:left 0.75s;
二、就是图下这两个标签的切换啦
1.结构就是先一个大盒子,盒子中先是一个盒子存放左右两个标签,又有两个盒子分别是对应的两个页面
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="mainBox"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="logButton"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="QrLogo"</span><span style="color: #0000ff;">></span>二维码登录<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="emailLogo"</span><span style="color: #0000ff;">></span>邮箱账号登录<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="QrPage"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="emailPage"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
2.样式 为了简化,我省略了设置宽高,浮动,文字位置之类的样式,剩下就只有给大盒子设置背景,给未选择的便签设置不同的背景,隐藏未选择的页面
<span style="color: #800000;">.mainBox</span>{<span style="color: #ff0000;">background-color</span>:<span style="color: #0000ff;"> #daeaeb</span>;}<span style="color: #800000;"> #emailLogo</span>{<span style="color: #ff0000;">background-color</span>:<span style="color: #0000ff;"> #dae1e7</span>;}<span style="color: #800000;"> #emailPage</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;"> none</span>;}
3.然后用js操作,图方便,我是用jquery操作的
$("#emailLogo").mouseover(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ $(</span>"#emailLogo").css("background-color","#eaeaeb"<span style="color: #000000;">); $(</span>"#QrLogo").css("background-color","#dae1e7"<span style="color: #000000;">); $(</span>"#emailPage").css("display","flex"<span style="color: #000000;">); $(</span>"#QrPage").css("display","none"<span style="color: #000000;">); }); $(</span>"#QrLogo").mouseover(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){ $(</span>"#QrLogo").css("background-color","#eaeaeb"<span style="color: #000000;">); $(</span>"#emailLogo").css("background-color","#dae1e7"<span style="color: #000000;">); $(</span>"#QrPage").css("display","flex"<span style="color: #000000;">); $(</span>"#emailPage").css("display","none");
鼠标移到email便签时,两个便签的背景色互换,两个页面的display也互换(由于我页面内是flexbox布局的,所以display是flex)
反之同理。
3.收获的小技巧
本来是用mark man 来测颜色,测距离的
后来发现用QQ自带的截屏功能就可以了呢,颜色,距离一应俱全。摁住ctrl键,颜色就会变成#ffffff的格式啦。
未完成的点:
1.标签边框似乎用box-shadow处理了,有一点立体的感觉
2.点击版本切换,这个div 绝对定位可以实现,算是偷懒吧,之后再补上
好了,就学到这里吧,每次有进步有收获就好啦
欢迎来我的个人主页了解我哦,wzlinsen.com
技能页可以收藏当作前端知识的索引呢,至少我是这么用的