文档章节

阿里巴巴Web前端开发面试题赋答案

Qianduaner
 Qianduaner
发布于 2013/09/06 20:01
字数 678
阅读 945
收藏 36

最近发现阿里巴巴的Web前端开发面试题,共分三部分:CSS部分,JavaScript部分,紧急处理部分,分享给大家做个参考~

第一部分:用CSS实现布局

让我们一起来做一个页面

首先,我们需要一个布局。

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

e65e0e34544aa20a251f14a2.jpg 

第二部分:用javascript优化布局

由于我们的用户群喜欢放大看页面

于是我们给上一题的布局做一次优化。

当鼠标略过某个区块的时候,该区块会放大25%,

并且其他的区块仍然固定不动。

78662dd02d1862cba0ec9cc6.jpg 

提示:

也许,我们其他的布局也会用到这个放大的效果哦。可以使用任何开源代码,包括曾经你自己写的。

关键字:javascript、封装、复用

第三部分:处理紧急情况

好了,我们的页面完成了。

于是我们将页面发布上网。

突然,晴天霹雳,页面无法访问了,这时候,你会怎么做?

答案部分

第一题:主要考虑几个问题:1. IE6 的 3 像素 BUG;2. 清楚浮动;

CSS代码:


  
  
  1. div{background:#CCCCCC;}  
  2. #first{float:left;width:100pxheight:150px}  
  3. #second{clear:left;float:left;margin-top:10px;width:100px;height:150px}  
  4. #third{zoom:1width:200px;margin-left:110px;_margin-left:107pxheight:310px}  

XML/HTML代码


  
  
  1. <div id="first"></div>     
  2. <div id="second"></div>     
  3. <div id="third"></div> 

 第二题:用javascript优化布局

提示:

也许,我们其他的布局也会用到这个放大的效果哦。

可以使用任何开源代码,包括曾经你自己写的。

关键字:javascript、封装、复用

惭愧啊,用上边那个布局我怎么也没把它优化出来,硬这头皮用绝对定位改了布局;

所以样式改成了这样:


  
  
  1. body{ margin:0; padding:0}  
  2. div{background:#CCCCCC; position:absolute}  
  3. #first{width:100px; height:150px}  
  4. #second{top:160px;width:100px;height:150px}  
  5. #third{ width:200px; height:310px; left:110px} 

javascript 要考虑封装、复用


  
  
  1. function zoom(id,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数)  
  2. var obj=document.getElementById(id); // 获取元素对象值  
  3. var dW=obj.clientWidth; // 获取元素宽度  
  4. var dH=obj.clientHeight; // 获取元素高度  
  5. //var oTop=obj.offsetTop;  
  6. //var oLeft=obj.offsetLeft;  
  7. obj.onmouseover=function(){ // 鼠标移入  
  8. this.style.width=dW*x+"px"// 横向缩放  
  9. this.style.height=dH*y+"px"// 纵向缩放  
  10. this.style.backgroundColor="#f00″; // 设置调试背景  
  11. this.style.zIndex=1; // 设置z轴优先  
  12. }  
  13. obj.onmouseout=function(){ // 鼠标移出,设回默认值  
  14. this.style.width="";  
  15. this.style.height="";  
  16. this.style.padding="";  
  17. this.style.backgroundColor="";  
  18. this.style.zIndex="";  
  19. }  
  20. }  
  21. zoom("first",1.25,1.25);  
  22. zoom("second",1.25,1.25);  
  23. zoom("third",1.25,1.25); 

第三题也许是JS代码没有放在页面的后面,加载速度慢尚未显示出来。或者是页面地址出错了。

 

本文转载自:http://developer.51cto.com/art/201206/345184_1.htm

Qianduaner

Qianduaner

粉丝 19
博文 22
码字总数 14873
作品 1
成都
私信 提问
前端相关整理

整理一下最近在网上收集的前端面试相关资料,包括预备知识、书籍、面试考点、面经等。前端方面资料其实太多太多,就光从知乎、前端乱炖、w3cplus 等网站就能找到很多,所以针对细节不发散,仅...

Seas0n_
2016/03/01
319
0
2018 前端面试准备

前端面试常见问题按知识点分类整理 前端面试常考问题整理,按模块知识点分类,持续完善中... Front-end-Developer-Questions by Modules and knowledge 前端面试经典问题:CSS 中居中的几种方...

掘金官方
2017/12/14
0
0
前端笔试、面试

让 BAT 的 Offer 不再难拿 随着各大公司春招的开始,很多小伙伴都行动起来了,我有幸能够加入百度并和大家分享自己的经验心得。由于我面试的都是比较大的公司,所以自然也是做了这方面的准备...

掘金官方
2018/01/11
0
0
进阶Java架构师必看的15本书

获取高清电子版 获取以下架构书籍PDF高清电子版,请在以下公众号[java技术栈]回复"wx"加入微信群后,并到对应的Java技术栈Q群文件下载,群包含10G技术架构书籍及更多源码等技术资料,以下为部...

架构之路
2017/12/15
0
0
阿里祭出大器,Java代码检查插件

image 背景 前阵子阿里巴巴发布了<>,可以加QQ群(公众号主菜单,点击微信群)获取。 不久,又一气呵成发布了Eclipse/Intellij Idea下的代码检测插件,可谓是国内代码优秀的检测插件。此插件...

java技术栈
2017/11/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

安装lombok 与阿里巴巴扫描规范 与取消扫描

一、安装lombok 1、先下载lombok的jar 放到eclipse的安装路径 2、打开 eclipse.ini文件 添加引入lombok的jar 我这里是这样的: -javaagent:D:\Program Files\eclipse\eclipse\lombok.jar 3、...

jason_kiss
21分钟前
2
0
基于 QML的 串口调试助手

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/weixin_38416696/article/details/80926090 Qt版本 5.10.0...

shzwork
29分钟前
3
0
Python 开发植物大战僵尸游戏

作者:楷楷 链接:https://segmentfault.com/a/1190000019418065 开发思路 完整项目地址: https://github.com/371854496/pygame 更多好玩有趣的python,尽在公众号「Python专栏」,后台回复...

上海小胖
今天
14
0
JVM优化之逃逸分析与分配消除

要了解逃逸分析背后的基本原理,我们先来看下这段有问题的C代码——当然这个是没法用Java来写的: 这段C代码在栈上创建了一个int类型的变量,然后把它的指针作为函数的返回值返回了。这样做是...

onedotdot
今天
3
0
最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部