CSS菜单布局问题求助：内容遮挡、链接颜色异常、页脚不固定

嘿，我来帮你逐个排查并解决这三个问题，先从代码里的小错误开始，再处理每个布局问题：

先修复一个HTML语法错误 #

你写的 <class class="logo">Logo Name</class> 是错误的标签，应该改成 <div class="logo">Logo Name</div>，这个标签写错了可能会影响样式的正常渲染。

问题1：Fixed定位的Header遮挡Intro区域内容 #

原因 #

Fixed定位的元素会脱离正常的文档流，所以页面下方的内容会自动往上填充原本Header占据的空间，导致被遮挡。

修复方案 #

给body添加等于Header高度的内边距，这样所有内容都会从Header下方开始：

body{ 
  font-family: 'Arvo', serif; 
  padding-top: 8vh; /* 和header的height值一致 */
}

或者也可以单独给.intro添加margin-top:8vh;，效果是一样的。

问题2：无法修改Nav标签内A链接的文字颜色 #

原因 #

看你的CSS代码，nav a的样式里重复写了两次color属性：

nav a{ 
  color: rgb(197, 197, 14); 
  /* ...其他样式... */
  color: black; /* 这个声明覆盖了上面的颜色 */
}

CSS中后写的样式会覆盖先写的同名属性，所以你的链接一直显示黑色。

修复方案 #

删掉后面的color: black;，保留你想要的黄色即可：

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

（顺便说一句，list-style: none; 是给列表元素用的，a标签不需要这个，可以删掉）

问题3：Footer设置Absolute定位后未固定在页面底部 #

原因 #

Absolute定位是相对于最近的设置了非static定位的父元素，你的body没有设置position: relative;，而且如果页面内容高度超过视口高度，Absolute定位的Footer会跟着内容滚动，无法固定在底部。

修复方案（推荐用Flex布局，更稳定） #

修改body和相关元素的CSS，用Flex布局实现固定底部的Footer：

html, body { 
  height: 100%; 
}
body{ 
  font-family: 'Arvo', serif; 
  padding-top: 8vh; /* 解决问题1的设置 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  min-height: 100%;
}
.information{
  flex: 1; /* 让这个区块占满剩余空间，把Footer挤到底部 */
  background-color: #222; 
  text-align: center; 
  color: rgb(197, 197, 14); 
}
footer{
  background-color: whitesmoke; 
  text-align: center; 
  width: 100%; 
  height: 4vh; 
  /* 去掉position: absolute; bottom: 0; 用Flex布局代替 */
}

如果你坚持要用Absolute定位，也可以这样调整：

html, body { 
  height: 100%; 
}
body{ 
  font-family: 'Arvo', serif; 
  padding-top: 8vh; /* 解决问题1的设置 */
  position: relative; /* 让Footer的absolute相对于body定位 */
  min-height: 100%;
  padding-bottom: 4vh; /* 等于Footer的高度，避免内容被Footer遮挡 */
  box-sizing: border-box; /* 确保padding不会增加body总高度 */
}
footer{
  background-color: whitesmoke; 
  text-align: center; 
  position: absolute; 
  bottom: 0; 
  width: 100%; 
  height: 4vh; 
}

修复后的完整代码 #

HTML

<!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&amp;display=swap" rel="stylesheet"> 
<title>Portfolio Page</title> 
</head> 
<body> 
<header> 
<div class="logo">Logo Name</div> 
<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（用Flex布局的版本）

*{ margin: 0; padding: 0; } 
html, body { height: 100%; } 
body{ 
  font-family: 'Arvo', serif; 
  padding-top: 8vh;
  display: flex;
  flex-direction: column;
  min-height: 100%;
} 
header{ 
  background-color: #222; 
  width: 100%; 
  height: 8vh; 
  display: flex; 
  position: fixed;
  top: 0; /* 加上这个确保Header固定在顶部 */
} 
nav{ flex: 1; align-self: center; } 
nav a{ 
  color: rgb(197, 197, 14); 
  text-decoration: 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; 
} 
h1{ padding-top: 25px; } 
.information{ 
  flex: 1;
  background-color: #222; 
  text-align: center; 
  color: rgb(197, 197, 14); 
} 
footer{ 
  background-color: whitesmoke; 
  text-align: center; 
  width: 100%; 
  height: 4vh; 
} 
footer p{ 
  font-weight: bold; 
  font-size: 12px; 
  margin-top: 8px; 
}

内容的提问来源于stack exchange，提问作者Sanokposo