CSS3 中的定位元素

Question

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

谢谢你=)

My Codepen:

代码笔

布局图片：此链接上的图片

Answer 1

一般提示和技巧

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

display: block;
margin: 0 auto;

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

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;
}

---

htmldog.com是一个学习 HTML、CSS 和 Javascript 的好网站，可以为您提供很好的参考。 免费！