底部信息栏

<footer>
      <div class="footer-nav">
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">关于我们</a></li>
          <li><a href="">联系我们</a></li>
          <li><a href="">服务</a></li>
        </ul>
      </div>
      <div class="footer-info">
        <p>© 2024 XXXXXX</p>
        <p>此项目仅用于毕业设计</p>
      </div>
      <div class="footer-social">
        <ul>
          <li><a href=""><i class="fab fa-facebook-f"></i></a></li>
          <li><a href=""><i class="fab fa-twitter"></i></a></li>
          <li><a href=""><i class="fab fa-instagram"></i></a></li>
        </ul>
      </div>
      <div class="footer-contact">
        <p>邮箱：XXXX</p>
        <p>电话：XXXX</p>
      </div>
      <div class="footer-back-to-top">
        <a href="#top">返回顶部</a>
      </div>
    </footer>

/* 底部整体样式 */
footer {
  background-color: #28826b;
  padding: 20px;
  text-align: center;
}

/* 导航链接样式 */
.footer-nav ul {
  list-style-type: none;
  padding: 0;
}

.footer-nav ul li {
  display: inline-block;
  margin-right: 10px;
}

.footer-nav ul li a {
  text-decoration: none;
  color: black;
}

/* 版权信息样式 */
.footer-info {
  margin: 10px 0;
}
/* 2024 */
.footer-info p {
  font-size: 20px;
  color: white;
}

/* 社交媒体链接样式 */
.footer-social ul {
  list-style-type: none;
  padding: 0;
}

.footer-social ul li {
  display: inline-block;
  margin-right: 10px;
}

.footer-social ul li a {
  text-decoration: none;
  color: white;
  font-size: 18px;
}

/* 联系信息样式 */
.footer-contact p {
  font-size: 18px;
  color: white;
  margin: 5px 0;
}

/* 返回顶部按钮样式 */
.footer-back-to-top a {
  text-decoration: none;
  color: black;
  font-size: 15px;
}

.footer-back-to-top a:hover {
  text-decoration: underline;
}