HTML code:
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
CSS:
.box1, .box2, .box3 {
width: 200px;
height:40px;
}
.box1, .box3{
margin: 20px;
}
.box2 {
margin:40px 20px;
}
要求,基于这三个Div,添加CSS,做出一列有5个Div的效果,并且背景色依次为蓝色,黄色,红色,黄色,蓝色。
提示:利用css maring塌陷效果
我是用:before, :after添加Div做的。但是,感觉好像不是正确答案,虽然效果一样。
demo:http://jsfiddle.net/etianqq/ocdv1xrh/点击预览
只不过我写的margin-bottom,这就是题目说的margin塌陷
.box1, .box2, .box3 {
width: 200px;
}
.box1 {
background: green;
height: 200px;
margin-bottom: -160px;
}
.box2 {
background: yellow;
height: 120px;
margin-bottom: -80px;
}
.box3 {
background: red;
height: 40px;
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。