如何用css制作html布局

Question

我正在学习 HTML 和 CSS，发现了一个有趣的设计。 我有一个问题，我该如何进行此布局，因为我看到某些层位于其他层之下。这个问题主要与背景有关，因为它由一些图像组成，我如何将其放在各个部分下。

我尝试在 css 中使用网格，但在较小的屏幕上使用它们时遇到问题

登陆页面

屏幕更小

（而且我对网格宽度（菜单和其他）也有问题

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #E9E7E5;
}

body {
  background-color: #060708;
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

.grid-container {
  display: grid;
  /* margin: 1% 6%; 
    width: 90%;*/
  grid-template-columns: auto;
  grid-template-rows: auto;
  height: 100%;
}

.grid-item {
  border: 1px solid;
  border-radius: 56px;
  font-size: 30px;
  text-align: center;
  justify-self: center;
  width: 90%;
}

#top-menu {
  background: rgba(10, 11, 12, 0.04);
  box-shadow: 0 0 4px #927DE3;
  backdrop-filter: blur(5px);
  width: 80%;
  height: 56px;
  border-color: rgba(233, 231, 229, 0.08);
  opacity: 100%;
  padding: 8px 8px 8px 32px;
  align-content: center;
  display: flex;
  justify-content: space-between;
  position: fixed;
}

<div class="grid-container">
  <nav class="grid-item" id="top-menu">
    <a class="logo" href="#"><img src="/img/Logo.svg" alt="Logo"></a>
    <ul>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#projects">PROJECTS</a></li>
      <li><a href="#playground">PLAYGROUND</a></li>
      <li><a href="#faq">FAQ</a></li>
    </ul>

    <button>CONTACT <i class="fa-solid fa-arrow-right fa-1x"></i></button>
  </nav>

Answer 1

它并不是很完美，但是你尝试过将背景图像放在身体上吗？

就像这样：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #E9E7E5;
}

body {
  background-color: #060708;
  font-family: "Source Sans 3", sans-serif;
  font-size: 14px;
  min-height: 100vh;
  content:url(your image here);
}

.grid-container {
  display: grid;
  /* margin: 1% 6%; 
    width: 90%;*/
  grid-template-columns: auto;
  grid-template-rows: auto;
  height: 100%;
}

.grid-item {
  border: 1px solid;
  border-radius: 56px;
  font-size: 30px;
  text-align: center;
  justify-self: center;
  width: 90%;
}

#top-menu {
  background: rgba(10, 11, 12, 0.04);
  box-shadow: 0 0 4px #927DE3;
  backdrop-filter: blur(5px);
  width: 80%;
  height: 56px;
  border-color: rgba(233, 231, 229, 0.08);
  opacity: 100%;
  padding: 8px 8px 8px 32px;
  align-content: center;
  display: flex;
  justify-content: space-between;
  position: fixed;
}

l

<div class="grid-container">
  <nav class="grid-item" id="top-menu">
    <a class="logo" href="#"><img src="/img/Logo.svg" alt="Logo"></a>
    <ul>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#projects">PROJECTS</a></li>
      <li><a href="#playground">PLAYGROUND</a></li>
      <li><a href="#faq">FAQ</a></li>
    </ul>
    <button>CONTACT <i class="fa-solid fa-arrow-right fa-1x"></i></button>
  </nav>