サマリー：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>相對(duì)定位和絕對(duì)定位的一線城市案例</title> <link rel="stylesheet&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相對(duì)定位和絕對(duì)定位的一線城市案例</title>
<link rel="stylesheet" type="text/css" href="demo2.css">
<style>
/*背景*/
.div0{
width:600px;
height:600px;
position:relative;
}
.clear{ clear:both; }
/*統(tǒng)一給div加樣式*/
.div1 ,.div2,.div3,.div4{
width:300px;
height:300px;
text-align:center ;
line-height:300px ;
font-size:50px ;
background: #e2dbbe;
}
/*背景和定位*/
.div2{
background: #ffee93;
position:absolute;
left:300px;
top:0px;
}
.div3{
background: #a3a380;
}
.div4{
background: #ffc09f;
position:absolute;
left:300px;
top:300px;
}
.div5{
/*背景顏色*/
background: #4cb4e7;
/*寬高*/
width:300px;
height:100px;
/*字體大小居中*/
font-size:40px ;
text-align:center ;
line-height:100px ;
/*絕對(duì)定位*/
position:absolute;
left:150px;
top:250px;
}
</style>
</head>
<body>
<div class='div0'>
<div class='div1'>北京</div>
<div class='div2'>上海</div>
<div class='div3'>廣州</div>
<div class='div4'>深圳</div>
<div class='div5'>四大一線城市</div>
</div>
</body>
</html>
添削の先生：滅絕師太添削時(shí)間：2019-03-22 11:35:52
先生のまとめ：絕對(duì)定位在布局中算是比較難掌握的概念,記住:子絕父相哦!