Html 在CSS3中定位元素

我正试图用HTML5+CSS3创建一个简单的布局，如下图所示，为了一份高中的工作，然而，我不知道编程，我在CSS3中的定位有困难，这是我正在做的代码笔，这是布局图我需要如何保持，你能帮我吗

谢谢=）

布局图：

一般提示和技巧 您可以使用以下工具轻松地将图元居中：

display: block;
margin: 0 auto;

如果元素不太多，可以尝试使用float，例如：

float: left;

我看到你使用了很多像素定位，而不是%或vw（视图宽度）或vh（视图高度）。对于小型项目来说，这很好，您可以将位置设置为“相对”，然后添加边距（请注意，边距可以为negavite，以便进一步定位对象，例如：

position: relative;
margin-left: 40px;
margin-top: 50px;

---

使用您的代码的几个示例 例如，您可以使用以下工具将按钮居中：

button {
  display: block;
  margin: 0 auto;
  width: 100px;
  height: 40px;
  border-radius: 10px;
  background-color: whitesmoke;
}

或者，您可以使用以下方法将图像定位到右侧：

header > div > img {
  display: block;
  margin-right: 0px;
  margin-left: auto;
}

---

---

这是一个学习HTML、CSS和Javascript的好网站，对您来说也是一个很好的参考。它是免费的！

嗨，罗伯特，非常感谢您给我展示这个网站，我要学习了。=）

header > div > img {
  display: block;
  margin-right: 0px;
  margin-left: auto;
}