前端笔试面试题之一

最近翻看笔记本，发现内容过于繁冗，所以将一些内容陆陆续续的整理并分享出来，部分引用的资料为网络资源，如有侵权请联系我删除。

首先是前端面试题系列。（转眼距离自己去年找工作已经过去一年了，现在回头看这些题目心里感慨万千呐。）

1. 用css实现如下布局

2. 鼠标划过元素的时候,元素被放大,其他元素保持不动

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. 查看页面的源代码，看看有没有什么问题

posted on 2016-08-30 17:08 Sharon_zd 阅读(222) 评论(0) 编辑收藏举报

前端面试题1