浅析阿里巴巴前端招聘考题
作者：zbm2001z 来源：蓝色理想 发布时间：2008-01-19 09:52:00
标签：阿里巴巴,招聘,css,javascript,布局
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>
或是：
<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>
最终调整为一个比较健壮的流体布局方案：
<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>
0
投稿猜你喜欢
在用wordpress这个博客的时候，我很奇怪的发现，最近写的内容排在第一页，而最早写的成了最后页。这显然有悖逻辑，正常的情况应该是最早写的- 目的: 从数据库读取二进制位图图形数据资料, 透过 ImageMagickObject 组件即时制作缩略图,并显示在网页上 (ge
- 写了几年代码，很少谈到javascript程序的执行效率问题，今天就举几个例子看看，让大家看看程序优化是多么重要。这节来看看createEl
- 基于web的技术中，分页是一个老的不能再老的，但大家津津乐道的问题，随着xml技术的日渐应用，把xml应用到分页当中，也是一种可能，当然网上
- 数据库的使用过程中由于程序方面的问题有时候会碰到重复数据，重复数据导致了数据库部分设置不能正确设置……方法一以下为引用的内容：declare
- 啥都不说了，直接奉献原代码 代码如下:'==========注意==================================
- 下面是用SA-FileUp组件上传一个HTML文件的程序：fileup.htm < HTM
- 1.函数array() 功能:创建一个数组变量 格式:array(list) 参数:list为数组变量中的每个数值列,中间用逗号间隔 例子:
- 随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在
- 首先.还是看效果.实现对文本域textarea中文字字数的限制。然后.米了...看文件.里面写的很清楚了.下面这个是单独的效果..提示用al
- 给静态网页加密的方法有很多，有的简单有的复杂。前两天看见有人问静态网页加密问题，就写了这个代码思路：加密时：先把用户的密钥A用md5加密为B
- 总结常用基本点如下： 1、触发器有两种类型：数据定义语言触发器（DDL触发器）和数据操纵语言触发器（DML触发器）。 DDL触发器：在用户对
- 当您使用FILESYSTEMOBJECT（fso）对象获得某个目录下的文件列表的时候，你有没有发现无法控制它们的排序方式，比如按照名字排序，
- 下面我们用HTML来上传3个文件看看，它包含了文本描述字段和多项选择:upload.htm<HTML> <BOD
- 1、什么是AspJpeg？AspJpeg是一款功能强大的基于Microsoft IIS环境的图片处理组件，网络上对其进行详细和深入介绍的中文
- 本教程中将详细阐述传统的图形设计元素是如何应用在现代（2.0时代）的页面设计中的，然后我将解释为什么它们能流行开来，以及如何、何时、在哪里使
- 用语言实现 好处： 1、可以减少对数据库的访问。 2、可移植性好。 坏处： 1、操作起来考虑的东西较多，修改一处就要修改别一处。也就是说是相
- SQL语言共分为四大类：数据查询语言DQL，数据操纵语言DML， 数据定义语言DDL，数据控制语言DCL。其中用于定义数据的结构，比如 创建
- 同事在准备新老系统的切换，清空一个表的时候往往发现这个表的主键被另一个表用做外键，而系统里有太多层次的引用.所以清起来相当麻烦用下面这个脚本
- 方法一：（by yangedie ）这几天刚刚做了这个东西，有网友问到，所以分享一下。ie6、firefox2 通过，麻烦有ie7的网友测试
