这是个正的十字架,宽是50px;长是150px
我的方法主要是用相对定位和负值相结合,让它水平垂直居中!
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<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>
</html>
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<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>
</body>
</html>
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<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>
(注:该图形是一个无限缩小的,就是四个角的正方形依次缩小,比如中间的是200px;第二个是100px;第三个是50px;依次下去。。。。而我只实现到第三层,因为我觉得剩下的方块实现原理都一样。不知道我理解错没有,还是说我方法错了!!!!)
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<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>