如何用三个Div实现彩虹效果? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

如何用三个Div实现彩虹效果?

2016-06-06 18:42:32 1827 1

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/点击预览

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:29:16

    只不过我写的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;
    }
    0 0
相关问答

1

回答

如何实现基于内容的多媒体检索啊?

2022-08-07 13:19:46 37浏览量 回答数 1

1

回答

Django中返回对象的拷贝,内部实现的命令是什么呢?

2021-11-17 16:26:36 126浏览量 回答数 1

1

回答

#React 如何将Bootstrap添加到React应用程序?

2020-05-08 11:48:25 243浏览量 回答数 1

1

回答

SpringBoot 实现热部署有哪几种方式?

2019-11-18 15:49:03 1078浏览量 回答数 1

0

回答

Swarm 集群如何重新部署应用

2017-10-30 09:46:23 1575浏览量 回答数 0

1

回答

如何用ecs创建炫酷的个人网站?

2017-07-20 11:32:29 2155浏览量 回答数 1

1

回答

如何用ecs创建炫酷的个人网站?

2017-07-20 11:36:36 2600浏览量 回答数 1

1

回答

如何用JS判断页面滚动到特定的div,从而实现背景的更换

2016-03-13 10:03:24 3936浏览量 回答数 1

2

回答

系统错误(错误码:7H064040466D09J)

2016-03-07 11:19:29 3578浏览量 回答数 2

12

回答

万网新网站,如何让百度尽快被搜索出来?

2014-05-17 12:17:17 6649浏览量 回答数 12
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载