当前位置：首页 > CSS

css页尾制作

2026-04-02 04:16:21CSS

CSS页尾制作方法

固定定位页尾
使用position: fixed将页尾固定在页面底部，适用于需要页尾始终可见的场景：

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

弹性布局页尾
通过Flexbox布局确保页脚始终位于容器底部，适合内容不足时仍保持页脚在底部：

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

网格布局页尾
使用CSS Grid创建响应式页脚布局：

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  background: #2c3e50;
  color: white;
  padding: 2rem;
}

粘性页尾解决方案
当内容不足时自动将页脚推至视口底部：

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

响应式页脚设计
添加媒体查询实现不同屏幕尺寸下的布局变化：

footer {
  display: flex;
  flex-wrap: wrap;
  padding: 30px 5%;
}
.footer-section {
  flex: 1 0 200px;
  margin: 10px;
}
@media (max-width: 768px) {
  .footer-section {
    flex-basis: 100%;
    text-align: center;
  }
}

页尾内容样式

版权信息样式
为页脚添加专业的版权信息展示：

.copyright {
  font-size: 0.9em;
  opacity: 0.8;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 15px;
  margin-top: 20px;
}

社交图标布局
在页脚中整齐排列社交媒体图标：

.social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.social-icon:hover {
  transform: translateY(-3px);
}

导航链接样式
为页脚导航菜单添加特殊样式：

css页尾制作

.footer-nav ul {
  list-style: none;
  padding: 0;
}
.footer-nav li {
  margin-bottom: 10px;
}
.footer-nav a {
  color: #ddd;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-nav a:hover {
  color: white;
}