html – 如何创建CSS框布局？

概述我对Web开发很陌生,我想用CSS和 HTML创建它： 我不确定如何做到这一点,因为我只有13岁,仍在学习. 我曾经尝试过但却失败了： .grey{ height:300px; width:700px; background-color: #e5e5e5; z-index: 0;}.pink{ height:150px; width:100px; backg 我对Web开发很陌生,我想用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 >   <div > </div>  </div>

解决方法 使用CSS内置的CSS网格.请参阅代码段.

.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 >  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div></div>

总结

以上是内存溢出为你收集整理的html – 如何创建CSS框布局？全部内容，希望文章能够帮你解决html – 如何创建CSS框布局？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。