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 |
<!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> |
3个DIV的实现方法:
1
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> |
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 |
<!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> |
题二:
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 |
<!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://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,可知子嵌套只需六层即可满足。