定位练习
2019-12-06 本文已影响0人
Dxes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--=========================1.定位练习=========================-->
<style type="text/css">
#div1{
position: absolute;
top: 100px;
left: 100px;
}
#div2{
position: absolute;
bottom: 20px;
left: 20px;
}
#div3{
position: absolute;
bottom: 20px;
right: 20px;
}
#div4{
position: absolute;
bottom: 20px;
right: 20px;
}
</style>
<div id="div1" style="background-color: blue; width: 400px; height: 400px;">
<div id="div2" style="background-color: deeppink; width: 100px; height: 100px;"></div>
<div id="div3" style="background-color: deeppink; width: 100px; height: 100px;"></div>
</div>
<div id="div4" style="background-color: deeppink; width: 100px; height: 100px;"></div>
</body>
</html>
