每周网页练习-网易邮箱首页_html/css_WEB-ITnose-html教程-PHP中文网

每周网页练习-网易邮箱首页_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:23:25

原创

1995人浏览过

之前计划是一周还原一个网页或者切一张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）

反之同理。