如何将多个部分添加到页面 html [暂停]

Question

我知道这似乎很难解释，但我将如何做一些事情，比如在身体的哪里，背景是灰色的，它像 h1 一样说“很酷的东西”，并且有 p 元素和东西，如果你向下滚动它是身体的另一种颜色，上面写着“漂亮的外观”和里面的 p 元素。

就像https://www.apple.com/是如何做到的。

Answer 1

我怀疑这就是你所追求的？

HTML

<div class="outer">
  <div class="sectionOne">
    <h1> iPhone 11 Pro</h1>
    <h3> Pro Cameras. Pro Display. Pro Performance.</h3>
  </div>
  <div class="sectionTwo">
     <h1> iPhone 11 </h1>
     <h3> Just the right amount of everything.</h3>
  </div>
  <div class="sectionThree">
     <h1> Watch </h1>
     <h3> With the new Always-On Retina display.</h3>
  </div>
</div>

CSS

* {
  margin:0;
  padding:0;  
  font-family: calibri;
}

.outer div {
  text-align: center;
  padding-top: 15px;
}

.sectionOne {
  background-color: black;
  color: white;
  height: 250px;
}

.sectionTwo {
  background-color: white;
  color: black;
  height: 250px;
}

.sectionThree {
  background-color: lightgray;
  height: 250px;
}

见 JSFiddle： https://jsfiddle.net/tgLafzc0/1/

Answer 2

根据我的观察，另一种方式是：您可以将一个<section>标签放入您拥有多个<div>的标签中。对于所有div ，您可以默认设置一个带有背景的 class。 但是，如果您想更改任何特定 div 的背景，您可以使用nth-of-type(x)其中x代表您的 div 编号。 所以不需要每次都给一个新的 class 来添加新的背景颜色。 从Gosi的上述示例扩展

 * { margin:0; padding:0; }.one { background-color: pink; padding: 5%; }.two { background-color: lightgrey; padding: 5%; } section.two:nth-of-type(2) { background: green; }

 <div class="one"> <h1>Hello</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <section> <div class="two"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="two"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="two"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="two"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </section>

您可以使用section.two:nth-of-type(2)将其设置为1或3来查看效果。 希望这可以帮助。