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