前端面试题—1

    前端开发的学习还没有找到很好的入门点，就做些题吧。

http://www.cnblogs.com/jQing/archive/2012/07/01/2571987.html

第一部分：用CSS实现布局

让我们一起来做一个页面

首先，我们需要一个布局。

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

e65e0e34544aa20a251f14a2.jpg 

第二部分：用javascript优化布局

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

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

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

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

78662dd02d1862cba0ec9cc6.jpg 

提示：

也许，我们其他的布局也会用到这个放大的效果哦。可以使用任何开源代码，包括曾经你自己写的。

关键字：javascript、封装、复用

第三部分：处理紧急情况

好了，我们的页面完成了。

于是我们将页面发布上网。

突然，晴天霹雳，页面无法访问了，这时候，你会怎么做？

 

第一题的两种实现方式：

①：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#div1{
    width:40px;
    height:80px;
    float:left;
    background-color:#3366FF;
}
#div2{
    width:40px;
    height:55px;
    float:left;
    clear:left;
    margin-top:5px;
    background-color:#66CC33;
}
#div3{
    width:100px;
    height:140px;
    margin-left:45px;
    background-color:#CCCCFF;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

②：（这种貌似不太好）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.div1{
width:500px;
height:500px;
background-color:gray;
}
.div2{
background-color: #FFFFFF;
height: 20px;
left: 0;
position: absolute;
top: 100px;
width: 150px;
}
.div3{
background-color: #FFFFFF;
height: 500px;
left: 150px;
position: absolute;
top: 0;
width: 10px;
}
</style>
</head>

<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
View Code

第二题的实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
    body{ margin:0; padding:0}  
    div{background:#CCCCCC; position:absolute}  
    #first{width:100px; height:150px}  
    #second{top:160px;width:100px;height:150px}  
    #third{ width:200px; height:310px; left:110px} 
</style>
<script language="javascript">
    function zoom(id,x,y)
    { // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）  
        var obj=document.getElementById(id); // 获取元素对象值
        //alert(obj);  
        var dW=obj.clientWidth ; // 获取元素宽度  
        var dH=obj.clientHeight; // 获取元素高度  
  　　  obj.onmouseover=function()
        {     // 鼠标移入  
            this.style.width=dW*x+"px"; // 横向缩放  
               this.style.height=dH*y+"px"; // 纵向缩放  
            this.style.backgroundColor="#f00";//设置调试背景 
            this.style.zIndex=1; // 设置z轴优先  
        }  
        obj.onmouseout=function()
        { // 鼠标移出，设回默认值  
            this.style.width="";  
            this.style.height="";  
            this.style.padding="";  
            this.style.backgroundColor="";  
            this.style.zIndex="";  
        }  
    }
</script>
</head>
<body onload="zoom('first',1.2,1.2),zoom('second',1.2,1.2),zoom('third',1.2,1.2)">
    <div id="first"></div>     
    <div id="second"></div>     
    <div id="third"></div> 
</body>
</html>

第三题：

①是不是应该先看返回的状态码？根据状态码具体判断是什么问题。

②JS代码没有放在页面的后面，加载速度慢尚未显示出来。或者是页面地址出错了。

这种情况下，先查看页面的源代码，看看有没有什么问题，尽量先排除前端方面的问题。

然后找后台技术人员，看是不是服务器或技术方面的问题。

posted @ 2014-08-02 21:27  wj704  阅读(235)  评论(0)  编辑  收藏  举报