:09年腾讯校园招聘页面重构的2道面试题

1、将如下图像重构,要求在页面上水平垂直居中!分别用2个DIV,3个DIV,5个DIV实现!
这是个正的十字架,宽是50px;长是150px


我的方法主要是用相对定位和负值相结合,让它水平垂直居中!
2个DIV

3个DIV的实现方法:<!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>

5个DIV

<!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>

 2、让该图形水平垂直居中于页面,要求满足最多用户!
(注:该图形是一个无限缩小的,就是四个角的正方形依次缩小,比如中间的是200px;第二个是100px;第三个是50px;依次下去。。。。而我只实现到第三层,因为我觉得剩下的方块实现原理都一样。不知道我理解错没有,还是说我方法错了!!!!)



我的实现方法是:

 

 

 

 

<!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>


http://bbs.blueidea.com/thread-2894013-1-1.html

 


你可能感兴趣的:(页面重构)