SneakerHub - 球鞋电商网站
一个现代化的球鞋电商网站首页，具有响应式设计和丰富的交互功能。
功能特性
🎨 设计特色
- 现代化UI设计 - 采用渐变色彩和卡片式布局
- 响应式设计 - 完美适配桌面、平板和手机设备
- 流畅动画效果 - 悬停效果、过渡动画和页面加载动画
- 专业配色方案 - 紫色渐变主题，营造高端购物氛围
🛍️ 电商功能
- 轮播图展示 - 自动轮播的主要商品展示区域
- 商品筛选 - 按类别筛选商品（全部、篮球鞋、跑步鞋、休闲鞋）
- 购物车功能 - 添加商品到购物车，实时更新数量
- 商品搜索 - 实时搜索商品名称和品牌
- 商品评分 - 显示商品评分和评价数量
🏢 品牌展示
- 热门品牌 - Nike、Adidas、Jordan、Converse等知名品牌
- 品牌logo展示 - 精美的品牌标识展示区域
🚀 用户体验
- 平滑滚动 - 导航栏点击平滑滚动到对应区域
- 悬停效果 - 商品卡片悬停时的3D变换效果
- 加载动画 - 页面加载时的淡入效果
- 交互反馈 - 按钮点击和操作的可视化反馈
文件结构
├── index.html # 主页面HTML结构
├── styles.css # CSS样式文件
├── script.js # JavaScript交互功能
└── README.md # 项目说明文档技术栈
- HTML5 - 语义化标签和现代HTML结构
- CSS3 - Flexbox、Grid布局、动画和响应式设计
- JavaScript ES6+ - 模块化编程和现代JavaScript特性
- Font Awesome - 图标库
- Unsplash - 高质量图片资源
主要组件
1. 导航栏 (Navbar)
- 固定顶部导航
- 搜索框功能
- 购物车图标和数量显示
- 滚动时背景透明度变化
2. 轮播图 (Hero Slider)
- 3张轮播图片
- 自动播放功能
- 手动控制按钮
- 圆点指示器
- 鼠标悬停暂停
3. 品牌展示 (Brands Section)
- 4个主要品牌展示
- 悬停动画效果
- 响应式网格布局
4. 商品展示 (Products Section)
- 6个精选商品
- 商品筛选功能
- 商品评分显示
- 价格对比显示
- 快速查看和加购物车按钮
5. 特色服务 (Features Section)
- 4个核心服务特色
- 图标和文字说明
- 悬停动画效果
6. 页脚 (Footer)
- 多列信息展示
- 社交媒体链接
- 联系信息
- 版权声明
使用方法
- 直接打开 - 在浏览器中打开
index.html文件 - 本地服务器 - 使用任何HTTP服务器托管文件
- 在线部署 - 上传到任何静态网站托管服务
浏览器兼容性
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
响应式断点
- 桌面端: 1200px+
- 平板端: 768px - 1199px
- 手机端: 320px - 767px
自定义配置
修改主题色彩
在 styles.css 中修改以下CSS变量：
/* 主色调 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* 强调色 */
background: #ff4757;添加新商品
在 index.html 的 .products-grid 中添加新的 .product-card 元素。
修改轮播图
在 index.html 的 .hero-slider 中添加新的 .slide 元素。
性能优化
- 图片懒加载
- CSS和JS文件压缩
- 使用CDN资源
- 响应式图片
未来扩展
- [ ] 用户登录/注册系统
- [ ] 商品详情页面
- [ ] 购物车页面
- [ ] 支付集成
- [ ] 用户评价系统
- [ ] 商品推荐算法
- [ ] 多语言支持
- [ ] 暗黑模式
许可证
MIT License - 可自由使用和修改
联系方式
如有问题或建议，请联系：
- 邮箱: service@sneakerhub.com
- 电话: 400-123-4567
SneakerHub - 专业的球鞋购物平台，为您提供最优质的球鞋购物体验。