html - 需要帮助重新创建带有 div 标签的图像

Question

#box1 {
    background-color: black;
    float: top;
    width: 300px;
    height: 100px;
}
 
#box2 {
    background-color: red;
    float: top;
    width: 300px;
    height: 100px;
}
 
#box3 {
    background-color: #807880;
    float: top;
    width: 300px;
    height: 100px;
}
 
#box4 {
    background-color: silver;
    width: 300px;
    height: 100px;
}
 
#box5 {
    background-color: purple;
    float: top;
    width: 300px;
    height: 100px;
}
 
#box6 {
    background-color: #28807d;
    float: top;
    width: 300px;
    height: 100px;
}
 
#box7 {
    background-color: #198003;
    float: top;
    width: 300px;
    height: 100px;
}

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>

我需要用 HTML 创作这件艺术品，我只能使用 HTML 和 CSS。

如何在 HTML 中重新创建此图片？

这是我到目前为止尝试过的:

[1] https://pastebin.com/9h3nyrEj

结果:

Answer 1

正如您所说，这就像是第 3 次接触 HTML，我将逐步向您解释该怎么做。但这需要一些时间才能实现您的目标。我可以简单地粘贴结果，但这样你就不会学习如何使用它。你边做边学!当然，当你被卡住时；整个 stackoverflow 都想帮助你!

只是为了确定； https://getbootstrap.com/docs/4.3/about/license/ Bootstrap 是“出于个人、私有(private)、公司内部或商业目的免费下载和使用 Bootstrap，全部或部分”。

第 1 步:阅读并研究 Bootstrap 简介。您可能会忘记至少 90% 的阅读内容，但这没关系。这只是为了让您了解 Bootstrap 的使用。在使用 Bootstrap 时，您将学习如何实现每个功能，更重要的是如何使用它。: https://getbootstrap.com/docs/4.3/getting-started/introduction/

第 2 步:在您的根目录中创建一个名为 index.html 的文件。

第 3 步:在 index.html 中，确保包含 bootstrap，就像您首先阅读的第 1 步一样。 “快速启动”->“CSS”->“JS”。或者只是复制并粘贴“入门模板”。

第 4 步:阅读此链接:https://getbootstrap.com/docs/4.3/layout/grid/祝你好运! :-)。一旦你完成了这部分就很容易了。查看 Bootstrap 提供的不同示例并设计您自己的布局。

真的，这就是您获得所需的一切。

老实说，我很好奇你的结果。你介意在完成后标记我或发表评论吗？ :-)

---

Bootstrap 是当今最常用的框架之一。许多网站都在使用它，可以下载或购买的数千个(也许更多？)模板都是基于 Bootstrap 的。例如:https://themes.getbootstrap.com/ .就我个人而言，我喜欢在我的网站上使用 Bootstrap。

如果您有任何问题，请随时提出!

最好的问候