Question

我了解如何弄清楚配色方案。我需要帮助来了解有关配置布局的思考过程。

Answer 1

这是CSS Grid的绝佳布局候选人。

开始的好地方：https://gridbyexample.com/examples/

Answer 2

为每个块创建一个<div>元素，测量图像中每个块的大小和位置，并相应地在CSS中设置块的样式。

示例：（不完全复制图像，仅是示例）

#container {
  background: bisque;
  width: 600px;
  height: 600px;
  position: relative;
}

.block {
  position: absolute;
}

#block--1 {
  background: red;
  width: 100px;
  height: 50px;
  top: 10px; //defines distance from top edge of container
  left: 10px; //defines distance from left edge of container
}

#block--2 {
  background: green;
  width: 100px;
  height: 50px;
  top: 65px;
  left: 10px;
}

#block--3 {
  background: grey;
  width: 100px;
  height: 105px;
  top: 10px;
  left: 115px;
}
#block--4 {
  background: yellow;
  width: 50px;
  height: 105px;
  top: 10px;
  left: 220px;
}

<div id="container">
  <div class="block" id="block--1"></div>
  <div class="block" id="block--2"></div>
  <div class="block" id="block--3"></div>
  <div class="block" id="block--4"></div>
</div>

Answer 3

在我的示例中，我们将设置没有颜色代码的背景色我们将执行以下详细信息：

snippet title "Title" A
``rv =  '='.repeat(t[0].length)``
$1
``rv = '='.repeat(t[0].length)``
endsnippet

 #block{
   
   bacground-color: red;
   width:150px;
   height:150px;
   
   }

如何使用HTML和CSS创建这些块

3 个答案: