1、请实现页面布局，包括页头、内容区域、页脚三部分，其中内容区域为左右分栏，左栏定宽200px、右栏自适应宽度。
知识点 CSS中position属性的应用：
position:这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是属于什么类型，相对定位元素会相对于它在正常流中的默认位置偏移。
absolute:生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。（left,top,bootom,right）进行规定。
fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。（left top rigt bottom）
relative:生成相对定位，相对于其正常位置进行定位。（left:20表示向元素的LEFT位置添加20像素）
static 默认没有定位
<!DOCTYPE HTML> <html lang="ch-ZN"> <head> <meta charset="utf-8"> <title>页头中间分栏页脚</title> <style> html,body,header,footer{width:100%;padding:0px; margin:0px;} header,footer{background: red;} #main{padding-left:200px;} #left{width:200px;position:absolute;left:0px;background: green;} #right{width:100%;background: yellow;} </style> </head> <body> <header> 我是页头 </header> <div id="main"> <div id="left">我是左边</div> <div id="right">我是右边</div> </div> <footer>我是页脚 </footer> </body> </html>
转载自（http://witmax.cn/css-layout-1.html）
最近发现阿里巴巴的Web前端开发面试题，共分三部分：CSS部分，JavaScript部分，紧急处理部分，分享给大家做个参考～
第一部分：用CSS实现布局
让我们一起来做一个页面
首先，我们需要一个布局。
请使用CSS控制3个div，实现如下图的布局。
本题主要考察三个方面，1. IE6 的 3 像素 BUG；2. 清楚浮动；
1 <!DOCTYPE HTML> 2 <html lang="ch-ZN"> 3 <head> 4 <meta charset="utf-8"> 5 <title>布局</title> 6 <style> 7 div{background:#CCCCCC;} 8 #first{float:left;width:100px; height:150px} 9 #second{clear:left;float:left;margin-top:10px;width:100px;height:150px} 10 #third{zoom:1; width:200px;margin-left:110px;margin-left:107px; height:310px} 11 </style> 12 </head> 13 <body> 14 15 <div id="first"></div> 16 <div id="second"></div> 17 <div id="third"></div> 18 </body> 19 </html>
float:
loat 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
clear:
clear 属性规定元素的哪一侧不允许其他浮动元素。
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
第二部分：用javascript优化布局
由于我们的用户群喜欢放大看页面
于是我们给上一题的布局做一次优化。
当鼠标略过某个区块的时候，该区块会放大25%，
并且其他的区块仍然固定不动。
提示：
也许，我们其他的布局也会用到这个放大的效果哦。
可以使用任何开源代码，包括曾经你自己写的。
关键字：javascript、封装、复用
惭愧啊，用上边那个布局我怎么也没把它优化出来，硬这头皮用绝对定位改了布局；
所以样式改成了这样
1 <!DOCTYPE HTML> 2 <html lang="ch-ZN"> 3 <head> 4 <meta charset="utf-8"> 5 <title>页头中间分栏页脚</title> 6 <style> 7 body{ margin:0; padding:0} 8 div{background:#CCCCCC; position:absolute} 9 #first{width:100px; height:150px} 10 #second{top:160px;width:100px;height:150px} 11 #third{ width:200px; height:310px; left:110px} 12 13 14 </style> 15 </head> 16 <body> 17 18 <div id="first"></div> 19 <div id="second"></div> 20 21 <div id="third"></div> 22 <script type="text/javascript"> 23 function zoom(id,x,y){ 24 // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数） 25 var obj=document.getElementById(id); // 获取元素对象值 26 var dW=obj.clientWidth; // 获取元素宽度 27 var dH=obj.clientHeight; // 获取元素高度 28 //var oTop=obj.offsetTop; 29 //var oLeft=obj.offsetLeft; 30 obj.onmouseover=function(){ // 鼠标移入 31 this.style.width=dW*x+"px"; // 横向缩放 32 this.style.height=dH*y+"px"; // 纵向缩放 33 this.style.backgroundColor="#f00"; // 设置调试背景 34 this.style.zIndex=1; // 设置z轴优先 35 } 36 obj.onmouseout=function(){ // 鼠标移出，设回默认值 37 this.style.width=""; 38 this.style.height=""; 39 this.style.padding=""; 40 this.style.backgroundColor=""; 41 this.style.zIndex=""; 42 } 43 } 44 zoom("first",1.25,1.25); 45 zoom("second",1.25,1.25); 46 zoom("third",1.25,1.25); 47 </script> 48 49 </body> 50 </html>
第三部分：处理紧急情况
好了，我们的页面完成了。
于是我们将页面发布上网。
突然，晴天霹雳，页面无法访问了，这时候，你会怎么做？
面试题到此为止，你是否能够对答如流呢，仔细想一下，然后在翻页看一下答案。
第三题也许是JS代码没有放在页面的后面，加载速度慢尚未显示出来。或者是页面地址出错了。
这种情况下，先查看页面的源代码，看看有没有什么问题，然后找后台技术人员，看是不是服务器或技术方面的问题。
（个人认为 1 自己所输的路径是否错误，查看源代码 看看有没有代码没写好 导致浏览器无法加载出页面，js代码是否正确加载，这些都查看正确之后 找后台人员看是不是服务器问题还是路径问题。）
原文：http://www.cnblogs.com/huhaibo/p/3618386.html