HTML-<h1>、<p> 不会显示在我的 <div> 中

Question

首先，我尝试了我能想到的唯一方法来添加 3 个不同的 背景的颜色，但现在它不允许我显示我的 文本。

我尝试使用位置功能，但它不起作用，我不确定我做错了什么，或者是否有更好的方法来制作 3 色背景？

* {
  margin: 0;
  padding: 0;
}

div {
  height: 1500px;
  position: relative;
}

.a {
  background: black;
}

.b {
  background: #1e1d1d;
}

.a:after,
.c:before,
.c:after {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 200px;
  display: block;
  position: relative;
  font-family: Arial;
}

.a:after {
  background: black;
}

.c:before {
  background: #1e1d1d;
  right: 0;
  height: 100%;
}

.c:after {
  background: white;
  right: 0;
  height: 100%;
}

p {
  position: fixed;
  font-family: Arial;
  color: white;
}

<div class="a">
  <h1>DeadTreeStudios</h1>
</div>
<div class="b" style="position:absolute;">
  <h1>
    -I'm James, a freelance software developer & designer.
  </h1>

  <p>
    I've always had a keen interest in design and development. Allthough there is always alot to learn, my skills are broad: from front end to back end development to app development. I enjoy it all!
  </p>
  <p>
    I'm avaliable for remote work, or if you like to build somthing together, please get in touch.
  </p>
</div>
<div class="c"></div>
<article></article>

Answer 1

你的 css 有很多问题导致它崩溃，检查一下。

你不需要 position: absolute 来做这样的事情

高度:100vh； width: 100%; 我确保一个部分从左到右从上到下填满屏幕 请注意，您也可以使用 width:100vw; 水平填充它，但在某些情况下它会添加一个水平滚动条

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: arial;
}

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

#first {
  background-color: black;
  color: white;
  padding-top: 48vh;
}

#second {
  background-color: grey;
  color: white;
}

#first h1 {
  text-align: center;
  vertical-align: middle;
}

<section id="first">
  <h1>DeadTreeStudios</h1>
</section>

<section id="second">
  <h1>
    -I'm James, a freelance software developer &amp; designer.
  </h1>
  <p>
    I've always had a keen interest in design and development. Allthough there is always alot to learn, my skills are broad: from front end to back end development to app development. I enjoy it all!
    <br> I'm avaliable for remote work, or if you like to build somthing together, please get in touch.
  </p>
</section>

<section id="third">

</section>