Three.js + React 实战系列 - 页脚区域 Footer 组件 ✨

对个人主页设计和实现感兴趣的朋友可以订阅我的专栏哦！！谢谢大家！！！

为个人主页画上完美句号：设计一个美观实用的页脚组件

---

在完成 Hero、About、Projects、Contact 等模块后，我们为整个页面添上最后一笔——Footer 页脚组件。虽然它位于页面最底部，承载着版权信息、隐私条款、社交链接等重要内容，也是网站专业性与细节打磨的体现。

🔧 Footer 功能设计

• ✅ 显示网站政策：展示 “Terms & Conditions” 和 “Privacy Policy”
• ✅ 插入社交媒体图标：GitHub、Twitter、Instagram
• ✅ 展示版权声明文字
• ✅ 响应式布局：内容随屏幕尺寸自动调整排列

✨ 组件结构预览

<footer className="c-space pt-7 pb-3 border-t border-black-300 flex justify-between items-center flex-wrap gap-5">
  {/* 左侧政策条款 */}
  <div className="text-white-500 flex gap-2">
    <p>Terms & Conditions</p>
    <p>|</p>
    <p>Privacy Policy</p>
  </div>

  {/* 中间社交图标 */}
  <div className="flex gap-3">
    <div className="social-icon">
      <img src="/assets/github.svg" alt="github" className="w-1/2 h-1/2" />
    </div>
    <div className="social-icon">
      <img src="/assets/twitter.svg" alt="twitter" className="w-1/2 h-1/2" />
    </div>
    <div className="social-icon">
      <img src="/assets/instagram.svg" alt="instagram" className="w-1/2 h-1/2" />
    </div>
  </div>

  {/* 右侧版权声明 */}
  <p className="text-white-500">© 2025 SunByte. All rights reserved.</p>
</footer>

🎨 样式解析

• c-space：保持页面两边间距一致，统一整体排版风格
• border-t border-black-300：顶部边框营造区块区分
• flex justify-between flex-wrap：使页脚内容在小屏设备下可自动换行排列
• text-white-500：保持灰白色系，保持视觉层次一致性
• .social-icon：你可在 globals.css 中定义此类，设置统一宽高、hover 效果等

📱 响应式优化技巧

• 采用了 flex-wrap 与 gap-5 配合布局，确保当空间不足时，三个部分自动换行并维持间距，避免布局错乱。

• 如有更复杂的交互需求（比如跳转链接、hover 动效），可以进一步增强 <img> 图标部分的交互性，或将其封装为 Link 组件。

---

✅ 总结

在本节课中，我们快速搭建了一个对齐合理、信息全面、视觉统一的页脚模块，为整个网页画上完美句号。

至此，我们的个人主页项目也宣告圆满完成！感谢你一路学习与探索，下一篇博客将为你总结项目与部署上线建议，敬请期待！

---

📦 项目源码已同步至 GitCode 和 Github，欢迎 Star ⭐、Fork、留言交流！