Web front-end development question assignment answer

<span id="Label3"></p><p class="NewStyle15"><p class="NewStyle15">Part I: <span style="font-family: 宋体;">implementing layouts</span> with <span style="font-family: Calibri;">CSS</span></p></p><p class="NewStyle15"><p class="NewStyle15">Let's do a page together</p></p><p class="NewStyle15"><p class="NewStyle15">first, we need a Layout.</p></p><p class="NewStyle15"><p class="NewStyle15">Use <span style="font-family: Calibri;">CSS</span> to <span style="font-family: 宋体;">control</span> the <span style="font-family: Calibri;">3</span> <span style="font-family: 宋体;"></span> <span style="font-family: Calibri;">Div</span><span style="font-family: 宋体;">to implement the Layout. </span></p></p><p class="NewStyle15"><p class="NewStyle15"></p></p><p class="NewStyle15"><p class="NewStyle15"><strong>Part Ii: optimizing layouts with JavaScript</strong></p></p><p class="NewStyle15"><p class="NewStyle15">Because our user base likes to enlarge the page view</p></p><p class="NewStyle15"><p class="NewStyle15">So we made an optimization for the layout of the previous Question.</p></p><p class="NewStyle15"><p class="NewStyle15">When the mouse skips over a chunk, the chunk is magnified by 25%,</p></p><p class="NewStyle15"><p class="NewStyle15">And the other blocks remain stationary.</p></p><p class="NewStyle15"><p class="NewStyle15"></p></p><p class="NewStyle15"><p class="NewStyle15"><strong>Tips:</strong></p></p><p class="NewStyle15"><p class="NewStyle15">perhaps, Our other layouts will also use this amplification effect oh. You can use any open source code, including the one you wrote yourself.</p></p><p class="NewStyle15"><p class="NewStyle15">Keywords: javascript, encapsulation, Multiplexing</p></p><p class="NewStyle15"><p class="NewStyle15"><strong>Part iii: Handling Emergency situations</strong></p></p><p class="NewStyle15"><p class="NewStyle15">ok, our page is Finished.</p></p><p class="NewStyle15"><p class="NewStyle15">So we publish the page to the Internet.</p></p><p class="NewStyle15"><p class="NewStyle15">suddenly, a bolt from the blue, the page can not be accessed, this time, what will you do?</p></p><p class="NewStyle15"><p class="NewStyle15">The interview is over, can you fluent it, think it over, and look at the answer on the Page.</p></p><p class="NewStyle15"><p class="NewStyle15"><strong>Answer section</strong></p></p><p class="NewStyle15"><p class="NewStyle15"><strong>The first question: the main consideration is several Questions: 1. IE6 of 3 pixels bug;2. Clear float;</strong></p></p><p class="NewStyle15"><p class="NewStyle15">CSS Code:</p></p><p class="NewStyle15"><p class="NewStyle15">div{<strong>background</strong>: #CCCCCC;}</p></p><p class="NewStyle15"><p class="NewStyle15">#first {<strong>float</strong>: left; <strong> Width</strong>: 100px; <strong>Height</strong>: 150px}</p></p><p class="NewStyle15"><p class="NewStyle15">#second {<strong>Clear</strong>: left; <strong> Float</strong>: left; <strong>margin-top</strong>: 10px; <strong>width</strong>: 100px; <strong>Height</strong>: 150px}</p></p><p class="NewStyle15"><p class="NewStyle15">#third {zoom:1; <strong>width</strong>: 200px; <strong>margin-left</strong>: 110px; <strong>_margin-left</strong>: 107px; <strong>Height</strong>: 310px}</p></p><p class="NewStyle15"><p class="NewStyle15">xml/html Code</p></p><p class="NewStyle15"><p class="NewStyle15"><strong><div</strong> id= "first"<strong>></div></strong></p></p><p class="NewStyle15"><p class="NewStyle15"><strong><div</strong> id= "second"<strong>></div></strong></p></p><p class="NewStyle15"><p class="NewStyle15"><strong><div</strong> id= "third"<strong>></div></strong></p></p><p class="NewStyle15"><p class="NewStyle15"><strong>Second question: optimizing layouts with JavaScript</strong></p></p><p class="NewStyle15"><p class="NewStyle15">Tips:</p></p><p class="NewStyle15"><p class="NewStyle15">perhaps, Our other layouts will also use this amplification effect oh.</p></p><p class="NewStyle15"><p class="NewStyle15">You can use any open source code, including the one you wrote yourself.</p></p><p class="NewStyle15"><p class="NewStyle15">Keywords: javascript, encapsulation, Multiplexing</p></p><p class="NewStyle15"><p class="NewStyle15">Ashamed ah, with the above layout I did not optimize it out, hard this scalp with absolute positioning changed the layout;</p></p><p class="NewStyle15"><p class="NewStyle15">So the style changed to This:</p></p><p class="NewStyle15"><p class="NewStyle15">body{margin:0; padding:0}</p></p><p class="NewStyle15"><p class="NewStyle15">Div{background: #CCCCCC; position:absolute}</p></p><p class="NewStyle15"><p class="NewStyle15">#first {width:100px; height:150px}</p></p><p class="NewStyle15"><p class="NewStyle15">#second {top:160px;width:100px;height:150px}</p></p><p class="NewStyle15"><p class="NewStyle15">#third {width:200px; height:310px; left:110px}</p></p><p class="NewStyle15"><p class="NewStyle15">JavaScript should consider encapsulation, reuse</p></p><p class="NewStyle15"><p class="NewStyle15"><strong>function</strong> Zoom (id,x,y) {// <span style="font-family: 宋体;">Set scaling function parameters: container</span> <span style="font-family: Courier New;">ID</span><span style="font-family: 宋体;">, Horizontal zoom multiplier, Vertical Zoom multiplier (you can also set a parameter when Scaling)</span></p></p><p class="NewStyle15"><p class="NewStyle15"><strong>var</strong> obj=document.getelementbyid (id); <span style="font-family: 宋体;">get Element Object value</span></p></p><p class="NewStyle15"><p class="NewStyle15"><strong>var</strong> dw=obj.clientwidth; <span style="font-family: 宋体;">Get element width</span></p></p><p class="NewStyle15"><p class="NewStyle15"><strong>var</strong> dh=obj.clientheight; <span style="font-family: 宋体;">Get element Height</span></p></p><p class="NewStyle15"><p class="NewStyle15">var otop=obj.offsettop;</p></p><p class="NewStyle15"><p class="NewStyle15">var oleft=obj.offsetleft;</p></p><p class="NewStyle15"><p class="NewStyle15">obj.onmouseover=<strong>function</strong>() {// <span style="font-family: 宋体;">mouse move in</span></p></p><p class="NewStyle15"><p class="NewStyle15"><strong></strong>this. style.width=dw*x+ "px"; <span style="font-family: 宋体;">Horizontal Zoom</span></p></p><p class="NewStyle15"><p class="NewStyle15"><strong></strong>this. style.height=dh*y+ "px"; <span style="font-family: 宋体;">Vertical Scaling</span></p></p><p class="NewStyle15"><p class="NewStyle15"><strong></strong>this. style.backgroundcolor= "#f00 ″; <span style="font-family: 宋体;">Setting the debug background</span></p></p><p class="NewStyle15"><p class="NewStyle15"><strong></strong>This. style.zindex=1; <span style="font-family: 宋体;">set</span> <span style="font-family: Courier New;">z</span> - <span style="font-family: 宋体;">axis precedence</span></p></p><p class="NewStyle15"><p class="NewStyle15">}</p></p><p class="NewStyle15"><p class="NewStyle15">obj.onmouseout=<strong>function</strong>() {// <span style="font-family: 宋体;">Mouse out, set back to default value</span></p></p><p class="NewStyle15"><p class="NewStyle15"><strong></strong>this. style.width= "";</p></p><p class="NewStyle15"><p class="NewStyle15"><strong></strong>this. style.height= "";</p></p><p class="NewStyle15"><p class="NewStyle15"><strong></strong>this. style.padding= "";</p></p><p class="NewStyle15"><p class="NewStyle15"><strong></strong>this. style.backgroundcolor= "";</p></p><p class="NewStyle15"><p class="NewStyle15"><strong></strong>this. style.zindex= "";</p></p><p class="NewStyle15"><p class="NewStyle15">}</p></p><p class="NewStyle15"><p class="NewStyle15">}</p></p><p class="NewStyle15"><p class="NewStyle15">Zoom ("first", 1.25,1.25);</p></p><p class="NewStyle15"><p class="NewStyle15">Zoom ("second", 1.25,1.25);</p></p><p class="NewStyle15"><p class="NewStyle15">Zoom ("third", 1.25,1.25);</p></p><p class="NewStyle15"><p class="NewStyle15">The third problem may be that the JS code is not placed behind the page, loading speed has not been shown. or the page address is Wrong.</p></p><p class="NewStyle15"><p class="NewStyle15"></p></p><p><p>Web front-end development question assignment answer</p></p></span>