注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

独行冰海

不为明天而烦恼,不为昨天而叹息,只为今天更美好!——刘国利

 
 
 

日志

 
 
关于我

刘国利:白色,是我的世界的颜色,独特而隐逸。我的“自由”不单纯是不让别人决定我的人生,还是认识我的个性,维护我的个性,决定我生活目标的代名词,也从不以“地位”、“权力”为目标,只为了自己心底的梦、珍重的事、守护的情而奋斗。

网易考拉推荐

浮动元素 面试题 WEB前端开发  

2013-07-25 23:54:07|  分类: WEB-面试题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
这道题是阿里巴巴的WEB前端开发面试题,主要考察的是浮动布局以及IE6的3像素兼容问题
今天给班里孩子们出这道题,孩子们有点想疯的欲望,自己还是写一下吧
想实现的效果图如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>浮动元素 面试题 WEB前端开发
</title>

<meta author='独行冰海' />

<link rel="stylesheet" type="text/css" href="reset.css">
<style>
div{background:#fcc;}
.first{float:left;width:100px; height:150px}/*第一个块发生浮动*/
.second{clear:left;float:left;margin-top:10px;width:100px;height:150px}/*第二个块先清除浮动再发生浮动*/
.third{zoom:1; width:200px;height:310px;margin-left:110px;_margin-left:107px; }
</style>
</head>
<body>
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</body>
</html>

这道浮动元素的WEB前端面试题里,有两个地方需要注意,其一就是第二个块的设置:需要先清除浮动,然后再向左进行浮动,从而使得第二个块摞在第一个块的下面
第二个需要注意的地方就是,由于浮动元素和非浮动元素处于同一行,即第三个块和第一二个块同行显示,在IE6下会有bug。需要触发IE6的haslayout(使用zoom:1),同时IE6下会有3像素的bug,因此在此处添加“_margin-left : 107px”
  评论这张
 
阅读(1362)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018