自己做的前端试题总结

1、实现页面布局，包括页头，内容区域，页脚三部分，其中内容区域为左右分栏，左栏定宽200px,右栏自适应宽度。

 1 <!DOCTYPE HTML>
 2 <html lang="ch-ZN">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>前端题目1</title>
 6 <style>
 7 html,body,#header,#footer{width:100%;margin:0;padding:0}
 8 #header,#footer{background:#333;height:200px;}
 9 #main{padding-left: 200px;}
10 #left{position: absolute;left:0;width:200px;height:100px;background: #eee;}
11 #right{width:100%;height:100px;background: #eff;}
12 
13 
14 </style>
15 </head>
16 <body>
17 <div id="header"></div>
18 <div id="main">
19 <div id="left"> </div>
20 <div id="right"></div>
21 </div>
22 <div id="footer"></div>
23 </body>
24 </html>

这里使用绝对定位，main容易padding-left:200;之后#left绝对定位相对于body 左移0px；200px;之后right:100%width；

相要让两个快元素并排，无非使用position 相对或者绝对定位，或者float浮动。

或者

 1 <!DOCTYPE HTML>
 2 <html lang="ch-ZN">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>前端题目1</title>
 6 <style>
 7 html,body,#header,#footer{width:100%;margin:0;padding:0}
 8 #header,#footer{background:#333;height:200px;}
 9 #left{float:left;width:200px;height:100px;background: #eee;}
10 #right{width:100%;height:100px;background: #eff;}
11 </style>
12 </head>
13 <body>
14 <div id="header"></div>
15 <div id="left"></div>
16 <div id="right"></div>
17 <div id="footer"></div>
18 </body>
19 </html>

2、

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

使用绝对定位好控制

 1 <!DOCTYPE HTML>
 2 <html lang="ch-ZN">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>前端题目2</title>
 6 <style>
 7   html,body{width:100%;padding:0;margin: 0;}
 8   div{position: absolute;background: #ddd;}
 9   #leftUp{width:100px;height:110px;}
10   #leftDown{width:100px;top:120px;height: 110px;}
11   #right{left:110px;width:100px;height:230px;}
12 
13 </style>
14 </head>
15 <body>
16   <div id="leftUp"></div>
17   <div id="leftDown"></div>
18   <div id="right"></div>
19 
20 </body>
21 </html>

第二部分：用javascript优化布局

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

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

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

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

 1 <!DOCTYPE HTML>
 2 <html lang="ch-ZN">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>前端题目2</title>
 6 <style>
 7   html,body{width:100%;padding:0;margin: 0;}
 8   div{position: absolute;background: #ddd;}
 9   #leftUp{width:100px;height:110px;}
10   #leftDown{width:100px;top:120px;height: 110px;}
11   #right{left:110px;width:100px;height:230px;}
12 
13 </style>
14 </head>
15 <body>
16   <div id="leftUp"></div>
17   <div id="leftDown"></div>
18   <div id="right"></div>
19   <script>
20    function zoom(id,x,y){
21     var div=document.getElementById(id);
22     var zHeight=div.clientHeight;
23     var zWidth=div.clientWidth;
24     div.onmouseover=function(){
25       this.style.width=zWidth*x+"px";
26       this.style.height=zHeight*y+"PX";
27       this.style.backgroundColor="#444";
28       this.style.zIndex=1;
29     }
30     div.onmouseout=function(){
31       this.style.width="";
32       this.style.height="";
33       this.style.backgroundColor="";
34       this.style.zIndex="";
35     }
36 
37    }
38 
39    zoom("leftUp",1.25,1.25);
40    zoom("leftDown",1.25,1.25);
41    zoom("right",1.25,1.25);
42   </script>
43 
44 </body>
45 </html>

常用到的事件：

对于窗口来说 onload;

对于表单 onchange onsubmit onselect onfocus onblur
对于鼠标来说 onclick ondbclick onmouseover onmouseout onmouseup onmousedown