HTML+CSS三列页脚布局内容靠左样式异常问题求助

现存问题汇总 #

• CSS类选择器语法错误：所有自定义类名前未加.标识，导致样式完全不生效，你当前写的footer-container属于标签选择器，仅会匹配<footer-container>标签，和你HTML中使用的class="footer-container"元素无法匹配。.footer、.footer-heading均存在同样问题。
• HTML结构嵌套错误：第三列.footer-3被放在flex容器.footer的闭合标签之外，不属于flex布局子元素，无法和前两列并列展示。
• 选择器匹配错误：CSS中写的是footer-heading h2，但HTML中页脚标题用的是<h3>标签，导致标题边距等样式不生效。
• 粗体字体是浏览器默认样式：因为自定义样式未加载生效，浏览器默认给<h3>标签设置了粗体属性，所以页脚字体看起来偏粗。
• HTML标签未闭合：第二列的<p>标签缺少闭合标记，可能引发渲染异常。

修正后代码 #

CSS代码 #

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

/* 类选择器前加. */
.footer-container {
  background-color: #99cc99;
  font-family: "Open Sans";
  padding-bottom: 4rem;
}

/* 类选择器前加. */
.footer {
  width: 80%;
  height: 40vh;
  background-color: #99cc99;
  color: white;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

/* 类选择器前加. */
.footer-heading {
  display: flex;
  flex-direction: column;
  margin-right: 4rem;
}

/* 匹配HTML的h3标签 */
.footer-heading h3 {
  margin-bottom: 2rem;
}

.footer-heading a {
  color: white;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.footer-heading a:hover {
  color: #336633;
  transition: 0.3s ease-out;
}

HTML代码 #

<div class="footer-container">
  <div class="footer">
    <div class="footer-heading footer-1">
      <h3>ADDRESS</h3>
      <p>1234 Sandy Beach Road, <br> Queenscliffe, New Zealand</p>
    </div>
    <div class="footer-heading footer-2">
      <h3>CONTACT</h3>
      <!-- 补充p标签闭合 -->
      <p>Sally Sharp <br> Tel: (00) 1234 1122</p>
    </div>
    <!-- 把第三列移到.footer容器内部 -->
    <div class="footer-heading footer-3">
      <h3>QUICK LINKS</h3>
      <a href="About/About.html#Ammenities">Ammenities</a><br>
      <a href="About/About.html#Availability">Availability</a><br>
      <a href="About/About.html#Cancellation Policy">Cancellation Policy</a><br>
      <a href="About/About.html#Location">Location</a><br>
      <a href="About/About.html#What's nearby">What's nearby</a>
    </div>
  </div>
</div>

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