边距为z的背景图像和叠加层不影响导航栏时创建边距

Question

我正在尝试创建一个网页，该网页的左右边距固定为50px，其中页面图像的索引使其离屏幕更近，而空白距更远。我也想实现一个固定的页脚就像我的导航栏是我的代码一样。我尝试将左右边距设置为50px并将其设置到固定位置，并尝试使用wrapper类将其添加到各节中，但均未产生预期的结果。

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Archers</title>
  <link rel="stylesheet" href="arch.css">
</head>

<body>



    <section id="main">
        <div class="bg1">
          <header>
            <div id="navbar">
              <nav class="nav-list">
                <ul class="ul-style ">
                  <li><a href="#portfolio">OUR PORTFOLIO</a></li>
                  <li><a href="#process">OUR PROCESS</a></li>
                  <li><a href="#about">ABOUT</a></li>
                  <li><a href="#main">HOME</a></li>
                </ul>
            </div>
          </header>
        </div>
        </div>
      </section>

      <section id="about">
        <div class="bg1">
          <div class="about_us">
            <a name="#about">
              <p>
                <h1>ABOUT US</h1>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
                quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
                itaque
                minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
                rem.
                Sit, illum, non.
              </p>
            </a>
          </div>
        </div>
        </div>
      </section>

      <section id="process">
        <div class="bg1>
          <div class=" our_process">
          <a name="#process">
            <p>
              <h1>OUR PROCESS</h1>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
              quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
              itaque
              minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
              rem.
              Sit, illum, non.
            </p>
          </a>
        </div>
        </div>
        </div>
      </section>

      <section id="portfolio">
        <div class="bg1">
          <div class="our_portfolio">
            <a name="#portfolio">
              <p>
                <h1>OUR PORTFOLIO</h1>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
                quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
                itaque
                minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
                rem.
                Sit, illum, non.
              </p>
            </a>
          </div>
        </div>
        </div>
      </section>
      </section>
      <section id="footer">
        <footer>
          2020 DeborahPalmTree
        </footer>
      </section>
      <script src="index.js" charset="utf-8"></script>

    </body>

</html>

CSS代码

* {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
}


#navbar {
  width: 100%;
  height: 50px;
  background-color: rgba(219, 219, 219, 1.0);
  position: fixed;
}

nav ul li {
  list-style: none;
  float: right;
  margin: 20px;
}

li a {
  text-decoration: none;
  color: #ffffff;
}

.bg1 {
  background-color:rgba(255,255,255, 0.5);
  width:100%;
  height:100%;
}

/*.wrapper{
  width:50px;
    position:fixed;
    height:100%;
    background-color:rgba(255,255,255,1.0);
    opacity:0;
    z-index:1;}
}*/

#main {
  height: 100%;
  width: 100%;
  background-image: url('structural-images/img_house_trees.jpg');
  background-size: cover;
  background-position: bottom;
}

#about {
  height: 100%;
  width: 100%;
  background-image: url('structural-images/img_construction_site.jpg');
  background-size: cover;
  background-position: bottom;
}

#process {
  height: 100%;
  width: 100%;
  background-image: url('structural-images/img_arc_plan.jpg');
  background-size: cover;
  background-position: bottom;
}

#portfolio {
  height: 100%;
  width: 100%;
  background-image: url('structural-images/img-structure-garden-car-park.jpg');
  background-size: cover;
  background-position: bottom;
}

 #fixed{
   position: fixed;
   height :50px;
   width:100%;
   background-color: rgba(219,219,219,1.0);
 }

边距为z的背景图像和叠加层不影响导航栏时创建边距

问题描述投票：0回答：1

1个回答

最新问题

边距为z的背景图像和叠加层不影响导航栏时创建边距

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1