使用重构的方式制作出一个如下图的水平、垂直都居中短边为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>點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦