一道阿里前端笔试题
题目：
用CSS实现布局
让我们一起来做一个页面首先，我们需要一个布局。请使用CSS控制3个div，实现如下图的布局。
用javascript优化布局
由于我们的用户群喜欢放大看页面，于是我们给上一题的布局做一次优化。当鼠标略过某个区块的时候，该区块会放大25%，并且其他的区块仍然固定不动。
思路：
注意题目由于是只让用3个div，这让我很不习惯，如果不这么限制，我至少用四个,类似这样。
<div class='left'>
<div id='left1'></div>
<div id='left2'></div>
</div>
<div class='right'></div>
把其中的left和right都设成float。
现在只能用3个div，最简单的办法就是使用绝对定位。如果还要用浮动的方法，那么只能将left1,left2都设置成浮动。
完整的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>teset</title>
<style type="text/css">
div{background:red;}
#left1,#left2{
width:50px;
height:50px;
float:left;
}
#left2{
margin-top:60px;
margin-left:-160px;
}
#right{
width:100px;
height:110px;
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div id='left1'></div>
<div id='right'></div>
<div id='left2'></div>
</body>
</html>
看到下面还要求鼠标移上去的时候放大，由于浮动布局很容易遭到破坏。在这种情况，用绝对定位是一个不错的选择。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>teset</title>
<style type="text/css">
div{background:red;}
#left1,#left2{
width:50px;
height:50px;
position:absolute;
}
#left1{
top:0px;left:0px;
}
#left2{
top:60px;left:0px;
}
#right{
width:100px;height:110px;
top:0px;left:60px;
position:absolute;
}
</style>
</head>
<body>
<div id='left1'></div>
<div id='left2'></div>
<div id='right'></div>
</body>
</html>
下面开始写js函数控制div的变化，以#left1为例：
function zoomIn(){
var node=dojo.byId('left1');
dojo.style(node,'width','60px');
dojo.style(node,'height','60px');
}
function zoomOut(){
var node=dojo.byId('left1');
dojo.style(node,'width','50px');
dojo.style(node,'height','50px');
}
dojo.addOnLoad(
function(){
dojo.connect(dojo.byId('left1'),'onmouseover',null,zoomIn);
dojo.connect(dojo.byId('left1'),'onmouseout',null,zoomOut);
}
);
这里用到了dojo，天天在用，也就顺手了。