浅析阿里巴巴前端招聘考题

作者：zbm2001z 来源：蓝色理想时间：2008-01-19 09:52:00　

1.用CSS实现布局

让我们一起来做一个页面，首先，我们需要一个布局。

请使用CSS控制3个div，实现如下图的布局。

考察应试者的基本布局知识——浮动或绝对定位（显然，后者在流体布局各区块自适应内容高度的情况下并不适用）。

这里给一个通常的布局方案：

<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
    float:left;
    width:200px;
}
#secondly{
    clear:left;
    float:left;
    margin-top:10px;
    width:200px;
}
#thirdly{
    margin-left:210px;
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>

然而在IE6-中，当：

<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
    float:left;
    width:200px;
}
#secondly{
    clear:left;
    float:left;
    margin-top:10px;
    width:200px;
}
#thirdly{
    margin-left:210px;
    width:400px; /* 然而在IE6-中，当width设定为除auto（默认值）以外的值时，触发Layout特性，会整体向右产生3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>

<!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>流体布局3</title><style type="text/css">div{background:#ccc;}h2{margin:0;}#firstly{float:left;width:200px;}#secondly{clear:left;float:left;margin-top:10px;width:200px;}#thirdly{margin-left:210px;width:400px; /* 然而在IE6-中，当width设定为除auto（默认值）以外的值时，触发Layout特性，会整体向右产生3像素偏移bug */}</style></head><body><div id="firstly"> <h2>#firstly</h2> float:left;<br /> width:200px;<br /></div><div id="secondly"> <h2>#secondly</h2> clear:left;<br /> float:left;<br /> margin-top:10px;<br /> width:200px;<br /></div><div id="thirdly"> <h2>#thirdly</h2> ←margin-left:210px;<br /> ←width:400px;<br /> ←然而在IE6-中，<br /> ←当width设定为除auto（默认值）以外的值时，<br /> ←触发Layout特性，<br /> ←会整体向右产生3像素偏移bug<br /> ←<br /> ←<br /></div><div id="comparison" style="clear:both;width:610px;background:#f00;text-align:right;">width:610px; 宽度参照↗</div></body></html>

或是：

<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
    float:left;
    width:200px;
}
#secondly{
    clear:left;
    float:left;
    margin-top:10px;
    width:200px;
}
#thirdly{
    margin-left:210px;
    height:200px; /* 然而在IE6-中，当height设定为除auto（默认值）以外的值时，触发Layout特性，左边缘会向右产生3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>

<!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>流体布局2</title><style type="text/css">div{background:#ccc;}h2{margin:0;}#firstly{float:left;width:200px;}#secondly{clear:left;float:left;margin-top:10px;width:200px;}#thirdly{margin-left:210px;height:200px; /* 然而在IE6-中，当height设定为除auto（默认值）以外的值时，触发Layout特性，左边缘会向右产生3像素偏移bug */}</style></head><body><div id="firstly"> <h2>#firstly</h2> float:left;<br /> width:200px;<br /></div><div id="secondly"> <h2>#secondly</h2> clear:left;<br /> float:left;<br /> margin-top:10px;<br /> width:200px;<br /></div><div id="thirdly"> <h2>#thirdly</h2> ←margin-left:210px;<br /> ←heigh:200px;<br /> ←然而在IE6-中，<br /> ←当height设定为除auto（默认值）以外的值时，<br /> ←触发Layout特性，<br /> ←左边缘会向右产生3像素偏移bug<br /> ←<br /> ←<br /></div><div id="comparison" style="clear:both;background:#f00;text-align:right;">width:610px; 宽度参照↗</div></body></html>

最终调整为一个比较健壮的流体布局方案：

<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
    float:left;
    width:200px;
}
#secondly{
    clear:left;
    float:left;
    margin-top:10px;
    width:200px;
}
#thirdly{
    -zoom:1; /* 在IE6-中，初始化触发Layout */
    margin-left:210px;
    -margin-left:207px; /* 修正IE6-中触发Layout后3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>

<!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>健壮的流体布局</title><style type="text/css">div{background:#ccc;}h2{margin:0;}#firstly{float:left;width:200px;}#secondly{clear:left;float:left;margin-top:10px;width:200px;}#thirdly{-zoom:1; /* 在IE6-中，初始化触发Layout */margin-left:210px;-margin-left:207px; /* 修正IE6-中触发Layout后3像素偏移bug *//* 现在IE6-中，width值和height值可任意设定而不会影响布局 */}</style></head><body><div id="firstly"> <h2>#firstly</h2> float:left;<br /> width:200px;<br /></div><div id="secondly"> <h2>#secondly</h2> clear:left;<br /> float:left;<br /> margin-top:10px;<br /> width:200px;<br /></div><div id="thirdly"> <h2>#thirdly</h2> ←-zoom:1; 在IE6-中，初始化触发Layout <br /> ←margin-left:210px;<br /> ←-margin-left:207px; 修正IE6-中触发Layout后3像素偏移bug </br /> ←现在IE6-中，width值和height值可任意设定而不会影响布局<br /> ←<br /> ←<br /> ←<br /> ←<br /></div></body></html>

2 3 下一页

标签：阿里巴巴,招聘,css,javascript,布局

投稿

浅析阿里巴巴前端招聘考题

猜你喜欢

仿阿里巴巴搜索导航设计效果

ASP 统计某字符串中“A”出现过的次数

如何使用Index Server建立一个网站导航地图？

处理HTML代码的若干函数

一组常用的弹出窗口用法总结

JScript下Array对象的性能问题

asp如何实现对Session 数组的定义和调用？

如何拒绝同一张表单被多次提交？

SQL Server中使用DTS设计器进行数据转移

SQL Server 2005 Express混合模式登录设置

JavaScript版俄罗斯方块Easy Tetris实现原理

ASP怎么谈到应用到类的？

如何由Sybase向SQL Server移植数据库

滑动展开/收缩广告代码实例效果

100％全屏布局设计

VML模拟Rose画流程图代码

Microsoft SQL Server 2008 正式发布

JavaScript 组件之旅（一）：分析和设计

视觉注意力—解剖设计的根源

Oracle 用户权限管理方法