红色十字架

使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。

 

 

要求：

1.使用2个div完成

2.使用3个div完成

3.使用5个div完成

 

1、主要是关于浮动元素的居中问题

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <style>
            body{
                padding:0;
                margin:0;

            }
            #vertical{
                position:absolute;
                padding:0;
                margin-left:-25px;
                margin-top:-75px;
                background-color:red;
                width:50px;
                height:150px;
                float: left;
                left:50%;
                top:50%;

            }
            
            #across{
                position:absolute;
                padding:0;
                margin-left:-75px;
                margin-top:-25px;
                background-color:red;
                left:50%;
                top:50%;
                width:150px;
                height:50px;
                float: left;
            }
            
        </style>
    </head>
    <body>
        <div id="vertical"></div>
        <div id="across"></div>
    </body>
</html>

 

 









		

		
posted @ 
2012-03-14 19:14 
纳爱斯 
阅读(835) 
评论(0) 
编辑 
收藏 
举报