如何使我的网页显示我创建的所有HTML

Question

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #333;
  background-color: #f4f4f4;
  font-size: 1.2em;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
  margin: 0 1rem;
}

nav a {
  color: #fff;
  text-decoration: none;
}

section {
  padding: 2rem;
}

.project {
  margin-bottom: 2rem;
  border: 1px solid #ddd;
  padding: 1rem;
  background-color: white;
  color: #00ff00;
  text-transform: uppercase;
}

#contact {
  color: #ff0000;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}

#about {
  color: #ff00ff;
  text-transform: uppercase;
}

strong {
  color: #00ffff;
}

h2 {
  color: brown;
  text-align: center;
}

h3 {
  color: darkblue;
}

ul {
  color: #00ffff;
}

<header>
  <h1>Rolivhuwa Mandiwana</h1>
  <nav>
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="about">
  <h2>About Me</h2>
  <p>I'm a self touht junior web developer with web development skils
  <ul>
    <li>HTML
    <li>CSS</li>
    <li> javaScript</li>
  </ul>
  I'm wiling to take a long term and a short term jorb , i will accept any kind of frontend web development project that i'm offered and i will do my very best to make the best results.</p>
</section>

<section id="projects">
  <h2>Projects</h2>
  <div class="project">
    <h3>small business home page</h3>
    <p>This is a small business home page explainig
      and showing what the business is all about.</p>
  </div>
  <div class="project">
    <h3>HML log in form</h3>
    <p>Login form where you enter your
      personal information to enter or continue to
      the other side of a web page.</p>
  </div>

  <div class="project">
    <h3>event invitation page</h3>
    <p>this is an webpage that invite people
      to an event showing inportant things about an event along with time and venue.</p>
  </div>

  <div class="project">
    <h3>recipe page</h3>
    <p>this is a page showing ijnstrucctions on how cook or bake along with what you need.</p>
  </div>
</section>

<section id="contact">
  <h2>Contact</h2>
  <p>Email: <a href="milto:[email protected]">[email protected]</a>
  <p>
  <p>LinkedIn: <a href="linkedin.com/in/Rolivhuwa Mandiwana">linkedin.com/in/Rolivhuwa Mandiwana</a></p>
  <p>WhatsApp: [phone]</p>
  <P>PhoneNumber: 0633967949</P>
</section>

<footer>
  <p>&copy; 2025 Rolivhuwa Mandiwana</p>
</footer>

这是我从事的工作，我对要做什么不知道

页脚出现在联系信息上，因为它是

position: fixed

Answer 1

position: sticky

：

footer {
  position: sticky;

  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
  bottom: 0;
  width: 100%;
}

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #333;
  background-color: #f4f4f4;
  font-size: 1.2em;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1rem 0;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
  margin: 0 1rem;
}

nav a {
  color: #fff;
  text-decoration: none;
}

section {
  padding: 2rem;
}

.project {
  margin-bottom: 2rem;
  border: 1px solid #ddd;
  padding: 1rem;
  background-color: white;
  color: #00ff00;
  text-transform: uppercase;
}

#contact {
  color: #ff0000;
}

footer {
  position: sticky;

  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
  bottom: 0;
  width: 100%;
}

#about {
  color: #ff00ff;
  text-transform: uppercase;
}

strong {
  color: #00ffff;
}

h2 {
  color: brown;
  text-align: center;
}

h3 {
  color: darkblue;
}

ul {
  color: #00ffff;
}

<header>
  <h1>Rolivhuwa Mandiwana</h1>
  <nav>
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<section id="about">
  <h2>About Me</h2>
  <p>I'm a self touht junior web developer with web development skils
  <ul>
    <li>HTML
    <li>CSS</li>
    <li> javaScript</li>
  </ul>
  I'm wiling to take a long term and a short term jorb , i will accept any kind of frontend web development project that i'm offered and i will do my very best to make the best results.</p>
</section>

<section id="projects">
  <h2>Projects</h2>
  <div class="project">
    <h3>small business home page</h3>
    <p>This is a small business home page explainig
      and showing what the business is all about.</p>
  </div>
  <div class="project">
    <h3>HML log in form</h3>
    <p>Login form where you enter your
      personal information to enter or continue to
      the other side of a web page.</p>
  </div>

  <div class="project">
    <h3>event invitation page</h3>
    <p>this is an webpage that invite people
      to an event showing inportant things about an event along with time and venue.</p>
  </div>

  <div class="project">
    <h3>recipe page</h3>
    <p>this is a page showing ijnstrucctions on how cook or bake along with what you need.</p>
  </div>
</section>

<section id="contact">
  <h2>Contact</h2>
  <p>Email: <a href="milto:[email protected]">[email protected]</a>
  <p>
  <p>LinkedIn: <a href="linkedin.com/in/Rolivhuwa Mandiwana">linkedin.com/in/Rolivhuwa Mandiwana</a></p>
  <p>WhatsApp: [phone]</p>
  <P>PhoneNumber: 0633967949</P>
</section>

<footer>
  <p>&copy; 2025 Rolivhuwa Mandiwana</p>
</footer>