当前位置：首页 > CSS

css页脚制作

2026-02-26 21:56:50CSS

CSS页脚制作方法

固定定位页脚使用position: fixed将页脚固定在页面底部，适用于需要页脚始终可见的场景。设置bottom: 0使页脚紧贴底部，width: 100%确保横向铺满。

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

弹性盒布局页脚

通过Flexbox实现动态页脚布局，适合内容高度不固定的页面。将body设为flex容器，设置min-height: 100vh确保最小高度为视口高度，通过margin-top: auto将页脚推至底部。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
footer {
  background: #222;
  color: #fff;
  padding: 20px;
  text-align: center;
  margin-top: auto;
}

网格布局页脚

使用CSS Grid创建整体页面结构，通过grid-template-rows分配空间。设置footer区域自动占据剩余空间，确保始终位于底部。

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
footer {
  grid-row: 3;
  background: #444;
  color: #eee;
  padding: 10px;
}

响应式页脚设计

结合媒体查询实现多设备适配。基础样式保持简洁，在大屏幕上增加内边距和字体尺寸，小屏幕上调整布局为垂直堆叠。

footer {
  background: #555;
  color: white;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.footer-section {
  padding: 15px;
  min-width: 200px;
}
@media (max-width: 600px) {
  footer {
    flex-direction: column;
  }
}

页脚内容样式

典型页脚包含版权信息、导航链接和社交媒体图标。使用Flexbox均匀分布内容区块，为链接添加悬停效果增强交互性。

.footer-content {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-links a {
  color: #ccc;
  margin: 0 10px;
  transition: color 0.3s;
}
.footer-links a:hover {
  color: white;
}
.social-icons img {
  width: 24px;
  height: 24px;
  margin: 0 5px;
}

css页脚制作