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

Source: Internet
Author: User

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.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.