前端面试题1
最近翻看笔记本,发现内容过于繁冗,所以将一些内容陆陆续续的整理并分享出来,部分引用的资料为网络资源,如有侵权请联系我删除。
首先是前端面试题系列。(转眼距离自己去年找工作已经过去一年了,现在回头看这些题目心里感慨万千呐。)
1. 用css实现如下布局
C
A
B
2. 鼠标划过元素的时候,元素被放大,其他元素保持不动
A
B
C
3.如果页面出现问题,你会怎么办?
答案仅供参考
1.遵循内容优先原则,主要部分放在前面,优先加载。
<div id="third">C</div> <div id="first">A</div> <div id="second">B</div>
方法1:使用float
1 #container{ 2 font-size:0;/*避免float造成的错位。类似于处理inline-block造成的像素差*/ 3 width: 310px; 4 } 5 /* 注意封装:提取共同的css样式 */ 6 #first,.second,.third { 7 font-size: 20px; 8 background: #CCCCCC; 9 } 10 #first { 11 width: 100px; 12 height: 100px 13 } 14 #second { 15 margin-top: 10px; 16 width: 100px; 17 height: 100px 18 } 19 #third { 20 float: right; 21 width: 200px; 22 height: 210px 23 }
方法2:绝对定位
1 #container{ 2 font-size: 0; 3 position: relative; 4 height: 210px; 5 } 6 #first,#second,#third { 7 font-size: 20px; 8 background: #CCCCCC; 9 } 10 #first{ 11 width: 100px; 12 height: 100px; 13 position: absolute; 14 } 15 #second{ 16 width: 100px; 17 height: 100px; 18 top:110px; 19 position: absolute; 20 } 21 #third{ 22 left:110px; 23 width: 200px; 24 height: 210px; 25 position: absolute; 26 }
2. 使用JavaScript进行交互
1 function zoom(id,x,y){ 2 var obj=document.getElementById(id); // 获取元素对象 3 var dW=obj.clientWidth; // 获取元素宽度 4 var dH=obj.clientHeight; // 获取元素高度 5 obj.onmouseover=function(){ // 鼠标移入事件 6 this.style.width=dW*x+"px"; // 横向缩放 7 this.style.height=dH*y+"px"; // 纵向缩放 8 this.style.backgroundColor="#87CEEB"; // 设置移入颜色 9 this.style.zIndex=1; // 设置优先级 10 }; 11 obj.onmouseout=function(){ // 鼠标移出事件 12 this.style.width=""; //空引号,即表示设置回默认值 13 this.style.height=""; 14 this.style.padding=""; 15 this.style.backgroundColor=""; 16 this.style.zIndex=""; 17 } 18 } 19 zoom("first",1.25,1.25); 20 zoom("second",1.25,1.25); 21 zoom("third",1.25,1.25);
如果想要得到高分的话可以考虑封装、复用得更细致(自行发挥);注意命名的语义性; 注意写注释
3. 页面无法访问的原因:
1. 检查浏览器是否可以正常上网。 2. 检查网页无法访问时的错误编号。根据代码的不同选择不同的解决方案。 1. 404表示页面不存在 a. 可以查看页面是否正确的发布到服务器上面了 b. 检查是否页面地址输入错了。 2. 5xx表示服务器错误 a. 找后台技术人员,检查服务器是否可访问,是否出现故障。 3. 如果只是未加载出来,可能是JS代码没有放在页面的后面,加载速度慢尚未显示出来。 4. 查看页面的源代码,看看有没有什么问题