题目:
用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,天天在用,也就顺手了。