html - 固定图像周围有 "border"

Question

嘿，今天我尝试编写一个着陆页代码，但我被卡住了。我试图将图像全屏放置为 60px 的“边框”。现在我想在顶部放置导航栏，在图像左右两侧放置一些垂直文本。 (“边框”中的导航栏和垂直文本)。我该怎么做？

我已经知道那不是正确的做法。

.fullscreen-img {
    background-image: url(../img1);
    height: 100vh;
    width: 100vw;
    background-position: center;
    background-repeat: no-repeat;
    border: 50px solid white;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

Answer 1

像这样？或者您是否希望左右文本列一直延伸到标题/导航上方的顶部？

main {
  display: flex;
}

.left,
.right {
  display: flex;
  justify-content: center;
  padding: 5px;
  background-color: tomato;
}

.middle {
  flex: 0 1 80%;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  background-color: yellow;
}

.hero-container {
  display: flex;
  height: 100vh;
  width: 100%;
  background-color: blue;
}

.hero {
  flex: 0 1 80%;
  padding: 10px;
}

<main>
  <section class="left">
    <p>left text hi</p>
  </section>
  <section class="middle">
    <nav>
      <a>link 1</a>
      <a>link 2</a>
      <a>link 3</a>
    </nav>
    <div class="hero-container">
      <p class="hero">big image here</p>
    </div>
    <footer>
        <p>Footer</p>
    </footer>
  </section>
  <section class="right">
    <p>Dat right text</p>
  </section>
</main>