CSS 菜单设计 - 菜单下竞争

Question

我对此还是个新手，遇到了一些问题。我的菜单和 body 有问题。我想要的是在菜单下方有一个包含内容的图像。我的问题是，body 中的 class 部分位于 nav 标签的内容下方，这使得 h1 文本也在菜单下方消失。

当我做我的第一个项目时，我没有遇到这个问题。我主要是从我的第一个项目中复制代码——即使在研究之后我也看不出代码到底出了什么问题。我也无法更改链接的颜色 - 其他一切都可以更改。我错过了什么吗？

<!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">
<link rel="stylesheet" href="style.css">

<link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">

<title>Portfolio Page</title>
</head>

<body>

<header>
        <class class="logo">Logo Name</class>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Portfolio</a>
        <a href="#">Contacts</a>

    </nav>
</header>

<section class="intro">
    <h1>Hello, this is the Page Intro!</h1>
    <p>This is some smaller Text!</p>
</section>

<section class="information">
    <p>Here will be some Infos</p>
</section>

</body>

<footer>
<p>Copyright @2020</p>
</footer>

</html>

这里是 CSS

*{
margin: 0;
padding: 0;
}

html, body {
 height: 100%;
}

body{ 
 font-family: 'Arvo', serif;
}

header{
 background-color: #222;
 width: 100%;
 height: 8vh;
 display: flex;
 position: fixed;
}

nav{
 flex: 1;
 align-self: center;
}

nav a{
 color: rgb(197, 197, 14);
 text-decoration: none;
 list-style: none;
 color: black;
 margin-left: 5vh;
 font-weight: 600;
 font-size: 24px;
 letter-spacing: 3px;
}


.logo{
 color: rgb(197, 197, 14);
 flex:1;
 align-self: center;
 margin-left: 5vh;
 letter-spacing: 3px;
}

.intro{
 text-align: center;
 background-image: url(img/flat2.jpg);
 background-repeat: no-repeat;
 background-position: center; 
 width: 100%;
 height: 60vh;

}

h1{
 padding-top: 25px;
 }

.information{
  background-color: #222;
  text-align: center;
  min-height: 60vh;
  color: rgb(197, 197, 14);
}


footer{
 background-color: whitesmoke;
 text-align: center;
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 4vh;

 }

footer p{
 font-weight: bold;
 font-size: 12px;
 margin-top: 8px;
}

此外，页脚不会粘在底部，只是浮动在页面中间。这看起来很奇怪，我以前没有遇到过这个问题。

谢谢你的帮助！

Answer 1

1st) 对于 link 种颜色，你有 2 种颜色，只需删除颜色：黑色； 2) position: fixed in header 类似于position: absolute；因为它不会在其周围移动内容，而是移动内容，因此您应该将 padding-top 或 margin-top 添加到 header，将其从顶部推开。

Answer 2

在我看来，标题问题可以通过添加一些额外的填充来解决。

h1 {
    padding-top: 150px;
}

链接颜色没有生效，因为它在之后被定义为黑色。所以它被覆盖了。在下面的块中，删除 color: black 并且将应用之前定义的颜色。

nav a{
 color: rgb(197, 197, 14);
 text-decoration: none;
 list-style: none;
 color: black;
 margin-left: 5vh;
 font-weight: 600;
 font-size: 24px;
 letter-spacing: 3px;
}

Answer 3

在 intro class
删除了 nav a

color: black;

页脚元素应该在您的 body 标签内

https://jsfiddle.net/oLu2tn58/

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Arvo', serif;
}

header {
  background-color: #222;
  width: 100%;
  height: 8vh;
  display: flex;
  position: fixed;
}

nav {
  flex: 1;
  align-self: center;
}

nav a {
  color: rgb(197, 197, 14);
  text-decoration: none;
  list-style: none;
  margin-left: 5vh;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 3px;
}

.logo {
  color: rgb(197, 197, 14);
  flex: 1;
  align-self: center;
  margin-left: 5vh;
  letter-spacing: 3px;
}

.intro {
  text-align: center;
  background-image: url(img/flat2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 60vh;
  padding-top: 8vh;
}

h1 {
  padding-top: 25px;
}

.information {
  background-color: #222;
  text-align: center;
  min-height: 60vh;
  color: rgb(197, 197, 14);
}

footer {
  background-color: whitesmoke;
  text-align: center;
  position: static;
  width: 100%;
  height: 4vh;
}

footer p {
  font-weight: bold;
  font-size: 12px;
  margin-top: 8px;
}

<!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">
  <link rel="stylesheet" href="style.css">

  <link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">

  <title>Portfolio Page</title>
</head>

<body>

  <header>
    <class class="logo">Logo Name</class>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Portfolio</a>
      <a href="#">Contacts</a>

    </nav>
  </header>

  <section class="intro">
    <h1>Hello, this is the Page Intro!</h1>
    <p>This is some smaller Text!</p>
  </section>

  <section class="information">
    <p>Here will be some Infos</p>
  </section>

  <footer>
    <p>Copyright @2020</p>
  </footer>

</body>

</html>

CSS 菜单设计 - 菜单下竞争

CSS Menu Design - Contend under Menu

html

css

menu

header