abstract：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>相对定位和绝对定位的一线城市案例</title> <link rel="stylesheet&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位和绝对定位的一线城市案例</title>
<link rel="stylesheet" type="text/css" href="demo2.css">
<style>
/*背景*/
.div0{
width:600px;
height:600px;
position:relative;
}
.clear{ clear:both; }
/*统一给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 ;
/*绝对定位*/
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>
Correcting teacher：灭绝师太Correction time：2019-03-22 11:35:52
Teacher's summary：绝对定位在布局中算是比较难掌握的概念,记住:子绝父相哦!