尚品汇电商首页 - HTML/CSS仿写项目产品系统

该项目是一个电商平台首页的仿写练习，旨在通过实战演练巩固前端基础知识。页面模拟了主流电商网站的用户浏览场景，适用于电商平台的品牌展示和商品导购。项目包含顶部工具栏、主导航区、商品分类菜单、Banner广告位、秒杀促销区和楼层专区等模块，完整呈现了电商首页的信息架构

1. 顶部工具栏：展示"欢迎信息"、"请登录"、"免费注册"入口，以及"我的订单"、"我的购物车"、"我的尚品汇"、"会员中心"、"企业采购"、"关注尚品汇"、"合作招商"、"商家后台"等快捷导航链接；
2. 主导航区：左侧为网站Logo标识，右侧为搜索框（含搜索按钮），构成用户进入页面的第一视觉锚点；
3. 全部分类菜单：左侧展示16个一级商品分类（如"手机/运营商/数码"、"电脑/办公"、"家用电器"等），鼠标悬停时右侧展开对应的二级分类子菜单，每个二级分类包含若干个商品品类链接；
4. Banner广告位：主内容区中央展示促销宣传大图，用于品牌活动或商品推广；
5. 尚品快报：Banner右侧展示资讯列表，包含多条促销信息滚动展示；
6. 快捷入口：快报下方展示话费充值、游戏、彩票、众筹、加油卡等多个快捷功能入口；
7. 秒杀促销区：展示限时秒杀活动入口及多张促销商品宣传图；
8. 楼层专区：共两层，每层包含品类导航（如"热门"、"大家电"、"生活电器"、"厨房电器"等标签）和对应的商品推荐卡片区，卡片按网格布局排列；
9. 页脚导航：包含购物指南、配送方式、支付方式、售后服务、特色服务、自营覆盖区县等六大类信息链接，以及底部版权声明。

本项目纯前端实现，未使用任何第三方框架或库，全部代码手写完成。
HTML部分：采用HTML5语义化标签（如header、nav、main、section、footer）构建页面骨架，使用ul/li列表结构实现导航菜单和商品分类的层级嵌套，通过a标签模拟页面路由跳转入口。
CSS部分：采用"重置样式+自定义样式"的两层结构，先通过reset.css统一浏览器默认样式，再通过index.css进行精细化的页面布局和样式设计。布局方面综合运用了多种技术：
- Flex弹性布局：实现主导航区搜索框的对齐、商品卡片行的水平排列、页脚多列链接的均匀分布；
- 浮动布局（float）：实现顶部工具栏左右分区（左浮动+右浮动）、版心容器内多列内容的并排排列；
- 定位布局（position）：使用"子绝父相"（子元素absolute定位，父元素relative定位）实现侧边栏二级分类菜单的悬停展开效果，以及页面中角标（如"NEW"、"首发"标签）的悬浮定位；
- 伪类选择器（hover）：为分类菜单、商品卡片、导航链接等元素添加鼠标悬停样式变化（如背景色变化、卡片上浮、阴影效果等），提升交互反馈；
- CSS过渡（transition）：为轮播图切换和卡片悬停添加平滑动画效果。
交互逻辑：分类菜单通过hover伪类控制二级面板的display属性切换（hover时显示/移出时隐藏），模拟真实电商网站的导航交互体验；搜索框获得焦点时边框高亮反馈。
项目整体采用"通栏+版心（container）"的经典布局模式——顶部导航条为通栏背景，内部用版心包裹并左右分区；主内容区同样使用版心约束宽度，通过浮动实现左侧分类菜单、中间Banner、右侧快报的三列并排；楼层和页脚区域沿用版心统一管理。全页面使用clearfix工具类清除浮动，防止父容器高度塌陷。