案例6-2 电商首页（中级进阶）
需求定位：构建包含"导航栏+轮播图+商品列表+页脚"的多模块电商页面，重点实现复杂布局与交互效果。
核心技术突破：
- Grid布局应用：商品列表采用
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))实现自适应列数，结合grid-auto-rows: minmax(300px, auto)控制行高，解决Flexbox在二维布局中的局限性：
css
复制代码
.product-grid {
display: grid; /* Grid布局，对应第三章高级布局技术 */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
padding: 0 1rem;
}- 响应式设计体系：设置三级断点（移动端<768px、平板768px-1024px、桌面>1024px），通过媒体查询调整导航显示（汉堡菜单/完整菜单）、轮播图尺寸、商品卡片布局：
css
复制代码
@media (max-width: 768px) { /* 响应式断点设计，对应第四章适配技术 */
.nav-full { display: none; } /* 隐藏完整导航 */
.nav-hamburger { display: block; } /* 显示汉堡菜单 */
.carousel { height: 200px; } /* 调整轮播图高度 */
}- 基础动画实现：商品卡片添加hover效果（边框变色+轻微上浮），通过
transition控制动画过渡，transform实现位移变换：
css
复制代码
.product-card {
transition: all 0.3s ease; /* 动画触发逻辑：hover时触发所有属性过渡 */
}
.product-card:hover {
border-color: #ff6b6b;
transform: translateY(-5px); /* Y轴上移5px，产生上浮效果 */
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}模块设计：页面包含五大功能模块——顶部导航栏（含搜索框与用户入口）、全屏轮播图（自动切换+指示器）、分类导航区（图标+文字）、商品列表区（Grid布局）、页脚信息区（多列布局），各模块通过语义化标签独立封装。