2-7编程练习
来源：2-7 编程练习
慕盖茨9513023
2020-09-07 16:04:53
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.blue{
width: 100px;
height: 100px;
background: blue;
/*在此处添加相应代码*/
position:relative;
top:50px;
left:50px;
}
.red{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="blue"></div>
<div class="red"></div>
</body>
</html>
请老师帮忙检查，并且帮忙理清一下思路。。
1回答
-
好帮手慕慕子
2020-09-07
同学你好，代码实现是正确的。思路可以参考如下解析：
1、默认两个盒子显示结果如下：
2、练习要求蓝色区块分别距离顶部和左边50px，由于蓝色盒子默认是挨着页面左上角显示的，那么可以蓝色盒子设置相对定位，让其向左侧和下方移动50px，实现效果。即，同学代码书写是正确的
效果图如下：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题