当前位置：首页 > CSS

css制作底部版权

2026-04-02 14:59:35CSS

使用CSS制作底部版权信息

在网页设计中，底部版权信息通常固定在页面底部，无论页面内容多少。可以通过以下方法实现：

固定定位法

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

Flexbox布局法

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

.content {
  flex: 1;
}

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

Grid布局法

body {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}

.footer {
  text-align: center;
  padding: 15px;
  background-color: #eee;
}

版权信息样式设计

版权信息的样式可以根据网站设计进行调整：

.copyright {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1200px;
}

.copyright a {
  color: #333;
  text-decoration: none;
}

.copyright a:hover {
  text-decoration: underline;
}

响应式处理

确保底部版权在不同设备上正常显示：

@media (max-width: 768px) {
  .footer {
    padding: 10px;
    font-size: 12px;
  }
}

HTML结构示例

配合上述CSS的HTML结构：

css制作底部版权

<footer class="footer">
  <div class="copyright">
    &copy; 2023 公司名称. 保留所有权利.
    <a href="/privacy">隐私政策</a> | 
    <a href="/terms">使用条款</a>
  </div>
</footer>

这些方法可以根据具体需求选择使用，固定定位适合简单页面，Flexbox和Grid布局更适合复杂页面结构。