html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>颜色方块</title>
<link rel="stylesheet" href="特效2.css">
</head>
<body>
<div class="wrapper">
欢迎使用VS CODE ！
<!-- 计数方块one~Six，div相当于一个分区 -->
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>
CSS：
.wrapper {/*会对wrapper里面所有的单位起作用*/
/* （.wrapper)表示包装类，q其中.的意思是class=wrapper */
display: grid;/*定义表格*/
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;/*定义方块之间的缺口大小*/
grid-auto-rows: minmax(100px, auto);/**定义方块的大小*/
}
.one {/*定义表格的长，高，背景颜色*/
grid-column: 1 / 3;/*分数表示所占用的一个屏幕的百分比1/3表示所占屏宽*//*排*/
grid-row: 1;/*列*/
background-color: blue;
}
.two { /*定义表格的长，高，背景颜色*/
grid-column: 2 / 4;
grid-row: 1 / 3;
background-color: aliceblue;
}
.three {/*定义表格的长，高，背景颜色*/
grid-column: 1;
grid-row: 2 / 5;
background-color: aqua;
}
.four {/*定义表格的长，高，背景颜色*/
grid-column: 3;
grid-row: 3;
background-color: chocolate;
}
.five {/*定义表格的长，高，背景颜色*/
grid-column: 2;
grid-row: 4;
background-color: darkgray;
}
.six {/*定义表格的长，高，背景颜色*/
grid-column: 3;
grid-row: 4;
background-color: darkseagreen;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
