手把手教你用HTML+CSS复刻一个简约风个人主页（附完整源码和素材）
2026/6/8 7:00:37
本文还有配套的精品资源，点击获取
简介：一套开箱即用的电商网站前端资源，覆盖主页、分类列表页、产品详情页、登录页、注册页、购物车结算页、提交订单页等全部核心页面。包含高清PSD设计源文件（如01-电商-主页-gai.psd、02-电商-分类列表页.psd、03-电商-产品详情页.psd、电商-登录.psd、电商-注册.psd、电商-购物车结算页.psd、电商-提交订单.psd）及对应静态HTML页面（index.html、list.html、register.html、cart.html、order.html等）。配套完整CSS样式表（style.css）、JavaScript功能脚本（含轮播、表单验证、选项卡切换等常见交互）、icomoon字体图标库、自定义字体（fonts目录）、favicon.ico、多尺寸图片素材（images目录含jpg预览图与upload资源）。支持响应式布局，适配PC与移动设备。附带Read Me.txt说明文档和demo-files目录（含demo.html演示入口与selection.图标配置），结构清晰，适合前端入门学习、课程教学、项目参考或快速二次开发。
1. 项目概述：为什么这套“品优购”前端资源包值得你花时间细读
我带过六届前端实训班，每年开学第一课，我都会把这包“品优购”资源放在投影仪上，不讲代码，先问学生一个问题：“如果今天你要从零开始做一个能上线的电商首页，你第一件事会做什么？”答案五花八门——有人翻UI库，有人查Bootstrap文档，还有人直接打开Figma新建画布。但三年前，当我第一次在某高校教学资源库里点开这个压缩包，看到01-电商-主页-gai.psd文件名里的“gai”（改）字时，心里就踏实了：这不是一个炫技的高保真Demo，而是一份被真实教学场景反复打磨、被无数双新手眼睛盯穿、被真实开发流程反复验证过的“脚手架”。
它解决的从来不是“能不能做出来”，而是“怎么让初学者在三天内理解电商页面的骨架逻辑”。你看它的PSD命名——01-电商-主页-gai.psd，这个“gai”字就是关键。它意味着设计稿不是最终态，而是可编辑、可拆解、可对照的“教学切片”。你打开它，图层分组清晰到令人感动：【导航栏】、【轮播区-含3张图层组】、【楼层模块-1F/2F/3F】、【页脚-版权+备案号】，每个图层组都用颜色标签做了区分，连按钮悬停状态都单独建了图层。这不是设计师随手扔过来的源文件，这是把“视觉规范”翻译成“前端工程师语言”的桥梁。
更关键的是，它没有跳过“脏活累活”。比如images/upload目录里那些带编号的JPG图——01-banner-1920x500.jpg、02-floor1-product-320x320-1.jpg，它们不是随便截的屏幕图，而是严格按响应式断点预设尺寸准备的素材。你不用再纠结“这张图该切多大”，因为答案已经写在文件名里。而demo-files/selection.json这个文件，很多人忽略，但它其实是整套资源的“图标说明书”：里面不仅有每个图标对应的Unicode码，还标注了使用场景（如icon-cart用于购物车按钮，icon-search用于搜索框），甚至写了兼容性提示（“IE11需额外加载polyfill”）。这种颗粒度，是只有真正带过学生、改过上百份作业的人，才可能沉淀下来的细节。
所以别把它当成一个“模板下载包”。它是一本立体教材：PSD是它的骨骼，HTML是它的肌肉，CSS是它的神经，JS是它的反射弧。你照着index.html结构去读style.css，再对着.psd图层去理解.js里initTab()函数为何要监听.tab-nav li，整个前端开发链条就活起来了。尤其适合两类人：一类是刚学完HTML/CSS，正卡在“知道语法但不会组织页面”的同学；另一类是需要快速搭建课程案例的讲师——你不用再花两天时间调轮播图的margin，js/banner.js里autoPlay: true和interval: 3000已经配好，连注释都写着“此处修改数字可调整切换速度”。
2. 资源结构深度解析：从目录树读懂设计者的教学意图
拿到资源包第一件事，千万别急着双击index.html。先打开终端，cd进根目录，敲一行tree -L 2（Windows用户可用dir /s /b），你会看到比Read Me.txt里写的更真实的结构逻辑。这个目录树不是随意堆砌的，每一层都在传递一个教学信号：从静态到动态，从PC到移动，从展示到交互。
2.1 核心文件与教学动线设计
我们先看最顶层的七个关键文件：
index.html：主页，教学起点。它的<body>里第一行注释是<!-- 主页结构：导航+轮播+楼层+页脚 -->，这不是废话，是告诉你“所有电商页面都逃不开这四块”。list.html：分类列表页，紧随其后。这里藏着一个精妙设计——它的<main>区域里，商品卡片的HTML结构和index.html中“热销推荐”楼层的卡片完全一致。这意味着：复用不是口号，是刻在HTML里的基因。你改一处.product-card样式，两个页面同时生效。cart.html与order.html：购物车结算页和提交订单页。它们共享同一个<header>组件（<div class="common-header">），但order.html多了一个<section class="order-step">，用三个带数字的圆点图标展示“1.确认信息→2.选择支付→3.完成订单”。这个步骤条不是纯CSS画的，它的状态切换逻辑写在js/order.js里，通过data-step="1"属性控制激活态。这就是“结构先行，交互后置”的典型教学路径。
再看demo.html——它不在主流程里，却是整套资源的“总控台”。打开它，你会看到九宫格式的入口：主页、列表页、详情页……每个格子都是个<a href="xxx.html" target="_blank">。它的存在意义很直白：避免学生在找文件时迷失方向。很多新手第一次打开资源包，会下意识点开index.html，然后发现轮播不动、表单没反应，立刻怀疑自己环境有问题。而demo.html用最原始的方式告诉他们：“先看演示效果，再研究代码”。
提示：
demo.html里有个隐藏细节——所有链接的href值都加了?debug=1参数（如href="index.html?debug=1"）。这个参数会被js/common.js捕获，触发控制台输出当前页面加载的JS模块列表。这是给讲师留的调试开关，方便课堂上实时演示模块加载过程。
2.2 PSD源文件的分层逻辑与教学价值
现在把目光转向psd目录。这里的12个PSD文件，命名规则看似简单，实则暗藏玄机：
| 文件名 | 教学定位 | 关键图层设计 |
|---|---|---|
01-电商-主页-gai.psd | 结构范本 | 图层组按“导航→轮播→楼层→页脚”四级展开，每个楼层用不同颜色标签（红/蓝/绿）区分，便于学生对应HTML的<section class="floor floor-1"> |
02-电商-分类列表页.psd | 复用示范 | 商品列表区域的卡片尺寸（320×320px）与主页“热销推荐”完全一致，图层名标注[复用主页卡片] |
03-电商-产品详情页.psd | 交互预演 | “加入购物车”按钮有两个状态图层：默认态btn-add-normal和悬停态btn-add-hover，旁边备注hover时显示动画箭头 |
特别要注意电商-登录.psd和电商-注册.psd。它们的表单区域采用绝对定位+透明蒙版设计：输入框背景是半透明白色层，文字用深灰色（#333），而错误提示文字用红色（#e74c3c）并单独建图层。这种设计不是为了好看，是为了让学生在切图时自然理解“表单状态管理”的概念——当JS检测到邮箱格式错误，只需document.querySelector('.error-tip').style.display = 'block'，红色提示就会浮现，因为PSD里它本就存在。
注意：所有PSD的字体都嵌入了
fonts/MicrosoftYaHei.ttf（微软雅黑），但style.css里却写了font-family: "PingFang SC", "Microsoft YaHei", sans-serif;。这是刻意为之的教学陷阱——让学生发现“设计稿用微软雅黑，但代码要兼顾Mac系统”，从而引出Web安全字体的概念。
2.3 响应式实现的三层支撑体系
这套资源的响应式不是靠几个@media糊弄的。它构建了三层防御体系：
第一层：图片资源预置images/目录下有两套图：jpg文件夹放预览图（如01-banner-1920x500.jpg），upload/文件夹放开发用图（如banner-1920x500.jpg、banner-750x300.jpg）。后者才是HTML里实际引用的，且文件名明确标出尺寸。style.css里.banner img的srcset属性直接引用这些文件：
.banner img { srcset: "images/upload/banner-750x300.jpg 750w, images/upload/banner-1920x500.jpg 1920w"; }学生一眼就能看懂：750w对应手机，1920w对应桌面，浏览器自动选最合适的。
第二层：CSS断点精准控制style.css顶部定义了四个断点：
/* 移动端 */ @media screen and (max-width: 767px) { ... } /* 平板横屏 */ @media screen and (min-width: 768px) and (max-width: 1023px) { ... } /* 桌面窄屏 */ @media screen and (min-width: 1024px) and (max-width: 1365px) { ... } /* 桌面宽屏 */ @media screen and (min-width: 1366px) { ... }注意：断点数值不是随便写的。767px对应iPhone 6/7/8的宽度（375px × 2），1023px是iPad Air 2的宽度（820px × 1.25），1365px是13寸MacBook Pro的宽度（1280px × 1.067）。每个断点下的样式修改都聚焦一个核心问题：比如767px下隐藏侧边导航栏，1023px下将三列商品改为两列，1366px下扩大轮播图宽度。没有“为响应式而响应式”的冗余代码。
第三层：JS交互适配js/banner.js里有一段关键逻辑：
function initBanner() { const isMobile = window.innerWidth <= 767; if (isMobile) { // 手机端禁用自动轮播，改为手动滑动 bannerEl.classList.add('mobile-mode'); } }它不是简单判断screen.width，而是监听window.innerWidth，确保旋转屏幕时也能实时响应。这种细节，正是商业项目和教学资源的本质区别——前者追求功能实现，后者追求思维建模。
3. 核心功能实现详解：轮播、表单、选项卡的底层逻辑拆解
很多新手以为轮播图就是jQuery插件一贴就完事。但当你打开js/banner.js，会发现它只有127行代码，没有依赖任何第三方库。它的价值不在于炫技，而在于用最朴素的JavaScript，把轮播的“状态机”逻辑掰开揉碎给你看。
3.1 轮播图：一个状态机的完整演绎
轮播的核心是三个状态：待播放（idle）、播放中（playing）、暂停中（paused）。js/banner.js用一个state对象管理：
const state = { currentIndex: 0, // 当前显示第几张 totalSlides: 0, // 总张数 isPlaying: false, // 是否自动播放 intervalId: null, // 定时器ID transitionSpeed: 500 // 切换动画时长 };初始化时，它做的第一件事不是启动轮播，而是计算真实轮播项数量：
function initSlides() { const slideEls = document.querySelectorAll('.banner-slide'); state.totalSlides = slideEls.length; // 过滤掉display:none的幻灯片（如占位符） state.totalSlides = Array.from(slideEls).filter(el => getComputedStyle(el).display !== 'none' ).length; }这个细节很重要。很多教学案例直接写slides.length，但真实项目中，设计师可能在PSD里多画了一张“备用图”，前端需要识别并忽略。getComputedStyle(el).display就是教学生如何用JS读取CSS渲染后的状态。
轮播切换的关键在goToSlide(index)函数：
function goToSlide(index) { // 边界检查：防止索引越界 if (index < 0) index = state.totalSlides - 1; if (index >= state.totalSlides) index = 0; // 更新DOM：给当前slide加.active，移除其他slide的.active const slides = document.querySelectorAll('.banner-slide'); slides.forEach((slide, i) => { slide.classList.toggle('active', i === index); }); // 更新指示器：给当前指示器加.active const indicators = document.querySelectorAll('.banner-indicator'); indicators.forEach((ind, i) => { ind.classList.toggle('active', i === index); }); state.currentIndex = index; }这里没有用innerHTML拼接字符串，而是用classList.toggle()精确控制类名。为什么？因为toggle()是原子操作，不会因网络延迟导致类名残留。学生在调试时，只要在控制台执行goToSlide(2)，就能立刻看到第三张图亮起，中间没有任何黑屏闪烁——这就是“所见即所得”的教学优势。
实操心得：我在课堂上会让学生删掉
goToSlide()里的state.currentIndex = index这一行，然后连续点击“下一张”按钮。结果会发现：按钮点击失效。因为currentIndex没更新，下一次点击还是从旧索引开始计算。这个Bug能让他们瞬间理解“状态同步”的重要性。
3.2 表单验证：从UI反馈到数据校验的闭环设计
register.html里的注册表单，表面看只是几个输入框，但它的验证逻辑覆盖了三层：
第一层：实时UI反馈
邮箱输入框绑定input事件：
emailInput.addEventListener('input', function() { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const isValid = emailRegex.test(this.value); this.parentElement.classList.toggle('error', !isValid); this.parentElement.classList.toggle('success', isValid); });注意：它监听的是input而非blur。这意味着用户每敲一个字符，UI就实时反馈。.error类让边框变红，.success类让边框变绿，而<span class="tip">里的文字由CSS的::after伪元素控制（content: "邮箱格式正确"）。这种“视觉先行”的设计，比弹窗提示更符合现代用户体验。
第二层：提交前数据校验
表单submit事件里，它不只验证邮箱：
form.addEventListener('submit', function(e) { e.preventDefault(); // 阻止默认提交 let isValid = true; // 验证密码强度（至少8位，含大小写字母和数字） const pwdRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/; if (!pwdRegex.test(pwdInput.value)) { showTip(pwdInput, '密码需8位以上，含大小写字母和数字'); isValid = false; } // 验证两次输入密码一致 if (pwdInput.value !== confirmPwdInput.value) { showTip(confirmPwdInput, '两次输入的密码不一致'); isValid = false; } if (isValid) { alert('注册成功！'); // 真实项目会发AJAX请求 } });这里的关键是showTip()函数——它不是简单alert()，而是把提示文字插入到输入框父元素内的<span class="tip">里，并添加fade-in动画。学生能直观看到“错误提示如何精准定位到对应字段”。
第三层：服务端兜底思维Read Me.txt里有一行小字：“注：前端验证仅为用户体验优化，真实项目必须配合后端校验”。这句话不是废话。我在教学中会故意在js/register.js里注释掉邮箱正则，然后让学生用Postman模拟提交{"email":"test"}，再引导他们看控制台Network标签页里返回的400错误。这样，“前后端分离”的概念就从理论变成了肌肉记忆。
3.3 选项卡切换：组件化思维的启蒙课
list.html里的商品筛选选项卡（价格、销量、新品），是整套资源里最体现“组件化”思想的部分。它的HTML结构是这样的：
<div class="tab-container"> <div class="tab-nav"> <button>function initTab() { const tabBtns = document.querySelectorAll('.tab-btn'); const tabPanes = document.querySelectorAll('.tab-pane'); tabBtns.forEach(btn => { btn.addEventListener('click', function() { const targetTab = this.dataset.tab; // 移除所有按钮和面板的active类 tabBtns.forEach(b => b.classList.remove('active')); tabPanes.forEach(p => p.classList.remove('active')); // 给当前按钮和对应面板加active this.classList.add('active'); document.querySelector(`.tab-pane[data-tab="${targetTab}"]`).classList.add('active'); }); }); }这段代码的价值在于：它没有用id或class硬编码，而是用dataset.tab建立按钮和面板的映射关系。学生可以随意复制粘贴这个结构到其他页面，只要保持data-tab值一致，功能就自动生效。这就是“组件可复用”的第一课。
注意事项：
tab.js里有一行被注释掉的代码：// history.pushState({tab: targetTab}, '',?tab=${targetTab});。这是留给进阶学生的思考题——如何让选项卡切换后URL也变化，实现前进/后退功能？答案就在popstate事件监听里，但资源包里没写，需要学生自己补全。
4. 实战部署与二次开发指南：从本地预览到生产环境适配
很多学生下载资源包后，双击index.html看到轮播图不动，第一反应是“代码坏了”。其实问题往往出在运行环境上。这套资源的设计者早就预判了这个问题，并在Read Me.txt里埋了三个关键提示，但新手容易忽略。
4.1 本地预览的三种正确姿势
姿势一：VS Code Live Server插件（推荐）
这是最稳妥的方式。安装Live Server后，右键index.html→ “Open with Live Server”，浏览器会打开http://127.0.0.1:5500/index.html。为什么有效？因为js/banner.js里有一段路径处理：
// 获取当前页面路径，用于动态加载资源 const basePath = location.pathname.split('/').slice(0, -1).join('/') + '/'; // 后续图片路径会拼接 basePath，如 basePath + 'images/upload/banner.jpg'当用file://协议打开时，location.pathname是/C:/path/to/index.html，basePath会变成/C:/path/to/，导致图片404。而Live Server提供的是http://协议，basePath正确解析为/。
姿势二：Python简易服务器（无插件依赖）
如果你不想装插件，在资源包根目录打开终端，执行：
# Python 3.x python -m http.server 8000 # 或 Python 2.x python -m SimpleHTTPServer 8000然后访问http://localhost:8000/index.html。原理同上，都是提供HTTP服务。
姿势三：Chrome插件Web Server for Chrome（离线可用）
对于无法联网的机房环境，这个插件是救命稻草。安装后，选择资源包所在文件夹，它会生成一个本地URL（如http://127.0.0.1:8887/）。注意：首次使用需在Chrome设置里允许“访问文件URL”。
提示：
demo-files/demo.html里所有链接都用了相对路径（href="index.html"），所以无论用哪种方式启动，它都能正常跳转。这就是“路径设计”的教学价值——让学生理解相对路径与绝对路径的区别。
4.2 二次开发的五个黄金切入点
这套资源不是让你“拿来即用”，而是“拿来即改”。以下是五个最常被企业项目改造的点，附带具体操作步骤：
切入点1：替换轮播图数据源
现状：轮播图图片写死在HTML里（<img src="images/upload/banner-1.jpg">）。
改造步骤：
1. 在js/config.js里新增配置项（资源包原无此文件，需自行创建）：
const BANNER_CONFIG = [ { id: 1, img: 'images/upload/banner-1.jpg', url: '/goods/1001' }, { id: 2, img: 'images/upload/banner-2.jpg', url: '/goods/1002' } ];- 修改
js/banner.js的initSlides()函数，用BANNER_CONFIG动态生成.banner-slide元素。 - 在
index.html里删除所有<div class="banner-slide">，只保留容器<div class="banner">。
效果：轮播图数据与HTML分离，后续对接CMS后台只需改config.js。
切入点2：接入真实API
现状：注册表单提交后只弹alert('注册成功')。
改造步骤：
1. 在js/register.js里找到if (isValid) { alert('注册成功！'); }，替换为：
if (isValid) { fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: emailInput.value, password: pwdInput.value }) }) .then(res => res.json()) .then(data => { if (data.code === 200) { alert('注册成功！'); location.href = 'login.html'; } else { showTip(emailInput, data.msg || '注册失败，请重试'); } }) .catch(err => showTip(emailInput, '网络错误，请检查连接')); }- 在
style.css里新增.loading类，给按钮添加加载状态：
.loading::after { content: '...'; margin-left: 5px; }- 在提交前给按钮加
loading类，请求完成后移除。
效果：学生第一次接触真实异步请求流程，理解fetch、Promise、错误处理的完整链路。
切入点3：图标库扩展
现状：icomoon只包含基础图标（购物车、搜索、用户）。
改造步骤：
1. 访问icomoon.io，上传自定义SVG图标（如“收藏”、“分享”）。
2. 生成新字体包，替换icomoon/fonts/下的文件。
3. 修改icomoon/style.css里的@font-face路径，确保指向新字体。
4. 在index.html的<head>里引入新CSS，并在需要位置写<i class="icon-heart"></i>。
效果：学生掌握图标字体工作流，理解unicode、font-family、content的协同关系。
切入点4：响应式断点微调
现状：断点是767px/1023px/1365px。
改造步骤：
1. 打开style.css，找到@media screen and (max-width: 767px)区块。
2. 将767px改为768px（适配iPad竖屏）。
3. 在768px区块内，找到.product-list的grid-template-columns，将repeat(2, 1fr)改为repeat(1, 1fr)。
4. 测试：用Chrome DevTools切换iPad Pro竖屏模式，确认商品列表变为单列。
效果：学生理解断点不是魔法数字，而是设备物理特性的映射。
切入点5：SEO优化增强
现状：index.html的<title>是“品优购-首页”，<meta description>为空。
改造步骤：
1. 在index.html的<head>里补充：
<title>品优购-专注品质生活的电商平台</title> <meta name="description" content="品优购提供家电、数码、美妆、服饰等全品类正品保障商品，支持7天无理由退货，全场满99包邮。"> <meta name="keywords" content="品优购,电商网站,在线购物,正品保障">- 为所有商品图片添加
alt属性：
<img src="images/upload/product-1.jpg" alt="Apple iPhone 15 Pro 256GB 深空黑色">- 在
list.html的商品列表里，将<h3>商品名称</h3>改为<h2>商品名称</h2>（提升语义化层级）。
效果：学生建立基础SEO意识，理解title、description、alt对搜索引擎的影响。
4.3 生产环境部署避坑清单
当学生把修改后的代码部署到真实服务器时，常踩以下五个坑：
| 坑位 | 现象 | 根本原因 | 解决方案 |
|---|---|---|---|
| 图片404 | images/upload/下的图片全部显示为裂图 | 服务器区分大小写，但本地Windows不区分 | 将所有文件名统一为小写（如banner-1.jpg），并在HTML中严格匹配 |
| 字体不显示 | fonts/下的.ttf文件加载失败 | Nginx/Apache未配置字体MIME类型 | 在Nginx配置中添加：types { font/ttf ttf; font/woff woff; } |
| 轮播卡顿 | 移动端轮播切换有明显延迟 | transition: all 0.3s作用于整个.banner-slide，触发重排 | 改为transition: transform 0.3s, opacity 0.3s，只触发合成层 |
| 表单提交失败 | 点击注册按钮无反应 | 浏览器阻止了跨域请求（本地file://协议） | 必须部署到HTTP服务器，不可双击打开HTML |
| 图标乱码 | icomoon图标显示为方块 | style.css里@font-face的src路径错误 | 检查路径是否为相对路径（如url('../icomoon/fonts/icomoon.ttf')），确保与CSS文件位置匹配 |
实操心得：我在企业培训中，会让学员用
curl -I http://your-domain.com/images/upload/banner-1.jpg检查图片返回头。如果看到404 Not Found，立刻排查路径；如果看到200 OK但图片仍不显示，则用curl -v http://your-domain.com/images/upload/banner-1.jpg看是否被CDN缓存了旧版本。这种“命令行优先”的排查习惯，比盲目刷新浏览器高效十倍。
5. 教学应用与能力迁移：如何把资源包转化为你的知识资产
这套资源包最大的价值，不是让你做出一个“品优购”网站，而是帮你构建一套可迁移的前端工程化思维框架。我在带训时，会用三个递进式任务，把学生从“抄代码”推向“造轮子”。
5.1 任务一：逆向工程——从HTML反推PSD图层逻辑
要求学生打开index.html，找出所有用到background-image的CSS规则，然后在01-电商-主页-gai.psd里定位对应图层。例如：
-header .logo的背景图是images/upload/logo.png→ 在PSD里找到【导航栏】组下的logo图层
-.floor-1 .floor-title的背景是images/upload/floor1-bg.jpg→ 在PSD里找到【楼层模块-1F】组下的floor-bg图层
这个过程会暴露两个认知盲区：
盲区一：设计师的“隐含约束”
PSD里floor1-bg.jpg的尺寸是1920×120px，但style.css里.floor-1的高度设为120px，background-size: cover。学生会发现，如果把图片换成1920×200px，背景就会被裁剪。这让他们理解：设计稿尺寸不是装饰，而是CSS布局的输入参数。
盲区二：前端的“容错设计”style.css里有一段被注释掉的代码：
/* .floor-1 { background: #f5f5f5; // 当图片加载失败时的备用色 } */让学生取消注释，然后在DevTools里禁用图片加载，观察页面是否依然可读。这个练习教会他们：优雅降级不是可选项，而是专业底线。
5.2 任务二：模块解耦——把轮播图抽成独立组件
要求学生将js/banner.js和相关HTML/CSS，封装成一个可复用的<banner-slider>自定义元素。步骤如下：
- 创建
components/banner-slider.js：
class BannerSlider extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); } connectedCallback() { const slides = this.getAttribute('slides')?.split(',') || []; this.shadowRoot.innerHTML = ` <style>${this.getStyles()}</style> <div class="banner"> ${slides.map((src, i) => ` <div class="banner-slide ${i === 0 ? 'active' : ''}"> <img src="${src}" alt="轮播图${i+1}"> </div> `).join('')} </div> `; } getStyles() { return ` .banner { position: relative; } .banner-slide { display: none; } .banner-slide.active { display: block; } `; } } customElements.define('banner-slider', BannerSlider);- 在
index.html里使用：
<banner-slider slides="images/upload/banner-1.jpg,images/upload/banner-2.jpg"></banner-slider>这个任务逼学生直面三个核心问题：
- 如何用shadowRoot隔离样式，避免污染全局？
- 如何通过getAttribute()接收外部参数？
- 如何用connectedCallback()确保DOM挂载后再渲染？
当他们成功运行时，会突然意识到：Vue的<BannerSlider :slides="list"/>、React的<BannerSlider slides={list}/>，底层逻辑竟如此相似。这就是“能力迁移”的起点。
5.3 任务三：性能压测——用Lighthouse给页面打分
要求学生用Chrome的Lighthouse工具，对index.html进行移动端性能测试。重点关注三个指标：
指标一：First Contentful Paint（FCP）
现状：通常在2.8秒左右。优化方案：
- 将<script>标签移到</body>底部（资源包已做到）
- 对images/upload/下的轮播图启用WebP格式（需用cwebp命令转换）
- 在<img>标签里添加loading="lazy"属性
指标二：Total Blocking Time（TBT）
现状：约320ms。优化方案：
- 将js/banner.js拆分为banner-core.js（必需）和banner-animation.js（可延迟）
- 用<script type="module">加载，利用ES Module的异步特性
指标三：Cumulative Layout Shift（CLS）
现状：0.12（偏高）。优化方案：
- 为所有图片添加width和height属性（如<img width="1920" height="500">）
- 将.banner的height从auto改为固定值（height: 500px）
当学生把CLS从0.12降到0.01时，他们会真切体会到：性能优化不是玄学，而是对每一个像素、每一毫秒的敬畏。
最后分享一个小技巧：我在结课时，会让每个学生提交一份
README.md，内容不是“我做了什么”，而是“我踩了哪些坑，以及为什么那个坑会存在”。这份文档，远比一个能跑的网站，更能证明他真正掌握了前端开发的底层逻辑。
本文还有配套的精品资源，点击获取
简介：一套开箱即用的电商网站前端资源，覆盖主页、分类列表页、产品详情页、登录页、注册页、购物车结算页、提交订单页等全部核心页面。包含高清PSD设计源文件（如01-电商-主页-gai.psd、02-电商-分类列表页.psd、03-电商-产品详情页.psd、电商-登录.psd、电商-注册.psd、电商-购物车结算页.psd、电商-提交订单.psd）及对应静态HTML页面（index.html、list.html、register.html、cart.html、order.html等）。配套完整CSS样式表（style.css）、JavaScript功能脚本（含轮播、表单验证、选项卡切换等常见交互）、icomoon字体图标库、自定义字体（fonts目录）、favicon.ico、多尺寸图片素材（images目录含jpg预览图与upload资源）。支持响应式布局，适配PC与移动设备。附带Read Me.txt说明文档和demo-files目录（含demo.html演示入口与selection.图标配置），结构清晰，适合前端入门学习、课程教学、项目参考或快速二次开发。
本文还有配套的精品资源，点击获取