html制作十字架,使用重构的方式制作出一个红色十字架

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

使用2个div完成

#heng,#shu{

left:50%;

top:50%;

position:absolute;

background-color:#f00;

}

#shu{

width:50px;

height:150px;

margin-left:-25px;

margin-top:-75px;

}

#heng{

width:150px;

height:50px;

margin-left:-75px;

margin-top:-25px;

background-color:#f00;

}

使用3个DIV完成

.main{

width:150px;

height:150px;

top:50%;

left:50%;

position:absolute;

margin:-75px 0 0 -75px;

border:2px #F00 solid;

}

.heng{

width:150px;

height:50px;

background:#F00;

margin-top:50px;

}

.shu{

width:50px;

height:150px;

background:#F00;

margin-left:50px;

margin-top:-100px;

/*margin上边界叠加*/

}

使用5个DIV完成

#top,

#middle,

#left,

#right,

#bottom{

height:50px;

width:50px;

position:absolute;

top:50%;

left:50%;

}

#top{

margin:-75px 0 0 -25px;

background:#F00;

}

#middle{

margin:-25px 0 0 -25px;

background:#000;

}

#left{

margin:-25px 0 0 -75px;

background:#00F;

}

#right{

margin:-25px 0 0 25px;

background:#0F0;

}

#bottom{

margin:25px 0 0 -25px;

background:#FF0;

}