最近小叶子有点疲惫，主要是在外地工作生活上不太适应，吃一样的东西，我居然会拉肚子，而且是一个星期一个星期的。。。。
脸上长了一个豆豆一个星期还没消，我那个去啊。
昨天上午上班后，本来想继续研究javascript方面的东西的，但是下午要开会，结果一开就是4.5小时，哎哟，我那个怎么感觉很累啊，
明明是坐着的啊，开完会腰酸背痛的，回来吃过饭，本来想接着学习，却迷迷糊糊的睡着了......
按照进度我们本来想要开始做小窗口的，但是也碰到点问题，除了各大微博，其它数据全部是RSS，与我想象的数据源不一样，所以这块还需要点时间，加之今天起来还是有点疲惫，那我们不如这个周末就休息下吧，来做几道有意思的面试题好了，当是对前面学习的总结好了。
事情不顺利不要紧，我们一步一步来，没有什么事情做不完的。
布局类
让我们一起来做一个页面
首先，我们需要一个布局。
请使用CSS控制3个div，实现如下图的布局。
我们前面已经学了很多CSS方面的东西了，我们现在来看看这道题，我们会怎么做呢？
这道题限制了只能使用三个div，并且我多float布局比较厌恶，所以第一步应该不会采用float，但是也必须考虑各个浏览器的兼容性，于是我第一份答案出来了：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 body { margin: 0; } 6 div { background-color: Gray; color: White; text-align: center; } 7 .main { margin-left: 310px; height: 350px; } 8 .sidebar1 { width: 300px; height: 200px; position: absolute; top: 0; } 9 .sidebar2 { width: 300px; height: 140px; position: absolute; top: 210px; } 10 11 </style> 12 </head> 13 <body> 14 <div class="main">main 15 </div> 16 <div class="sidebar1">sidebar1 17 </div> 18 <div class="sidebar2">sidebar2 19 </div> 20 </body> 21 </html>
各位看到了，虽然我比较像用inline-block，但是实施起来时候发现有点困难，并且我这里想到了其它东西：
主要内容优先原则，不管是怎样的布局，我的main内容皆应该放到最前面，优先加载，这也对后面将之改成响应式布局有好处。
这样做还有一个好处便是，我们主要内容若是临时要在左边的话，改起来也必将方便，不要动到html结构。
好了，我们现在来看看有没有其它方法，比如float：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 body { margin: 0; } 6 div { background-color: Gray; color: White; text-align: center; } 7 .main { margin-left: 310px; height: 350px; } 8 .sidebar1 { width: 300px; height: 200px; float: left; } 9 .sidebar2 { width: 300px; height: 140px; float: left; clear: left; margin-top: 10px; } 10 11 </style> 12 </head> 13 <body> 14 <div class="main">main 15 </div> 16 <div class="sidebar1">sidebar1 17 </div> 18 <div class="sidebar2">sidebar2 19 </div> 20 </body> 21 </html>
有以下几个问题：
① 因为我们主要区域在前，所以后面两个浮动元素要改变位置才行，这与我们主要内容在前规则违背
② 若是此处主要内容要显示在左边的话，原来的CSS与HTML结构皆需改变
③ 浏览器兼容问题，原来的做法是没有兼容问题的，这里使用float不久后IE6下又会莫名其妙的搞好多问题出来（IE3像素，清楚浮动）
所以就这块布局来说，我是不会使用float布局的。
PS：哪位大哥有不同的意见请一定留言
第二部分：用javascript优化布局
由于我们的用户群喜欢放大看页面
于是我们给上一题的布局做一次优化。
当鼠标略过某个区块的时候，该区块会放大25%，
并且其他的区块仍然固定不动。
于是我们来看看这道题第二个需求，他要鼠标划上扩大25%，根据我们布局1的话，这个题应该比较简单，而且某些情况下也许链js都不必使用了，但是我们这里不管他：
PS：各位请不要小看这一块，你认真做了的话，他会让你感受到，没jquery并且没有形成自己库的渺小，单单是设置样式，设置class都会费尽很多
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 7 body { margin: 0; } 8 div { background-color: Gray; color: White; text-align: center; } 9 .main { margin-left: 310px; height: 350px; } 10 .sidebar1 { width: 300px; height: 200px; position: absolute; top: 0; } 11 .sidebar1:hover { background-color: Green; border: 1px solid black; z-index: 100; } 12 .sidebar2 { width: 300px; height: 140px; position: absolute; top: 210px; } 13 </style> 14 <script type="text/javascript"> 15 function preViewHtml(el) { 16 if (!el) return false; 17 var w = parseInt(el.offsetWidth); 18 var h = parseInt(el.offsetHeight); 19 setCss(el, 'width', w * 1.25 + 'px'); 20 setCss(el, 'height', h * 1.25 + 'px'); 21 setCss(el, 'background-color', parseInt(el.offsetHeight) * 1.25 + 'px'); 22 23 addEvent(el, 'mouseout', function () { 24 setCss(el, 'width', ''); 25 setCss(el, 'height', ''); 26 }); 27 28 } 29 30 function addEvent(el, type, fn) { 31 if (el.attachEvent) { 32 el['e' + type + fn] = fn; 33 el[type + fn] = function () { obj['e' + type + fn](window.event); } 34 el.attachEvent('on' + type, obj[type + fn]); 35 } else 36 el.addEventListener(type, fn, false); 37 } 38 function removeEvent(el, type, fn) { 39 if (el.detachEvent) { 40 el.detachEvent('on' + type, obj[type + fn]); 41 el[type + fn] = null; 42 } else 43 el.removeEventListener(type, fn, false); 44 } 45 46 function addClass(el, k) { 47 48 } 49 50 function removeClass(el, k) { 51 52 } 53 54 function getCss(el, k) { 55 if (el) { 56 if (el.style[k]) { 57 return el.style[k]; 58 } 59 return null; 60 } 61 } 62 63 function setCss(el, k, v) { 64 if (el) { 65 if (!el.style || el.style.length == 0) { 66 el.style = {}; 67 } 68 el.style[k] = v; 69 } 70 } 71 </script> 72 </head> 73 <body> 74 <div class="main">main 75 </div> 76 <div class="sidebar1" id="preView" onmouseover="preViewHtml(this)" >sidebar1 77 </div> 78 <div class="sidebar2">sidebar2 79 </div> 80 </body> 81 </html>