前端面试题—1

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

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

第一部分：用CSS实现布局

让我们一起来做一个页面

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

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

第二部分：用javascript优化布局

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

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

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

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

提示：

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

关键字：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