一、实验过程
1. 准备项目结构与素材
创建项目文件夹，在文件夹内新建 `image` 文件夹，分类存放所需图片素材：`banner` 文件夹（轮播背景图）、`phone`/`wear`/`tablet`/`computer`/`audio`/`smart home`/`smart travel` 文件夹（各板块产品图）、`new` 文件夹（新品下拉菜单产品图）、`category` 文件夹（分类导航图标）、`commen` 文件夹（通用图标和logo）。使用 VS Code 打开项目文件夹，新建 `home.html`、`CSS/homeCss.css`、`JavaScript/homeJavaScript.js` 文件。
2. 绘制布局线框图
创建 `buj.html` 文件，使用纯黑色线条和灰色占位块绘制页面线框图，按照实际尺寸还原 Header、Banner、分类导航、8个产品板块、Footer 和下拉菜单的位置、大小、层级关系，仅展示结构不包含具体内容。
3. 构建 HTML5 标准骨架
输入英文 `!` 快速生成 HTML5 基础结构，设置页面语言为 `zh-CN`、字符编码为 UTF-8，添加视口适配标签，在 `<head>` 中引入 `homeCss.css` 样式文件，在 `<body>` 结束前引入 `homeJavaScript.js` 脚本文件。
4. 创建页面整体结构
在 `<body>` 内依次创建 `<header>`（顶部导航栏）、`<section class="banner">`（轮播横幅）、`<section class="category-nav">`（分类导航）、多个 `<section class="product-section">`（产品板块：甄选推荐、手机、穿戴、平板、电脑、音频、智能家居、鸿蒙智行）、`<footer>`（页脚）。
5. 搭建顶部导航栏结构
在 `<header>` 内创建 `.header-left`（Logo区域）、`.header-nav`（导航菜单，包含新品下拉菜单结构）、`.header-right`（用户/购物车/消息图标和搜索框），完成导航栏布局搭建。
6. 构建轮播横幅结构
在 `.banner` 内创建 `.banner-slides`（轮播图片容器，包含4个 `.banner-slide`）、左右箭头按钮 `.banner-arrow`、底部指示器 `.banner-indicators`，实现轮播基础结构。
7. 搭建分类导航结构
在 `.category-nav` 内创建 `.category-items`，包含9个 `.category-item`，每个包含图标和文字描述，完成分类导航区域。
8. 构建产品板块结构
每个产品板块包含 `.section-header`（标题和"更多"按钮）、部分板块包含 `.phone-banner`（大图片横幅）、`.product-scroll-container`（产品滚动容器，包含滚动箭头和5个产品卡片），产品卡片包含标题、描述、价格、图片占位。
9. 搭建页脚结构
在 `<footer>` 内创建 `.footer-service`（服务保障区域，4个服务项）、`.footer-content`（5列布局，包含4个链接列表和1个客服区域）、`.footer-bottom`（品牌信息和版权声明），完成页脚布局。
10. 构建新品下拉菜单结构
在导航菜单的"新品"项内创建 `.dropdown-menu`，包含 `.dropdown-left`（7个分类列表）、`.dropdown-close`（关闭按钮）、`.dropdown-right`（7个新品板块，每个包含标题和产品列表），实现全屏下拉菜单结构。
11. 初始化全局样式
在 `homeCss.css` 中使用通配符 `*` 清除默认内外边距，设置 `box-sizing: border-box` 统一盒模型，设置基础字体和背景色。
12. 设置页面基础布局
为 `.container` 设置最大宽度 1400px、居中对齐，为各区域设置固定高度（Header 60px、Banner 550px）和内边距，确保页面整体结构稳定。
13. 设置各模块样式
依次设置 Header 布局（flex 三栏分布）、Banner 样式（背景图、箭头、指示器）、分类导航样式（flex 均匀分布）、产品板块样式（横幅、卡片网格、滚动容器）、Footer 样式（网格布局、服务项、链接列表）、下拉菜单样式（全屏定位、左右分栏、分类高亮）。
14. 实现交互功能
在 `homeJavaScript.js` 中实现：Banner 自动轮播与手动切换、产品横向滚动、下拉菜单显示/隐藏、分类联动高亮、搜索框 placeholder 轮播、搜索跳转、返回顶部按钮等交互功能。
15. 保存并运行预览
保存全部代码，在浏览器中打开 `home.html`，验证各板块布局正确、图片显示正常、滚动功能可用、交互逻辑无误。
二、布局图
1.整体布局图
2.顶部新品竖直导航布局图
三、实验结果分析与讨论
1. CSS 样式表与图标应用
本项目熟练运用外部 CSS 样式表进行页面美化，通过 `homeCss.css` 文件统一管理所有样式规则。使用通配符选择器清除默认样式，通过类选择器、属性选择器、伪类选择器等实现精准样式控制。图标采用 `<img>` 标签引入 PNG 格式图片，包括用户、购物车、消息、搜索等功能性图标，以及各产品分类图标，通过设置固定宽高（如 24px×24px）保持视觉统一。
2. 水平导航与显示隐藏菜单
顶部导航栏采用水平布局，通过 `flex` 实现三栏分布：左侧 Logo、中间导航菜单、右侧图标和搜索框。导航菜单包含 16 个分类项，水平排列间距 30px。**鼠标悬停在"新品"上时，触发全屏下拉菜单显示效果**：菜单从顶部 60px 位置展开，宽度占满整个屏幕（100vw），左侧显示 7 个分类列表（手机新品、穿戴新品、平板新品等），右侧展示对应分类的产品图片和名称。当鼠标移出下拉菜单区域时，菜单自动隐藏。下拉菜单通过 `.dropdown:hover .dropdown-menu` 选择器结合 `display: none/flex` 实现显示隐藏切换，左侧分类支持点击高亮和滚动联动效果。
3. CSS 轮播图动画
Banner 轮播区域采用 CSS 动画实现图片切换效果。4 张背景图片通过 `.banner-slide` 设置 `position: absolute` 定位叠加，使用 `opacity: 0/1` 配合 `transition: opacity 0.5s ease` 实现淡入淡出过渡动画。底部指示器通过 `.indicator.active` 类切换显示当前轮播位置，宽度 30px、高度 3px，间距 15px。左右箭头按钮在鼠标悬停 Banner 时通过 `opacity` 从 0 变为 1 显示，配合圆形边框和半透明背景增强视觉效果。轮播切换通过 JavaScript 控制类名切换，但动画过渡效果完全由 CSS 实现。
4. 网格布局与 Flex-box 布局
页面大量使用 Flex-box 布局实现灵活排版：Header 采用 `display: flex` 实现三栏自适应分布，导航菜单通过 `justify-content: center` 居中对齐；分类导航使用 `justify-content: space-around` 实现 9 个图标均匀分布；产品滚动区域通过 `flex` 实现横向滚动卡片布局。Footer 内容区采用 Grid 网格布局，设置 `grid-template-columns: repeat(5, 1fr)` 实现 5 列等宽分布，间距 30px，配合 `gap` 属性控制列间距。页面还通过媒体查询 `@media (max-width: 1024px/768px/480px)` 实现响应式适配，在不同屏幕宽度下调整导航间距、产品网格列数、Footer 布局等。
5. 网页特效与过渡动画
项目运用多种 CSS 特效增强交互体验：产品卡片悬停时通过 `transform: translateY(-4px)` 实现上浮效果，配合 `box-shadow` 变化增强立体感；导航链接悬停通过 `color` 和 `transition: color 0.3s ease` 实现颜色渐变；下拉菜单分类项悬停时颜色从 #666 变为 #cf0a2c，配合 `transition` 实现平滑过渡；按钮悬停时背景色加深，搜索框圆角边框、产品卡片圆角边框（16px）等均通过 CSS 圆角属性美化；下拉菜单关闭按钮（×）通过 `position: fixed` 固定定位，不随内容滚动移动。整体页面通过过渡动画、阴影效果、圆角设计等 CSS 特效，实现了流畅、美观的用户交互体验
源代码私聊