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 的好網站，可以為您提供很好的參考。 免費！