zoukankan      html  css  js  c++  java
  • 自己做的前端试题总结

    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

  • 相关阅读:
    对于在git上面拉代码报"error: RPC failed; curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054"解决方法
    在vue项目中如何添加eslint
    vscode编辑如何保存时自动校准eslint规范
    css3动画
    JS中的深拷贝与浅拷贝
    JS中的防抖与节流
    金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
    正则表达式元字符大整理
    常规正则表达式练习,一起来开心的掉发吧
    关于子元素的margin-top对父级容器无效
  • 原文地址:https://www.cnblogs.com/huhaibo/p/3629345.html
Copyright © 2011-2022 走看看