如何阻止元素的背景流入页面的其余部分？

Question

我对编码还很陌生（我才接触了几周）。我正在玩弄一个基本的网页。我有一个带有褐色背景颜色的。一切似乎都工作正常，但是，当我尝试添加背景颜色之外的内容时，颜色继续延伸。

有没有办法在下面的开头添加新文本，使文本显示在绿色背景下？

body {
  background-color: #A3B18A;
}

#wrap {
  background-color: #DAD7CD;
  margin: 20px;
  border-radius: 25px;
  /* this is a pretty nifty trick */
  box-shadow: 10px 5px 5px grey;
}

#bodywrap {
  font-family: verdana;
  text-align: center;
  margin-bottom: 10px;
}

#header {
  font-family: fantasy;
  font-size: 50px;
  text-align: center;
  padding-left: 60px;
  line-height: 20px;
}

#header h6 {
  color: #5b616A;
  font-family: sans-serif;
}

nav {
  border-radius: 10px;
  font-size: 30px;
}

nav li {
  display: inline-block;
  padding: 20px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

nav a {
  text-decoration: none;
  color: #5b616A;
  font-family: fantasy;
}

a:hover,
a:active {
  text-decoration: underline;
}

<body>
  <div id="wrap">
    <nav>
      <ul>
        <li><a href="about.html">Home</a></li>
        <li><a href="education.hmtl"> Education </a></li>
        <li><a href="contact.html"> Contact Me</a></li>
        <li><a href="blog.html"> Blog</a></li>
      </ul>
    </nav>
    <div id="header">
      <h2>A lot of nothing</h2>
      <h6> Even more nothing</h6>
    </div>
    <div id="bodywrap">
      <p> Just adding more text here.</a></p>
      <br>
      <br>
      <br>
      <br>
      <br>
      <p> This text will appear with a brown background, how do I get it to appear on the green background?.</p>

    </div>

    <div id="footer">
      <footer>

      </footer>
    </div>
  </div>
</body>

</html>

Answer 1

这是因为您的 footer 部分在 wrap div 中。将页脚从包装中移开，就可以了。另外你有一个关闭 </a> 在这里没有必要 <p> Just adding more text here.</a></p>

body {
  background-color: #a3b18a;
}

#wrap {
  background-color: #dad7cd;
  margin: 20px;
  border-radius: 25px;
  /* this is a pretty nifty trick */
  box-shadow: 10px 5px 5px grey;
}

#bodywrap {
  font-family: verdana;
  text-align: center;
  margin-bottom: 10px;
}

#header {
  font-family: fantasy;
  font-size: 50px;
  text-align: center;
  padding-left: 60px;
  line-height: 20px;
}

#header h6 {
  color: #5b616a;
  font-family: sans-serif;
}

nav {
  border-radius: 10px;
  font-size: 30px;
}

nav li {
  display: inline-block;
  padding: 20px;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

nav a {
  text-decoration: none;
  color: #5b616a;
  font-family: fantasy;
}

a:hover,
a:active {
  text-decoration: underline;
}

<div id="wrap">
    <nav>
        <ul>
        <li><a href="about.html">Home</a></li>
        <li><a href="education.hmtl"> Education </a></li>        
        <li><a href="contact.html"> Contact Me</a></li>
        <li><a href="blog.html"> Blog</a></li>
        </ul>
    </nav>   
    <div id="header">
        <h2>A lot of nothing</h2>
        <h6> Even more nothing</h6>
    </div>
    <div id="bodywrap">
        <p> Just adding more text here.</a></p>
        <br>
        <br>
        <br>
        <br>
        <br>    
    </div>
</div>

 <div id="footer">
      <footer>
          <p> This text will appear with a brown background, how do I get it to appear on the green background?.</p>
      </footer>
  </div>

如何阻止元素的背景流入页面的其余部分？

How can I stop an element's background from flowing into the rest of the page?

html

css

web-deployment