使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用2个div完成</title>
<style type="text/css">
#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;
}
</style>
</head>
<body>
<div id="heng"></div>
<div id="shu"></div>
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用3个DIV完成</title>
<style type="text/css">
.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上边界叠加*/
}
</style>
</head>
<body>
<div class="main">
<div class="heng"></div>
<div class="shu"></div>
</div>
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用5个DIV完成</title>
<style type="text/css">
#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;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="middle"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦