Answers to Web Front-end development questions and answers to web Front-end questions

Answers to Web Front-end development questions and answers to web Front-end questions

Part 1: Layout with CSS

Let's create a page together.

First, we need a layout.

Use CSS to control the three divs to implement the layout as shown in figure.

 

Part 2: optimize layout with javascript

Because our user group prefers to enlarge the page

So we optimized the layout of the previous question.

When you move the cursor over a block, the block is enlarged by 25%,

Other blocks remain unchanged.

 

Tip:

Maybe we will also use this amplification effect for other la S. You can use any open source code, including those you wrote yourself.

Keywords: javascript, encapsulation, Reuse

Part 3: handling emergencies

Okay, our page is complete.

So we published the page online.

Suddenly, the page cannot be accessed. What do you do at this time?

So far, can you give a correct answer? Think carefully, and then look at the answer on the page.

Answer Section

Question 1: mainly consider several issues: 1. IE6's 3-pixel BUG; 2. Clear floating;

CSS code:

Div {Background: # CCCCCC ;}

# First {Float: Left;Width: 100px;Height: 150px}

# Second {Clear: Left;Float: Left;Margin-top: 10px;Width: 100px;Height: 150px}

# Third {zoom: 1;Width: 200px;Margin-left: 110px;_ Margin-left: Pixel PX;Height: 310px}

XML/HTML code

<DivId = "first"> </Div>

<DivId = "second"> </Div>

<DivId = "third"> </Div> 

Question 2: optimize layout with javascript

Tip:

Maybe we will also use this amplification effect for other la S.

You can use any open source code, including those you wrote yourself.

Keywords: javascript, encapsulation, Reuse

Sorry, I didn't optimize the layout with the layout above, and I changed the layout with absolute positioning;

So the style is changed to the following:

Body {margin: 0; padding: 0}

Div {background: # CCCCCC; position: absolute}

# First {width: 100px; height: 150px}

# Second {top: 160px; width: 100px; height: 150px}

# Third {width: 200px; height: 310px; left: 110px}

Javascript should be encapsulated and reused

FunctionZoom (id, x, y) {// set the scaling function parameters: container id, horizontal scaling factor, and vertical scaling factor (you can also set a parameter for proportional scaling)

VarObj = document. getElementById (id); // obtain the element object Value

VarDW = obj. clientWidth; // obtain the element width.

VarDH = obj. clientHeight; // obtain the element height.

// Var oTop = obj. offsetTop;

// Var oLeft = obj. offsetLeft;

Obj. onmouseover =Function() {// Move the mouse in

This. Style. width = dW * x + "px"; // horizontal scaling

This. Style. height = dH * y + "px"; // Vertical Scaling

This. Style. backgroundColor = "# f00"; // sets the debugging background.

This. Style. zIndex = 1; // set the Z axis priority.

}

Obj. onmouseout =Function() {// Move the mouse out, set back to the default value

This. Style. width = "";

This. Style. height = "";

This. Style. padding = "";

This. Style. backgroundColor = "";

This. Style. zIndex = "";

}

}

Zoom ("first", 1.25, 1.25 );

Zoom ("second", 1.25, 1.25 );

Zoom ("third", 1.25, 1.25 );

The third question may be that the JS Code is not placed behind the page, and the loading speed is slow and not displayed yet. Or the page address is incorrect.