我是网络开发的新手,我想用 CSS 和 HTML 创建它:
我不确定该怎么做,因为我只有 13 岁而且还在学习。
我尝试过但惨遭失败的是:
.grey{
height:300px;
width:700px;
background-color: #e5e5e5;
z-index: 0;
}
.pink{
height:150px;
width:100px;
background-color:#ff8a8a;
padding-top: 0px;
padding-right:0px;
z-index: 1;
}
<div class="grey">
<div class="pink"> </div>
</div>
最佳答案
使用 CSS 中内置的 CSS-grid。请参阅代码片段。
.wrapper {
display: grid;
grid-template-columns:
40%
1fr
1fr
;
grid-template-rows:
100px
100px
;
grid-template-areas:
"box-1 box-2 box-4"
"box-1 box-3 box-5"
;
}
.box-1 {
grid-area: box-1;
background-color: grey;
}
.box-2 {
grid-area: box-2;
background-color: orange;
}
.box-3 {
grid-area: box-3;
background-color: lightblue;
}
.box-4 {
grid-area: box-4;
background-color: red;
}
.box-5 {
grid-area: box-5;
background-color: lightgreen;
}
<div class="wrapper">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
<div class="box-5"></div>
</div>
关于html - 如何创建 CSS 框布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50621965/