当前位置：首页 > CSS

页脚css制作

2026-02-13 02:00:32CSS

页脚CSS制作方法

固定页脚在页面底部
使用position: fixed将页脚固定在视窗底部，适用于需要常驻显示的页脚。

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

响应式页脚布局
通过Flexbox实现自适应布局，确保内容区域自动扩展。

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

多列页脚设计
使用CSS Grid创建包含多个信息区块的页脚。

页脚css制作

footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  background: #2c3e50;
  padding: 30px 10%;
}
.footer-column {
  color: #ecf0f1;
}

粘性页脚解决方案
通过负边距技术确保页脚始终停留在内容下方。

.wrapper {
  min-height: 100%;
  margin-bottom: -50px; /* 页脚高度 */
}
.push {
  height: 50px; /* 页脚高度 */
}
footer {
  height: 50px;
  background: #34495e;
}

页脚样式增强技巧

添加顶部边框和阴影

页脚css制作

footer {
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

社交媒体图标排列

.social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.social-icon {
  width: 32px;
  height: 32px;
  transition: transform 0.3s;
}
.social-icon:hover {
  transform: scale(1.2);
}

版权信息样式

.copyright {
  font-size: 0.9em;
  opacity: 0.8;
  margin-top: 15px;
}

移动端适配方案

触摸友好设计
增大点击区域并调整间距

@media (max-width: 768px) {
  footer {
    padding: 15px 5%;
  }
  .footer-column {
    margin-bottom: 20px;
  }
  .footer-links a {
    display: block;
    padding: 8px 0;
  }
}