底部信息栏

Vijurria

已于 2024-03-14 16:19:31 修改

阅读量142

点赞数 3

分类专栏： Java项目文章标签： dreamweaver html css

于 2024-03-11 21:33:33 首次发布

本文链接：https://blog.csdn.net/qq_51376774/article/details/136635838

版权

Java项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文描述了一个用于毕业设计的网站底部结构，包括导航链接、版权信息、社交媒体链接以及联系信息的展示方式。

摘要由CSDN通过智能技术生成

<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;
}