Question

格式不会应用于我的页脚。我不确定是什么问题。我试图将页脚更改为.footer，但这也不起作用。页脚中的文本应居中对齐，并且颜色应为黑色。文本未居中，而是蓝色，因为它是一个链接。

#footer {
  text-align: center;
  font-size: 16px;
  font-size-adjust: auto;
  font-weight: bold;
  color: black;
}

<div class="text-center center-block">
  <footer id="footer" class="container-fluid bg-4 text-center">
    <a href="/home/"> <img id="image" src="../images/Patriotonly.png" style="display:center" alt="Patriot Perspective" height="10%" width="10%"> </a>
    <span style="color: #161862;">Patriot</span><span style="color: #ED092C;"> Perspective</span>
    <div class="social_link">
      <ul class="sociallink_nav">
        <li><a href="https://www.facebook.com/patriotperspective/"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://twitter.com/ThePatriotPers1"><i class="fa fa-twitter"></i></a></li>
        <li><a href="https://www.youtube.com/channel/UColyEbi9qxlHLT0kpv46Tew"><i class="fa fa-youtube"></i></a></li>
        <li><a href="https://www.instagram.com/patriotperspective/"><i class="fa fa-instagram"></i></a></li>
      </ul>
      <br>
      <br>
      <ul><a href="privacypolicy.html" id="bottom-text">Privacy Policy</a>
        <a href="privacypolicy.html" id="bottom-text">Terms of Service</a>
        <a href="privacypolicy.html" id="bottom-text">Advertising</a>
        <a href="privacypolicy.html" id="bottom-text">Contact</a>
      </ul>
      <p class="copyright">Copyright &copy; 2018 <a href="index.html">Patriot Perspective</a></p>
    </div>
  </footer>
  <hr>
</div>

Answer 1

您不需要包括"id=footer"。 footer是HTML5中的本机标记，您可以将其包括在CSS中而不使用井号。在您的bottom_text的注释上，最好将其作为一个类包含在内。实际上，ID只能使用一次，而类则是可重用的。您没有包括bottom_text类的CSS，但是您可以将＃更改为点。

包含li标签以正确列出列表中的项目。您可以通过添加text-decoration属性来删除下划线/更改链接的外观。

footer {
  text-align: center;
  font-size: 16px;
  font-size-adjust: auto;
  font-weight: bold;
  color: black;
}

footer a {
  color: black;
  text-decoration: none;
}

ul li {
  list-style-type: none;
  display: inline;
}

<div class="text-center center-block">
  <footer class="container-fluid bg-4 text-center">
    <a href="/home/"> <img id="image" src="../images/Patriotonly.png" style="display:center" alt="Patriot Perspective" height="10%" width="10%"> </a>
    <span style="color: #161862;">Patriot</span><span style="color: #ED092C;"> Perspective</span>
    <div class="social_link">
      <ul class="sociallink_nav">
        <li><a href="https://www.facebook.com/patriotperspective/"><i class="fa fa-facebook"></i></a></li>
        <li><a href="https://twitter.com/ThePatriotPers1"><i class="fa fa-twitter"></i></a></li>
        <li><a href="https://www.youtube.com/channel/UColyEbi9qxlHLT0kpv46Tew"><i class="fa fa-youtube"></i></a></li>
        <li><a href="https://www.instagram.com/patriotperspective/"><i class="fa fa-instagram"></i></a></li>
      </ul>
      <br>
      <br>
      <ul>
        <li><a href="privacypolicy.html" class="bottom-text">Privacy Policy</a></li>
        <li><a href="privacypolicy.html" class="bottom-text">Terms of Service</a></li>
          <li><a href="privacypolicy.html" class="bottom-text">Advertising</a></li>
          <li><a href="privacypolicy.html" class="bottom-text">Contact</a></li>
      </ul>
      <p class="copyright">Copyright &copy; 2018 <a href="index.html">Patriot Perspective</a></p>
    </div>
  </footer>
  <hr>
</div>

格式未应用CSS

1 个答案: