首頁 >web前端 >html教學 >每周网页练习—网易邮箱首页 - 五木十架

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

WBOY原創: 2016-05-21 08:54:311942瀏覽

之前计划是一周还原一个网页或者切一张psd来练习基本功的。正好周五的时候接到一个电话面试，让我还原一下163邮箱主页，晚上发给他，就正好当是这周的练习吧。

吃完晚饭开工，做到12点，差不多4个小时，基本上做完了，不过还有些局部没完成。算还原度90%吧，剩下的这两天有空再补啦。

这是目前的完成情况 wzlinsen.com/program/163mail

记录一下收获吧

一、首先是这个二维码的滑动效果吧，其实就是绝对定位加上透明度变化加上css3的transition属性

<span style="color: #0000ff;"><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 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 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></span></span></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 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 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 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 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 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 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></span></span></span></span></span></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处理了，有一点立体的感觉