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、留言交流！