这是个正的十字架，宽是50px；长是150px
我的方法主要是用相对定位和负值相结合，让它水平垂直居中！
2个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"> .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><br><br />
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
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
