如何使用HTML和CSS在页面底部创建两个固定的页脚？

要在页面底部创建两个固定的页脚，可以使用HTML和CSS来实现。下面是一种常见的实现方式：

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <title>页面底部固定页脚</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="content">
    <!-- 页面内容 -->
  </div>
  <footer>
    <div class="footer-left">
      <!-- 左侧页脚内容 -->
    </div>
    <div class="footer-right">
      <!-- 右侧页脚内容 -->
    </div>
  </footer>
</body>
</html>

CSS部分（styles.css）：

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.content {
  min-height: calc(100% - 50px); /* 减去页脚高度 */
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
  display: flex;
}

.footer-left, .footer-right {
  flex: 1;
  padding: 10px;
}

.footer-left {
  text-align: left;
}

.footer-right {
  text-align: right;
}

上述代码中，我们使用了一个<div class="content">来包裹页面的主要内容，通过设置min-height属性，使其高度自适应，减去页脚的高度。然后，我们使用<footer>标签来创建页脚，其中包含一个左侧容器和一个右侧容器，分别用于放置左侧和右侧的页脚内容。

在CSS中，我们使用position: fixed;将页脚固定在页面底部，使用bottom: 0;将其与页面底部对齐。通过设置width: 100%;使其宽度占满整个页面。我们还设置了一个固定的高度height: 50px;，可以根据需要进行调整。

左侧和右侧的页脚内容分别放置在.footer-left和.footer-right的容器中，通过设置flex: 1;使其自动填充剩余空间，并设置适当的内边距padding来调整内容的位置和样式。

这样，就可以在页面底部创建两个固定的页脚了。

关于HTML和CSS的更多学习资源，可以参考以下链接：