Footer 页脚

实时预览

引入

<link rel="stylesheet" href="/tokens/tokens.css">
<link rel="stylesheet" href="/components/footer/footer.css">

代码

HTML

<!-- Footer Component — 页脚组件，3种变体: default/minimal/dark -->


<!-- Demo: Footer 组件 -->
<div style="background: var(--color-bg); padding: 20px; border-radius: var(--radius-lg);">
  <!-- 默认页脚 -->
  <footer class="footer footer--default" style="margin-bottom: 40px; border-radius: var(--radius-md);">
    <div class="footer__container">
      <!-- 品牌区域 -->
      <div class="footer__brand">
        <a href="#" class="footer__logo">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
            <path d="M2 17l10 5 10-5"></path>
            <path d="M2 12l10 5 10-5"></path>
          </svg>
          DesignLib
        </a>
        <p class="footer__description">
          一个现代化的设计系统，提供高质量的UI组件和设计令牌，帮助开发者快速构建美观的应用。
        </p>
        <div class="footer__social">
          <a href="#" class="footer__social-link">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
            </svg>
          </a>
          <a href="#" class="footer__social-link">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
            </svg>
          </a>
          <a href="#" class="footer__social-link">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
              <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"></path>
              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
            </svg>
          </a>
        </div>
      </div>
      
      <!-- 产品链接 -->
      <div class="footer__section">
        <h3 class="footer__title">产品</h3>
        <ul class="footer__links">
          <li><a href="#" class="footer__link">组件库</a></li>
          <li><a href="#" class="footer__link">设计系统</a></li>
          <li><a href="#" class="footer__link">模板</a></li>
          <li><a href="#" class="footer__link">更新日志</a></li>
        </ul>
      </div>
      
      <!-- 资源链接 -->
      <div class="footer__section">
        <h3 class="footer__title">资源</h3>
        <ul class="footer__links">
          <li><a href="#" class="footer__link">文档</a></li>
          <li><a href="#" class="footer__link">教程</a></li>
          <li><a href="#" class="footer__link">博客</a></li>
          <li><a href="#" class="footer__link">社区</a></li>
        </ul>
      </div>
      
      <!-- 公司链接 -->
      <div class="footer__section">
        <h3 class="footer__title">公司</h3>
        <ul class="footer__links">
          <li><a href="#" class="footer__link">关于我们</a></li>
          <li><a href="#" class="footer__link">联系我们</a></li>
          <li><a href="#" class="footer__link"> careers</a></li>
          <li><a href="#" class="footer__link">品牌</a></li>
        </ul>
      </div>
    </div>
    
    <div class="footer__bottom">
      <p class="footer__copyright">© 2024 DesignLib. 保留所有权利。</p>
      <div class="footer__legal">
        <a href="#" class="footer__legal-link">隐私政策</a>
        <a href="#" class="footer__legal-link">服务条款</a>
        <a href="#" class="footer__legal-link">Cookie政策</a>
      </div>
    </div>
  </footer>
  
  <!-- 极简页脚 -->
  <footer class="footer footer--minimal" style="margin-bottom: 40px; border-radius: var(--radius-md);">
    <div class="footer__container" style="grid-template-columns: 1fr auto;">
      <div class="footer__brand">
        <a href="#" class="footer__logo">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
            <path d="M2 17l10 5 10-5"></path>
            <path d="M2 12l10 5 10-5"></path>
          </svg>
          DesignLib
        </a>
      </div>
      
      <div class="footer__legal">
        <a href="#" class="footer__legal-link">隐私</a>
        <a href="#" class="footer__legal-link">条款</a>
        <a href="#" class="footer__legal-link">联系</a>
      </div>
    </div>
    
    <div class="footer__bottom" style="border-top: none; padding-top: 0; margin-top: var(--space-4);">
      <p class="footer__copyright">© 2024 DesignLib</p>
    </div>
  </footer>
  
  <!-- 暗色页脚 -->
  <footer class="footer footer--dark" style="border-radius: var(--radius-md);">
    <div class="footer__container">
      <!-- 品牌区域 -->
      <div class="footer__brand">
        <a href="#" class="footer__logo">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
            <path d="M2 17l10 5 10-5"></path>
            <path d="M2 12l10 5 10-5"></path>
          </svg>
          DesignLib
        </a>
        <p class="footer__description">
          一个现代化的设计系统，提供高质量的UI组件和设计令牌，帮助开发者快速构建美观的应用。
        </p>
        <div class="footer__social">
          <a href="#" class="footer__social-link">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
            </svg>
          </a>
          <a href="#" class="footer__social-link">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"></path>
            </svg>
          </a>
          <a href="#" class="footer__social-link">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
              <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"></path>
              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
            </svg>
          </a>
        </div>
      </div>
      
      <!-- 产品链接 -->
      <div class="footer__section">
        <h3 class="footer__title">产品</h3>
        <ul class="footer__links">
          <li><a href="#" class="footer__link">组件库</a></li>
          <li><a href="#" class="footer__link">设计系统</a></li>
          <li><a href="#" class="footer__link">模板</a></li>
          <li><a href="#" class="footer__link">更新日志</a></li>
        </ul>
      </div>
      
      <!-- 资源链接 -->
      <div class="footer__section">
        <h3 class="footer__title">资源</h3>
        <ul class="footer__links">
          <li><a href="#" class="footer__link">文档</a></li>
          <li><a href="#" class="footer__link">教程</a></li>
          <li><a href="#" class="footer__link">博客</a></li>
          <li><a href="#" class="footer__link">社区</a></li>
        </ul>
      </div>
      
      <!-- 公司链接 -->
      <div class="footer__section">
        <h3 class="footer__title">公司</h3>
        <ul class="footer__links">
          <li><a href="#" class="footer__link">关于我们</a></li>
          <li><a href="#" class="footer__link">联系我们</a></li>
          <li><a href="#" class="footer__link"> careers</a></li>
          <li><a href="#" class="footer__link">品牌</a></li>
        </ul>
      </div>
    </div>
    
    <div class="footer__bottom">
      <p class="footer__copyright">© 2024 DesignLib. 保留所有权利。</p>
      <div class="footer__legal">
        <a href="#" class="footer__legal-link">隐私政策</a>
        <a href="#" class="footer__legal-link">服务条款</a>
        <a href="#" class="footer__legal-link">Cookie政策</a>
      </div>
    </div>
  </footer>
</div>

CSS

/* Footer.css */
.footer {
  font-family: var(--font-sans);
  padding: var(--space-12) var(--space-6);
  transition: all var(--duration-normal) var(--ease-default);
}

/* ── 变体 ──────────────────────────── */
.footer--default {
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
}

.footer--minimal {
  background: transparent;
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) var(--space-6);
}

.footer--dark {
  background: var(--color-text);
  color: var(--color-text-inverse);
}

.footer--dark .footer__title,
.footer--dark .footer__link {
  color: var(--color-text-inverse);
}

.footer--dark .footer__link:hover {
  color: var(--color-primary-light);
}

.footer--dark .footer__description {
  color: rgba(255, 255, 255, 0.7);
}

/* ── 容器 ──────────────────────────── */
.footer__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-8);
}

/* ── 品牌区域 ──────────────────────── */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__logo {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__description {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  max-width: 300px;
}

.footer__social {
  display: flex;
  gap: var(--space-3);
}

.footer__social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all var(--duration-fast) var(--ease-default);
}

.footer__social-link:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
}

/* ── 链接区域 ──────────────────────── */
.footer__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-default);
}

.footer__link:hover {
  color: var(--color-primary);
}

/* ── 底部信息 ──────────────────────── */
.footer__bottom {
  max-width: 1200px;
  margin: var(--space-8) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer__copyright {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.footer__legal {
  display: flex;
  gap: var(--space-6);
}

.footer__legal-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-default);
}

.footer__legal-link:hover {
  color: var(--color-primary);
}

/* ── 响应式设计 ────────────────────── */
@media (max-width: 768px) {
  .footer__container {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
  
  .footer__legal {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: var(--space-8) var(--space-4);
  }
  
  .footer__legal {
    flex-direction: column;
    gap: var(--space-3);
  }
}

AI 使用说明

组件名: footer
选择器: .footer
依赖: /tokens/tokens.css
文件: /components/footer/footer.html