欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

每周网页练习—网易邮箱首页 - 五木十架

程序员文章站 2022-04-01 21:45:35
...
之前计划是一周还原一个网页或者切一张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

技能页可以收藏当作前端知识的索引呢,至少我是这么用的

每周网页练习—网易邮箱首页 - 五木十架