腾讯校园招聘页面重构面试题
来源:互联网 发布:终端远程访问数据库 编辑:程序博客网 时间:2024/04/30 19:12
1、将如下图像重构,要求在页面上水平垂直居中!分别用2个DIV,3个DIV,5个DIV实现
2、让该图形水平垂直居中于页面,要求满足最多用户!
原作者分享的参考代码:
题一:
2个DIV的实现方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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=utf-8" />
<style type="text/css">
.heng{width:150px; height:50px; background:#F00; top:50%; left:50%; position:absolute; margin-top:-25px; margin-left:-75px}
.shu{width:50px; height:150px; background:#F00; top:50%; left:50%; position:absolute; margin-top:-75px; margin-left:-25px}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="heng"></div>
<div class="shu"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.heng{width:150px; height:50px; background:#F00; top:50%; left:50%; position:absolute; margin-top:-25px; margin-left:-75px}
.shu{width:50px; height:150px; background:#F00; top:50%; left:50%; position:absolute; margin-top:-75px; margin-left:-25px}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="heng"></div>
<div class="shu"></div>
</body>
</html>
3个DIV的实现方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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=utf-8" />
<style type="text/css">
.main{width:150px; height:150px; top:50%; left:50%; position:absolute; margin:-75px 0 0 -75px}
.heng{width:150px; height:50px; background:#F00; margin-top:50px;}
.shu{width:50px; height:150px; background:#F00; margin-left:50px; margin-top:-100px/*margin上边界叠加*/}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="main">
<div class="heng"></div>
<div class="shu"></div></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.main{width:150px; height:150px; top:50%; left:50%; position:absolute; margin:-75px 0 0 -75px}
.heng{width:150px; height:50px; background:#F00; margin-top:50px;}
.shu{width:50px; height:150px; background:#F00; margin-left:50px; margin-top:-100px/*margin上边界叠加*/}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="main">
<div class="heng"></div>
<div class="shu"></div></div>
</body>
</html>
5个DIV的实现方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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=utf-8" />
<style type="text/css">
.main2{width:150px; height:150px; top:50%; left:50%; position:absolute; margin:-75px 0 0 -75px; background:#FF0000}
.small{width:50px; height:50px; float:left }
.topLeft{background:#FFFF00;}
.topRight{background:#00FF00; margin-left:50px}
.buttomLeft{background:#FF00FF; margin-top:50px}
.buttomRight{background:#00FFFF; margin-left:50px; margin-top:50px}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="main2">
<div class="small topLeft"></div>
<div class="small topRight"></div>
<div class="small buttomLeft"></div>
<div class="small buttomRight"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.main2{width:150px; height:150px; top:50%; left:50%; position:absolute; margin:-75px 0 0 -75px; background:#FF0000}
.small{width:50px; height:50px; float:left }
.topLeft{background:#FFFF00;}
.topRight{background:#00FF00; margin-left:50px}
.buttomLeft{background:#FF00FF; margin-top:50px}
.buttomRight{background:#00FFFF; margin-left:50px; margin-top:50px}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="main2">
<div class="small topLeft"></div>
<div class="small topRight"></div>
<div class="small buttomLeft"></div>
<div class="small buttomRight"></div>
</div>
</body>
</html>
题二:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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=utf-8" />
<style type="text/css">
.center{width:200px; height:200px; top:50%; left:50%; position:absolute; margin:-100px 0 0 -100px; background:#FF0000}
.topLeft{ width:50%; height:50%; position:absolute; left:-50%; top:-50%; background:#FF0000}
.topRight{ width:50%; height:50%; position:absolute; right:-50%; top:-50%; background:#FF0000}
.buttomLeft{ width:50%; height:50%; position:absolute; left:-50%; bottom:-50%; background:#FF0000}
.buttomRight{ width:50%; height:50%; position:absolute; right:-50%; bottom:-50%; background:#FF0000}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="center">
<div class="topLeft">
<div class="topLeft">
<div class="topLeft"><div class="topLeft"><div class="topLeft"></div></div></div>
</div>
</div>
<div class="topRight">
<div class="topRight"><div class="topRight"><div class="topRight"><div class="topRight"></div></div></div></div>
</div>
<div class="buttomLeft">
<div class="buttomLeft"><div class="buttomLeft"><div class="buttomLeft"><div class="buttomLeft"></div></div></div></div>
</div>
<div class="buttomRight">
<div class="buttomRight"><div class="buttomRight"><div class="buttomRight"><div class="buttomRight"></div></div></div></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.center{width:200px; height:200px; top:50%; left:50%; position:absolute; margin:-100px 0 0 -100px; background:#FF0000}
.topLeft{ width:50%; height:50%; position:absolute; left:-50%; top:-50%; background:#FF0000}
.topRight{ width:50%; height:50%; position:absolute; right:-50%; top:-50%; background:#FF0000}
.buttomLeft{ width:50%; height:50%; position:absolute; left:-50%; bottom:-50%; background:#FF0000}
.buttomRight{ width:50%; height:50%; position:absolute; right:-50%; bottom:-50%; background:#FF0000}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="center">
<div class="topLeft">
<div class="topLeft">
<div class="topLeft"><div class="topLeft"><div class="topLeft"></div></div></div>
</div>
</div>
<div class="topRight">
<div class="topRight"><div class="topRight"><div class="topRight"><div class="topRight"></div></div></div></div>
</div>
<div class="buttomLeft">
<div class="buttomLeft"><div class="buttomLeft"><div class="buttomLeft"><div class="buttomLeft"></div></div></div></div>
</div>
<div class="buttomRight">
<div class="buttomRight"><div class="buttomRight"><div class="buttomRight"><div class="buttomRight"></div></div></div></div>
</div>
</div>
</body>
</html>
有兴趣的朋友可以看看另外一道试题:http://topic.csdn.net/u/20110407/16/5d5f5309-ec2f-4ba7-a6bf-0900d3f1c44a.html
网友讨论:
第一题只要居中后,十字还有很多方式模拟的,不仅仅是背景,还可以是边框border。
第二题题目是让该图形水平垂直居中于页面,至少要求满足最多用户
可得出两点:
1,水平垂直居中,也就是最终占用的地盘是一个正方形。
2,至少要求满足最多用户,做为页面。主要的用户是使用浏览器浏览的,大多数用户都是IE6/WIN,最主流的显示器是17寸纯平,即分辨率是1028*768.而IE6在不安装插件的情况下可视高度约为590px。所以我们要做的正方形在590px*590px里面要是可视的(浏览器宽大于高,只需考虑高)
计算:200+100*2+50*2+…~~~593px,可知子嵌套只需六层即可满足。
- 腾讯校园招聘页面重构面试题
- 腾讯2014校园招聘笔试试题
- 腾讯2014校园招聘笔试试题
- 腾讯2014校园招聘笔试试题
- 腾讯2014年校园招聘笔试试题
- 腾讯2014校园招聘笔试试题
- 腾讯2014校园招聘笔试试题
- 2016年腾讯校园招聘试题解析
- 腾讯2015校园招聘
- 腾讯技术类校园招聘笔试试题(A8卷)
- 腾讯技术类校园招聘笔试试题(A8卷)
- 腾讯校园招聘前端实习生面试题及答案(1)
- 腾讯校园招聘前端实习生面试题及答案
- [历年IT笔试题]2014腾讯校园招聘笔试试题
- 腾讯2014校园招聘软件开发类笔试试题
- 虔诚的学习者 腾讯2014年校园招聘笔试试题
- 虔诚的学习者 腾讯技术类校园招聘笔试试题
- 腾讯2014软件开发职位校园招聘笔试试题
- RAW+ASM 的RAC 安装文档
- 在订单列表中 催款信才js
- 分享到微博、百度搜藏、豆瓣、、、
- DIalog与popWindow布局
- OCFS2+ASM 的RAC安装文档
- 腾讯校园招聘页面重构面试题
- 从零开始开发iPhone,教你如何在真机调试iPhone应用程序(转)
- tomcat和apache区别联系
- Delphi深度探索
- RAC安装时需要执行4个脚本及意义
- RAC root.sh Oracle CRS stack is already configured and will be running under init(1M) 的解决方法
- CPU对外设的寻址为什么会分这两种,编址的实现到底是怎么样的一个概念?
- 创建您的第一个移动Flex应用程序——Twitter Trends
- Delphi下深入Windows核心编程