Weekly web exercises-Netease mail homepage and Netease mail Homepage

Weekly web exercises-Netease mail homepage and Netease mail Homepage

The previous plan was to restore a web page or cut a psd to practice basic skills in a week. I received a phone interview on Friday and asked me to restore my 163 email homepage and send it to him at night. This is exactly the exercise of this week.

It took about four hours to finish dinner at, but some of them were not completed yet. The restoration degree is 90%, and the remaining two days are empty.

This is the current completion of wzlinsen.com/program/163mail

Record what you get

I. The first is the sliding effect of the QR code. In fact, it is the absolute positioning plus the transparency change and the transition attribute of css3.

<div class="qrImgBox">          </div>

1. The structure is very simple, that is, two images in the middle of a 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. In terms of style, give the div A relative positioning, and then the two images are absolutely positioned. Set a z-index for the two-dimensional code diagram to be higher than the other one, and then locate it in the center of the div

The other image is absolutely positioned to the right, and the transparency is set to 0.

3. Add a hover pseudo class to the box, move the QR code to the left, and restore the transparency of the right image

4. Add the transition attribute to the changed attributes. For example, the two-dimensional code diagram is transition: left 0.75 s;

 

2. switch between the two labels in the figure.

1. The structure is to first create a large box. First, a box stores both the left and right labels, and two boxes respectively correspond to two pages.

<Div class = "mainBox"> <div class = "logButton"> <div id = "QrLogo"> QR code logon </div> <div id = "emailLogo"> email account log on to </div> <div id = "QrPage"> </div> <div id = "emailPage"> </div>

2. in order to simplify the style, I omitted setting styles such as width and height, float, and text position. The rest is to set the background for the large box and set different backgrounds for unselected tabs, hide unselected pages

.mainBox{background-color: #daeaeb;}#emailLogo{background-color: #dae1e7;}#emailPage{display: none;}

3. Then use js for operations. The figure is convenient. I use jquery for operations.

$("#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");

When you move the mouse over the email tab, the background color of the two tabs is exchanged, and the display of the two tabs is also exchanged (since the tab is in the flexbox layout, the display is flex)

And vice versa.

3. Tips

Originally, we used mark man to test the color and distance.

Later I found that I could use the screenshot function provided by QQ. The color and distance were all available. Hold down the ctrl key and the color will change to the # ffffff format.

 

Unfinished points:

 

1. The tag border seems to have been processed with box-shadow, with a little stereoscopic effect

2. Click version switch. This div + can be implemented by absolute positioning. It is a lazy task. Then, add it.

 

 

Now, let's get to it. Every time you make progress, you can get it.

Welcome to my personal homepage to learn more about me, wzlinsen.com

The Skills page can be used as an index for front-end knowledge in favorites, at least I use it like this.