如何消除页脚与版权区块颜色间隙及相关CSS样式调整问题

问题1：页脚与底部区域颜色间隙修复 #

间隙是浏览器默认给块级元素添加的上下外边距导致的，你的背景图从间隙位置露了出来，按如下方案修改即可：

1. 可以直接在你已有的全局*{box-sizing: border-box;}规则中补充边距重置，修改为：

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

2. 如果你不想全局重置所有元素边距，也可以针对性添加样式：

/* 清零页脚、版权栏及内部标题段落的默认外边距 */
.footer, .copyright, .copyright h2, .copyright p {
  margin: 0;
}
/* 清零W3C验证图标所在p标签、返回顶部链接的默认外边距 */
body > p:has(img[alt="Valid CSS!"]), a[href="#top"] {
  margin: 0;
}

问题2：修改页脚内超链接文字颜色 #

直接针对页脚内的a标签写样式即可，可自行替换成你需要的色值，示例用了你现有配色体系里的黄色：

.footer a {
  color: #f0c808;
  text-decoration: none; /* 可选，去掉默认下划线 */
}
/* 可选添加hover交互效果 */
.footer a:hover {
  color: #f2f4f3;
  text-decoration: underline;
}

问题3：返回顶部链接改为按钮样式 #

给返回顶部的a标签添加如下样式即可，你也可以按需调整尺寸、颜色：

a[href="#top"] {
  display: inline-block;
  padding: 8px 16px;
  background-color: #086788;
  color: #f2f4f3;
  text-decoration: none;
  border-radius: 4px;
  margin: 12px 0 12px 16px;
}
/* 可选添加hover交互效果 */
a[href="#top"]:hover {
  background-color: #06aed5;
}

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