Weekly Web Practice-netease Email Home

The previous plan is to restore a Web page or cut a PSD to practice the basic skills one week. Just in Friday when received a telephone interview, let me restore a 163 mailbox home page, sent to him at night, just when it is this week's practice.

Finish the finished work, do 12 points, almost 4 hours, basically finished, but there are some partial unfinished. Calculate the degree of reduction 90%, the rest of the two days are free to fill again.

This is the current completion situation Wzlinsen.com/program/163mail

Record the harvest.

First, it is the two-dimensional code of the sliding effect bar, in fact, absolute positioning plus transparency changes plus CSS3 transition properties

<Divclass= "Qrimgbox">  <imgsrc= "Images/geturlqrcode.jpg"alt= "Geturlqrcode"class= "Imgleft">        <imgsrc= "Images/saoyisao.png"alt= "Saoyisao"class= "Imgright"></Div>

1. The structure is very simple, is a div in the middle of two pictures

. 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 Div a relative positioning, and then the two graphs are absolutely positioned. Set a z-index to the QR code, make it higher than the other graph, and then position it with the Div's center

Another diagram is absolutely positioned to the right, and then the transparency is set to 0

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

4. Add the transition attribute separately, for its changing properties, such as the two-dimensional code map is Transition:left 0.75s;

Two, is the diagram of these two tags switch

1. The structure is first a large box, the box first a box to store the left and right two labels, and two boxes are corresponding two pages

<Divclass= "Mainbox">      <Divclass= "Logbutton">        <DivID= "Qrlogo">Two-dimensional code login</Div>        <DivID= "Emaillogo">Email account Login</Div>      </Div>      <DivID= "Qrpage"></Div>      <DivID= "Emailpage"></Div></Div>

2. Style in order to simplify, I omitted to set the width of the height, floating, text position, such as the style, the rest only to the large box set the background, to the non-selected notes set a different background, hide the page is not selected

. Mainbox {Background-color: #daeaeb;} #emailLogo {Background-color: #dae1e7;} #emailPage {display: none;}

3. Then use the JS operation, the diagram is convenient, I am using jquery operation

$ ("#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 the mouse moves to the email note, the background color of the two notes is exchanged, and the display of the two pages is also interchangeable (because my page is Flexbox layout, so display is Flex)

Vice versa.

3. Tips for harvesting

I was using Mark Man to measure the color, the distance.

Later found that QQ comes with a screenshot function can be, color, distance is readily available. Hold down the CTRL key and the color will become #ffffff format.

Unfinished points:

1. The label border seems to be treated with Box-shadow, a little stereoscopic feeling

2. Click on the version switch, this div+ absolute positioning can be achieved, is lazy bar, and then fill in

Well, learn to come here, every time there is progress and harvest.

Welcome to my profile See me Oh, wzlinsen.com

The skill page can be collected as an index of the front-end knowledge, at least that's how I use it.

Weekly Web Practice-netease Email Home