2015校招某度WEB前端笔试题
2014-10-12 21:17
363 查看
今天参加了某度的WEB前端笔试,一共八道题,各种不会,很是伤心,感觉某度的题明显很难。试卷上没有写不能泄题,就在这里贴出给大家看看吧。
笔试的时候想了半天,写出来也是错的。回来想了半天,感觉一个div好像做不出来啊!于是又加了几个,上代码:
效果图:
请无视水印。
这道题考察的要点就是border其实是个梯形的知识了。我们可以看一下,将border-width设置为50px时,是什么样的border:
效果图:
看到了吧,是三角和梯形。你若将width和height设置为相等时,就是四个三角形了。
另外,还有相对定位和绝对定位的原理,以及你需要用一个小的白色三角形覆盖掉浅蓝色的三角形,以便视觉效果为整个背景都是白色。这就是demo3存在的意义。限定其width为10-2=8px,微调一下位置就可以了。这题好难啊!目前还没有想出一个div怎么实现的方法!
总之,某度的笔试题还是很有难度的,理论与实践相结合,很考验一个人。
一、DOCTYPE作用是什么?严格模式和混杂模式是什么?为什么要分这两种模式?
这道题可以参考这篇文章,讲的很细:点击打开链接二、CSS写一个能实现如下图形的样式,就给了一个div:<div id="demo"></div>.
图形是一个正方形带一个尖角,内部是#fff颜色,边框2px的#0cc颜色,尖角位于右边据上部20px,是一个等腰直角三角形,高10px,底20px。笔试的时候想了半天,写出来也是错的。回来想了半天,感觉一个div好像做不出来啊!于是又加了几个,上代码:
<!DOCTYPE html> <html> <head> <style> #demo { width:100px; height:100px; border:2px solid #0cc; position:relative; background:#fff; } #demo1 { top:20px; left:110px; width:0; height:0; line-height:0; border-width:10px; border-style:solid; border-color:transparent transparent transparent #0cc; position:absolute; } #demo2 { top:22px; left:110px; width:0; height:0; line-height:0; border-width:8px; border-style:solid; border-color:transparent transparent transparent #fff; position:absolute; } </style> </head> <body> <div id="demo"></div> <div id="demo1"></div> <div id="demo2"></div> </body> </html>
效果图:
请无视水印。
这道题考察的要点就是border其实是个梯形的知识了。我们可以看一下,将border-width设置为50px时,是什么样的border:
<!DOCTYPE html> <html> <head> <style> #demo { border-width:30px; border-style:solid; border-color:#ff0000 #00ff00 #0000ff #000000; } </style> </head> <body> <div id="demo"></div> </body> </html>
效果图:
看到了吧,是三角和梯形。你若将width和height设置为相等时,就是四个三角形了。
另外,还有相对定位和绝对定位的原理,以及你需要用一个小的白色三角形覆盖掉浅蓝色的三角形,以便视觉效果为整个背景都是白色。这就是demo3存在的意义。限定其width为10-2=8px,微调一下位置就可以了。这题好难啊!目前还没有想出一个div怎么实现的方法!
三、document.write和innerHTML的区别是什么?
这个是最简单的了。以前看过,document.write会刷新整个页面的内容,而innerHTML只是找到标签在后面插入一些内容。这篇文章还讲了一些区别:点击打开链接四、JS实现异步编程的方法有哪些?
首先一下子就想到了callback回调函数,还有就是setTimeOut。另外还有其他的如:XMLHttpRequest对象与script标签的onreadystatechange回调,image的onload与onerror回调,iframe的onload,DOM元素的事件回调,HTML5的跨域消息传送postMessage,QuickTime与flash对象的加载……具体看这篇文章:点击打开链接五、手机上的网站页面和PC端的显示上有不同,请叙述实现上述技术的原理。
根本不会啊!就蒙了个CSS的hack技术。这东西上网也不好查,就先留着吧!哪位知道请评论给我,多谢!六、要用网页实现Flappy Bird,需要注意哪些地方?
不会。七、实现点击表头排序功能,点一次降序,再点一次升序。
网上有很多代码,可以参看。八、【附加题】你在项目中用到了哪些新技术,遇到的挑战和收获是什么?
不表。总之,某度的笔试题还是很有难度的,理论与实践相结合,很考验一个人。
相关文章推荐
- 2012 腾讯校招Web前端笔试的一道题,很值得怀念。。。
- CVTE2015校招Web后台西安站笔试题(回忆版)
- 2018年美团校招前端WEB笔试编程题-最小的排列
- 百度web前端--2015笔试
- 腾讯2018校招WEB前端开发笔试有感
- 2015腾讯web前端笔试题
- 百度web前端--2015笔试
- web前端校招笔试题集锦
- 2015 阿里校招 Web前端开发 在线笔试总结
- 将文档中className有“red”的标签背景色设为红色(百度2014校招前端笔试题)
- 百度web前端的一道笔试题(CarFactory)
- 2012 百度web前端笔试题
- 笔试题,百度流程信息管理部Web前端实习研发工程师
- 2011年腾讯实习生应聘(软件开发>Web前端>flash方向)笔试面试经历
- 关于Web前端开发,附:(百度web前端笔试面试题目)
- web前端开发工程师笔试题及答案(二)
- 腾讯web前端开发笔试题及答案
- 接到一个web前端的笔试题
- 百度Web前端笔试和面试
- 记2012年百度web前端研发实习生的笔试面试经历