带有＆＃34;边界的固定图像＆＃34;周围

Question

嘿，今天我尝试编写着陆页的代码，但我卡住了。我试图用＆＃34;边框＆＃34;全屏放置图像。 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>