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.