WEB前端题集解答（1）

下面的题目来自阿里前端。

1.用CSS实现布局

让我们一起来做一个页面
首先，我们需要一个布局。
请使用CSS控制3个div，实现如下图的布局：

2.用javascript优化布局

由于我们的用户群喜欢放大看页面，于是我们给上一题的布局做一次优化。

当鼠标略过某个区块的时候，该区块会放大25%，并且其他的区块仍然固定不动

效果如下：

解析：

布局的方法是很多了，通过第二题来看，宽度和高度要放大，为了不影响到B区域，A和C应该都是脱离文档流的定位，用float也可以，用绝对定位也行，先给出基本的HTML结构：

 <div id="container">
            <div class="leftTopColumn hoverEnlarge"></div>
            <div class="leftBottomColumn hoverEnlarge"></div>
            <div class="rightColumn hoverEnlarge"></div>
</div>

container那个div仅仅是为了显示方便而加上去的，实际中也需要这个容器DIV，下面是定位问题，我这里给出的解决方案是，A B C都绝对定位，A在（0,0）位置，B在（A的宽度+7px的边距， 0）的位置， C则无需设置偏移，仅需设置margin-top: A的高度+7px间距； CSS代码如下：

           /*仅是为了方便观看而设置的容器div*/
           #container{
          	position:relative;
          	margin: 200px auto;
		width:300px;
		height:300px;
           }
            
            /*通用背景色，我想笔试的时候这个应该无所谓的，hoverEnlarge类只是为了第二题而添加的*/
            .hoverEnlarge {
                background: #CDD8DA;
            }
            
            .leftTopColumn {
                position: absolute;
                width: 90px;
                height: 150px;
		z-index: 999;
				
            }
            
            .leftBottomColumn {
                position: absolute;
                width: 90px;
                height: 115px;
                margin-top: 157px;
		z-index: 998;
            }
            
            .rightColumn {
            	position:absolute;
		left: 97px;
                width: 215px;
                height: 270px;
            }

为了实现第二题的放大效果，顺便也把z-index也设置了，当然也可以在JS代码中设置。

接下来是第二题，有了第一题的铺垫，第二题实现起来也应该很容易了，主要就是考察基本的事件处理了，以下是我的JS代码：

                /*放大函数*/
		var enlarge = function(elem, level){
			var w = elem.clientWidth,
				h = elem.clientHeight;
			elem.style.width = Math.round(w * level) + 'px';
			elem.style.height = Math.round(h * level) + 'px';
			elem.style.backgroundColor = '#DDF8C0';
		},
		/*缩小函数*/
		shrink = function(elem, level){
			elem.style.width = '';
			elem.style.height = '';
			elem.style.backgroundColor = '';
		},
		
		ctn = document.getElementById('container');
		
		ctn.onmouseover = function(evt){
			evt = evt || window.event;
			var target = evt.target || evt.srcElement;
			if(target.className.indexOf('hoverEnlarge') !== -1){
				enlarge(target, 1.25);
			}
		};
		
		ctn.onmouseout = function(evt){
			evt = evt || window.event;
			var target = evt.target || evt.srcElement;
			if(target.className.indexOf('hoverEnlarge') !== -1){
				shrink(target, 1.25);
			}
		};