css项目底部制作

固定底部布局

使用 position: fixed 将元素固定在视窗底部，适用于页脚或导航栏等需要常驻底部的场景。
示例代码：

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

Flexbox 底部对齐

通过 Flexbox 弹性布局实现内容区域自动扩展，页脚紧贴底部。适用于内容高度不足时仍保持底部对齐。
示例代码：

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content {
  flex: 1;
}
.footer {
  background-color: #333;
  color: white;
  padding: 10px;
}

Grid 布局底部定位

利用 CSS Grid 划分页面结构，将页脚分配至固定区域。适合复杂布局的场景。
示例代码：

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

底部内容水平居中

结合 text-align 或 Flexbox 实现底部内容的水平居中显示。
示例代码：

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  color: white;
  height: 60px;
}

响应式底部设计

使用媒体查询调整底部布局在不同屏幕尺寸下的表现。例如移动设备隐藏部分元素。
示例代码：

.footer-links {
  display: flex;
}
@media (max-width: 768px) {
  .footer-links {
    display: none;
  }
}