Java/Ui培训
苏州达内IT培训

400-111-8989

阿里巴巴web前端开发面试题


第一部分:用CSS实现布局

让我们一起来做一个页面

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

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

用CSS实现布局

第二部分:用javascript优化布局

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

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

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

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

用javascript优化布局

提示:

也许,我们其他的布局也会用到这个放大的效果哦。

可以使用任何开源代码,包括曾经你自己写的。

关键字:

javascript、封装、复用

第三部分:处理紧急情况

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

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

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

第一题个人实现:

<html>

<style type="text/css">

body, div{margin: 0;padding: 0;}

.fl{float: left; display: inline;}

.bc_C{background-color: #CCC;}

.h120{height: 120px;}

.h250{height: 250px;}

.w120{width: 120px;}

.w220{width: 220px;}

.t130{top: 130px;}

.pa{position: absolute;}

.mr10{margin-right: 10px;}

.mb10{margin-bottom: 10px;}

</style>

<body>

<div class="fl bc_C h120 w120 mb10 mr10"></div>

<div class="fl bc_C h250 w220"></div>

<div class="bc_C h120 w120 t130 pa"></div>

</body>

</html>

第二题个人实现:(为了第二题 把第一题的布局稍微变动了下,都变成了绝对定位)

<html>

<style type="text/css">

body, div{margin: 0;padding: 0;}

.fl{float: left; display: inline;}

.bc_C{background-color: #CCC;}

.h120{height: 120px;}

.h250{height: 250px;}

.w120{width: 120px;}

.w220{width: 220px;}

.t130{top: 130px;}

.l130{left: 130px;}

.pa{position: absolute;}

.mr10{margin-right: 10px;}

.mb10{margin-bottom: 10px;}

.clear{clear: both}

</style>

<body>

<div class="bc_C h120 w120 mb10 mr10 pa" id="first"></div>

<div class="bc_C h250 w220 l130 pa" id="second"></div>

<div class="bc_C h120 w120 t130 pa" id="third"></div>

</body>

<script type="text/javascript">

function zoom(id, x, y){

var obj = document.getElementById(id); //设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数

var bw = obj.clientWidth; //获取元素宽度

var bh = obj.clientHeight; //获取元素高度

obj.onmouseover = function(){

this.style.width = bw*x+"px";

this.style.height = bh*y+"px";

this.style.backgroundColor = "#f7b";

this.style.zIndex = 1000;

}

obj.onmouseout = function(){

this.style.width = bw+"px";

this.style.height = bh+"px";

this.style.backgroundColor = "";

this.style.zIndex = "auto";

}

}

zoom("first", 1.25, 1.25);

</script>

</html>

预约申请免费试听课

怕钱不够?就业挣钱后再付学费!    怕学不会?从入学起,达内定制课程!     担心就业?达内多家实践企业供你挑选 !

【免责声明】本文部分系转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与联系我们,我们会予以更改或删除相关文章,以保证您的权益!
上一篇:java+web笔试题
下一篇:10道经典java编程笔试题

苏州达内求职面试技巧

大公国际软件测试工程师面试题

酷讯PHP工程师笔试题

企业面试JavaScript笔试题

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

  • 搜索抖音号

    搜索抖音号:1821685962

    免费领取达内课程视频学习资料

Copyright © 2021 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
江西省

贵州省

广西省

海南省