当前位置：首页 > CSS

网页底部制作css

2026-04-02 13:23:16CSS

网页底部制作CSS

制作网页底部通常需要设置固定或响应式布局，确保内容在不同设备上正常显示。以下是常见的CSS实现方法：

固定底部布局

固定底部布局使页脚始终位于页面底部，适用于内容较少的页面。

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #333;
  color: white;
  text-align: center;
  line-height: 60px;
}

响应式页脚

响应式页脚会根据屏幕大小调整布局，适合移动设备。

footer {
  background-color: #222;
  color: white;
  padding: 20px 0;
  text-align: center;
}

@media (max-width: 768px) {
  footer {
    padding: 15px 0;
    font-size: 14px;
  }
}

粘性页脚

粘性页脚在内容不足时会固定在底部，内容多时随页面滚动。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

footer {
  background-color: #444;
  color: white;
  padding: 20px;
  text-align: center;
}

多列页脚

适用于包含多个链接或信息的复杂页脚。

footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background-color: #555;
  color: white;
  padding: 30px;
}

.footer-section {
  padding: 10px;
}

@media (max-width: 600px) {
  footer {
    grid-template-columns: 1fr;
  }
}

页脚社交图标

添加社交媒体图标增强互动性。

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

关键点：

网页底部制作css