在CSS3中定位元素

Question

我正在尝试使用HTML5 + CSS3创建一个简单的布局，如下图所示，对于高中的工作，但是，我不知道编程，我在CSS3中的位置有困难，这是我的编码器做，这就是我需要留下的布局图像，你能帮助我吗？

谢谢=）

My Codepen:

Answer 1

General tips and tricks

您可以使用以下方法轻松居中元素：

display: block;
margin: 0 auto;

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

float: left;

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

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，可能是一个很好的参考资料是htmldog.com。免费！