HTML+CSS+JavaScript实战：手写电子器件购物商城，前端三件套从入门到答辩-代码聚汇网

HTML+CSS+JavaScript实战：手写电子器件购物商城，前端三件套从入门到答辩

壹心理·2026-09-01·阅读 22 GEO检测（免费）

HTML+CSS+JavaScript购物商城电子器件

|难度：普通|阅读约 43 分钟

一到期末，满屏都是“求一份HTML大作业”。如果你手里正握着“大学生HTML期末大作业——HTML+CSS+JavaScript购物商城（电子器件）”这个题目，那这篇内容就是给你准备的。别慌，也别急着去网上找个模板直接交差——这种题目恰恰是老师最喜欢埋坑的：看起来是个普通商城，实际考的是你对HTML+CSS+JavaScript三件套的综合运用。你要是自己把这块骨头啃下来，不光期末稳了，前端入门的地基也就打牢了。

我会从设计思路、页面结构、样式实现、交互逻辑、踩坑排查这五个角度，把这个电子器件购物商城从头到尾拆开揉碎讲清楚。你不需要有很强的编程基础，跟着步骤走，每一段代码我都会说清楚它干什么、为什么这么写、答辩时老师问起来你怎么答。

1. 项目整体设计与功能规划

1.1 选型思路：为什么坚持原生三件套

很多同学一上来就想着用Bootstrap、jQuery甚至Vue来写，觉得省事。这里我把丑话说在前面：期末大作业用框架，是给自己找麻烦。原因有三点：第一，很多课程大纲明确写了考核点是HTML、CSS、JavaScript三件套，用框架等于回避了考点；第二，答辩时老师随口问一句“这个轮播图原理是什么”“这个数据是怎么绑定的”，你答不上来，分数直接打骨折；第三，原生代码更能体现你的“工作量”，哪怕写得粗糙，老师看到的是你亲手敲出来的东西。

所以这个项目我的核心建议是：一个HTML文件负责结构，一个CSS文件负责样式，一个JS文件负责交互。有能力的话可以拆成多个页面，但为了降低维护成本，我更推荐单页面+多视图切换的方式，或者最多拆成“首页index.html”和“购物车cart.html”两个页面。

这个题目的专业方向是“电子器件”，商品天然就带着参数属性：品牌、型号、价格、库存、接口类型、评价数。这些数据非常适合用JavaScript的数组和对象来管理，正好把期末必考的JS语法点全部覆盖进去。选这个题本身就比“仿一个淘宝首页”高明，因为“淘宝首页”偏静态展示，而电子器件商城必须带分类筛选和购物车逻辑，这是动态的，拉开档次全在这。

1.2 功能清单与页面布局规划

做项目之前先列功能清单，别上来就写代码。按老师常给的评分点来拆，一个能拿85分以上的商城至少要有以下功能：

功能模块	具体内容	涉及技术	优先级
导航栏	品牌Logo、菜单、搜索框、购物车入口	HTML语义化 + CSS Flex布局	必做
轮播图	首页顶部自动播放广告图，可手动切换	JavaScript定时器 + DOM操作	必做
商品分类	按CPU、显卡、内存、外设等分类展示	CSS Grid + JS筛选	必做
商品卡片	商品图、名称、参数、价格、加入购物车按钮	Flex布局 + 事件监听	必做
搜索功能	输入关键词过滤商品	JavaScript字符串匹配	加分
排序功能	按价格升序/降序、按销量排序	JavaScript数组 sort()	加分
购物车弹窗	添加商品后弹出提示、展示已选商品列表	JS创建元素 + CSS定位	加分
本地存储	刷新页面后购物车数据不丢失	localStorage	加分

页面布局参考结构：顶部是导航栏，下面左边是分类侧边栏或者顶部一排分类标签，中间主体是商品网格。底部放页脚，写上“仅用于课程学习”之类的声明，既正规又安全。整体设计往“简洁清爽”方向走，不要堆砌颜色，电子产品商城的主色调用深蓝、灰白、黑色系最稳妥，视觉上就有“科技感”。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 页面结构搭建与CSS样式实现

2.1 HTML语义化：别一锅div炖到底

很多同学的代码打开全是<div>套<div>，功能上没错，但老师看到就会觉得你基础不扎实。语义化标签是HTML这门课的核心考点之一，一定要用起来。

我的骨架结构是这样设计的：

html复制<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极客数码商城 - 电子器件专营</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="header">
        <div class="logo">极客数码</div>
        <nav class="nav">
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#cpu">CPU</a></li>
                <li><a href="#gpu">显卡</a></li>
                <li><a href="#memory">内存</a></li>
                <li><a href="#peripheral">外设</a></li>
            </ul>
        </nav>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="搜索显卡、CPU...">
            <button id="searchBtn">搜索</button>
        </div>
        <div class="cart-link">
            <a href="cart.html">购物车(<span id="cartCount">0</span>)</a>
        </div>
    </header>
    
    <main>
        <section id="home" class="banner-section">
            <!-- 轮播图区域 -->
        </section>
        
        <section id="products" class="products-section">
            <h2>全部商品</h2>
            <div class="filter-bar">
                <button class="filter-btn active" data-category="all">全部</button>
                <button class="filter-btn" data-category="cpu">CPU</button>
                <button class="filter-btn" data-category="gpu">显卡</button>
                <button class="filter-btn" data-category="memory">内存</button>
                <button class="filter-btn" data-category="peripheral">外设</button>
            </div>
            <div class="product-grid" id="productGrid">
                <!-- 动态渲染商品卡片 -->
            </div>
        </section>
    </main>
    
    <footer class="footer">
        <p>本页面仅用于课程设计学习交流</p>
    </footer>
    
    <script src="js/main.js"></script>
</body>
</html>

注意几个细节：导航用<nav>包<ul>，商品区域用<section>，每张商品卡片最好用<article>标签，既体现语义化又方便CSS选择器控制。购物车数量那个id="cartCount"后面JS会反复用到，提前埋好。搜索框的input一定要配label或者至少写个placeholder，无障访问这块虽然不是期末重点，但答辩时提一句“我考虑了用户输入体验”会让老师觉得你有产品意识。

2.2 CSS布局：Flex和Grid怎么分工

CSS布局是所有同学的痛，尤其是flex子元素宽度自适应、Grid行列控制这种细节。我的处理原则是：

导航栏、商品卡片内部、轮播图箭头等“一维排列”用Flex。Flexbox擅长处理单方向上的对齐和分布，代码简单直观。
商品列表网格这种“二维排列”用Grid。Grid定义行列非常优雅，而且对响应式布局的支持比Flex更省事。

看这段商品网格代码：

css复制.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    padding: 20px 0;
}

repeat(auto-fill, minmax(260px, 1fr))的意思是：让每张卡片最小260px宽，一行能放几张就放几张，剩余的宽度均匀分配给所有卡片。这样写以后不需要写媒体查询也能在小屏幕上自动变成每行1~2列。这是CSS Grid里最实用的写法，也是答辩时能拿出来说的亮点。

再看不小心就会翻车的Flex问题：

css复制.product-card {
    display: flex;
    flex-direction: column;
    /* 如果不设置min-width，卡片被子元素撑破的情况很常见 */
    min-width: 0;
}

Flex容器里的子元素有时候会不愿意缩小，尤其是里面放了长文本或者固定宽度的图片。解决方案就是给子元素设置min-width: 0或overflow: hidden，允许它收缩。这个坑我当年踩了一整晚，你直接记住结论就行。

2.3 CSS细节：字体渐变、涟漪光圈和悬浮动效

电子器件商城卖的是“科技感”，得在视觉细节上让老师觉得有设计感。有三个CSS技巧投入低、效果好，强烈建议加进你的样式表：

字体渐变。导航栏Logo用渐变文字，一下就跳出了“默认黑字”的廉价感：

css复制.logo {
    font-size: 28px;
    font-weight: bold;
    /* 渐变文字：背景切到文字上 */
    background: linear-gradient(135deg, #1e3c72, #2a5298, #00c6fb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

代码逻辑很简单：给元素一个渐变背景，然后用background-clip: text把背景裁剪到文字形状上，最后把文字颜色设为透明，渐变就透出来了。注意要同时写color: transparent和-webkit-text-fill-color: transparent，否则某些浏览器下文字会变成一块色块。

涟漪光圈扩散。这个特效特别适合给“加入购物车”按钮或者轮播图切换做反馈，效果就是点击后一个圆圈波纹向外扩散然后消失。核心思路是用::after伪元素加一个绝对定位的圆形，点击时改变它的transform和opacity：

css复制.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.btn-ripple:active::after {
    transform: translate(-50%, -50%) scale(4);
    opacity: 1;
}

需要配合JS在点击时把鼠标坐标赋给CSS变量--x和--y，不复杂，但对于期末作业来说已经属于“超出预期”的细节了。

卡片悬浮动效。商品卡片hover时轻微上浮和阴影加深：

css复制.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

这里知识点是transition的过渡属性必须和hover后改变的属性一致，时间曲线用ease而不是线性，视觉上更柔和。答辩时老师问“动画怎么实现的”，你就说“用transition过渡配合transform位移”，一句话就能体现你懂原理。

3. JavaScript交互逻辑与核心功能实现

3.1 商品数据管理与动态渲染

纯HTML写死商品卡片是工作量最低的方案，但也是最容易被看出“水分”的方案。正确的思路是：把所有商品数据保存在JS数组里，然后用循环动态生成页面。这样后面做筛选、搜索、排序就都有了数据基础。

我习惯把商品数据定义成对象数组：

javascript复制// 商品数据统一管理
const products = [
    {
        id: 1,
        name: "Intel 酷睿 i7-13700K",
        category: "cpu",
        price: 2899,
        stock: 15,
        rating: 4.8,
        sales: 1300,
        desc: "16核24线程，睿频至高5.4GHz",
        image: "images/cpu-13700k.jpg"
    },
    {
        id: 2,
        name: "NVIDIA RTX 4060 Ti 显卡",
        category: "gpu",
        price: 3199,
        stock: 8,
        rating: 4.9,
        sales: 2200,
        desc: "8GB GDDR6X，适合2K主流游戏",
        image: "images/gpu-4060ti.jpg"
    }
    // 建议准备8~12个商品，覆盖4个分类
];

这里有个非常现实的问题：学生哪来的真实商品图片？我的建议是，不要花大量时间在PS或者下载图片上，直接给每类商品设置一个渐变色背景加一个“CPU”“GPU”文字图标，反而更有“设计作业”的气质。图片加载失败或者图片路径出问题的时候，控制台一片红，答辩时丢分。

渲染函数的核心逻辑：

javascript复制function renderProducts(data) {
    const grid = document.getElementById("productGrid");
    if (data.length === 0) {
        grid.innerHTML = "<p class='empty-tip'>没有找到相关商品，换个关键词试试</p>";
        return;
    }
    grid.innerHTML = data.map(item => `
        <article class="product-card">
            <div class="product-img" style="background: linear-gradient(135deg, ${item.gradient[0]}, ${item.gradient[1]});">
                <span>${item.categoryName}</span>
            </div>
            <h3>${item.name}</h3>
            <p class="desc">${item.desc}</p>
            <div class="meta">
                <span>评分 ${item.rating}</span>
                <span>已售 ${item.sales}</span>
            </div>
            <div class="price-row">
                <span class="price">¥${item.price}</span>
                <button class="add-cart-btn" data-id="${item.id}">加入购物车</button>
            </div>
        </article>
    `).join("");
}

这段代码用到了两个重要的JS考点：map()方法遍历数组以及模板字符串`插值。map()返回一个新数组，里面是每一张卡片的HTML字符串，最后join("")把数组拼成一个大的HTML字符串，一次性赋给innerHTML。用数组方法而不是for循环去拼字符串，这也是加分点。

3.2 购物车功能：增删改查与localStorage

购物车是电子商城项目的灵魂，也是期末作业区分度最高的部分。完整实现一套“添加商品→购物车列表→数量加减→总价计算→（可选）清空购物车”的闭环，这个模块就立住了。

首先要明确：刷新页面后购物车数据不能丢，否则用户体验是断裂的。任何界面操作产生的数据，存到浏览器本地的最简单方案就是localStorage。一套标准的读取/写入购物车逻辑：

javascript复制// 购物车数据，默认从localStorage读取
let cart = JSON.parse(localStorage.getItem("cart")) || [];

function saveCart() {
    localStorage.setItem("cart", JSON.stringify(cart));
}

function addToCart(productId) {
    const product = products.find(p => p.id === productId);
    if (!product) return;
    // 如果购物车里已经有了这个商品，数量+1
    const existing = cart.find(item => item.id === productId);
    if (existing) {
        existing.quantity += 1;
    } else {
        cart.push({ id: product.id, name: product.name, price: product.price, quantity: 1 });
    }
    saveCart();
    updateCartCount();
    // 给用户一个视觉反馈
    showToast("已加入购物车：" + product.name);
}

几个关键点解释一下：

JSON.parse(localStorage.getItem("cart")) || []：如果本地存储是空的，parse(null)会返回null，所以要用|| []兜底，避免后续调用cart.find()直接报“Cannot read properties of null”的经典错误。
find()方法非常常用，作用和filter()的区别是：find()返回第一个匹配项，filter()返回所有匹配项组成的数组。这个区别期末笔试也爱考。
updateCartCount()要更新导航栏那个<span id="cartCount">的文本，同时需要注意toFixed(2)保留两位小数，价格这玩意不能含糊。

购物车页面的总价计算可以用reduce()：

javascript复制function calcTotal() {
    const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
    document.getElementById("totalPrice").textContent = "¥" + total.toFixed(2);
}

reduce()是JS数组方法的进阶考点，在“计算购物车总价”这个场景下用得非常自然。老师问“你的总价怎么算的”，你来一句“用reduce累加的”，印象分立刻不一样。

3.3 搜索、筛选与排序的联动实现

这三种功能单独写都不难，但做到三个条件同时成立时结果正确，就需要一点“数据流”思维了。我的做法是：写一个统一的数据刷新入口，每次任何筛选条件变化，都执行一次这个函数，从原始数据products里逐层过滤：

javascript复制let currentCategory = "all";
let currentKeyword = "";
let currentSort = "default";

function filterProducts() {
    let result = [...products];
    
    // 第一步：分类过滤
    if (currentCategory !== "all") {
        result = result.filter(p => p.category === currentCategory);
    }
    
    // 第二步：关键词搜索（既匹配名称，也匹配描述）
    if (currentKeyword.trim() !== "") {
        const kw = currentKeyword.trim().toLowerCase();
        result = result.filter(p => 
            p.name.toLowerCase().includes(kw) || 
            p.desc.toLowerCase().includes(kw)
        );
    }
    
    // 第三步：排序
    if (currentSort === "price-asc") {
        result.sort((a, b) => a.price - b.price);
    } else if (currentSort === "price-desc") {
        result.sort((a, b) => b.price - a.price);
    } else if (currentSort === "sales") {
        result.sort((a, b) => b.sales - a.sales);
    }
    
    renderProducts(result);
}

使用[...products]做一次浅拷贝很重要，因为sort()是原地修改数组的，如果直接拿原数组排序，下一次筛选的数据顺序就乱了。这个细节能看出来你是真懂，不是机械地抄代码。

事件绑定的写法要注意：给分类按钮和排序按钮绑定事件时，不要给每个按钮单独写一个监听器，而应该利用“事件委托”——给它们的父容器绑定一个监听器，通过event.target判断点击了谁：

javascript复制document.querySelector(".filter-bar").addEventListener("click", function(e) {
    if (e.target.classList.contains("filter-btn")) {
        // 去掉所有按钮的active类
        document.querySelectorAll(".filter-btn").forEach(btn => btn.classList.remove("active"));
        // 给当前按钮加active类
        e.target.classList.add("active");
        currentCategory = e.target.dataset.category;
        filterProducts();
    }
});

事件委托的好处是：如果商品分类是动态生成的，新生成的元素也能被这个监听器捕获，不需要重新绑事件。这是前端开发里“事件代理”的思想，期末作业里能体现出来绝对是加分项。

搜索功能的触发场景也要考虑周全：用户可能点击搜索按钮，也可能在输入框里按回车。所以给按钮绑click事件、给输入框绑keydown事件，监听Enter键：

javascript复制document.getElementById("searchBtn").addEventListener("click", function() {
    currentKeyword = document.getElementById("searchInput").value;
    filterProducts();
});

document.getElementById("searchInput").addEventListener("keydown", function(e) {
    if (e.key === "Enter") {
        currentKeyword = this.value;
        filterProducts();
    }
});

e.key === "Enter"是现代的键盘事件写法，比e.keyCode === 13更可读，也避免了你去看那些古老的keyCode映射表。

3.4 轮播图：定时器与手动的协调

轮播图是首页的门面，也是许多同学最容易写出bug的地方。最常见的bug有两种：一是自动播放和手动切换冲突，图片乱跳；二是切换到最后一张时直接“哐当”回到第一张，毫无过渡。

一个稳定的入门级轮播图实现方式是用transform位移+索引控制：

html复制<div class="banner-wrapper">
    <div class="banner-track" id="bannerTrack">
        <div class="banner-slide" style="background:#1e3c72;">新品 CPU 上线</div>
        <div class="banner-slide" style="background:#2a5298;">显卡大促</div>
        <div class="banner-slide" style="background:#00c6fb;">内存满减</div>
    </div>
    <button class="banner-arrow left" id="prevBtn">❮</button>
    <button class="banner-arrow right" id="nextBtn">❯</button>
    <div class="banner-dots" id="bannerDots"></div>
</div>

css复制.banner-wrapper {
    position: relative;
    overflow: hidden;
    height: 320px;
}

.banner-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
}

.banner-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
}

JS控制索引思路：

javascript复制let currentSlide = 0;
const track = document.getElementById("bannerTrack");
const slides = document.querySelectorAll(".banner-slide");
const slideCount = slides.length;
let timer;

function goToSlide(index) {
    currentSlide = (index + slideCount) % slideCount;
    // 每张slide的宽度等于容器宽度
    track.style.transform = `translateX(-${currentSlide * 100}%)`;
    // 更新圆点指示器
    document.querySelectorAll(".banner-dots span").forEach((dot, i) => {
        dot.classList.toggle("active", i === currentSlide);
    });
}

function nextSlide() { goToSlide(currentSlide + 1); }
function prevSlide() { goToSlide(currentSlide - 1); }

// 自动播放
function startAutoPlay() {
    timer = setInterval(nextSlide, 3000);
}

function stopAutoPlay() {
    clearInterval(timer);
}

document.getElementById("nextBtn").addEventListener("click", function() {
    nextSlide();
    stopAutoPlay();
    startAutoPlay(); // 重置定时器，防止越走越快
});

// 鼠标悬停暂停
const wrapper = document.querySelector(".banner-wrapper");
wrapper.addEventListener("mouseenter", stopAutoPlay);
wrapper.addEventListener("mouseleave", startAutoPlay);

// 初始化圆点
const dotsContainer = document.getElementById("bannerDots");
for (let i = 0; i < slideCount; i++) {
    const dot = document.createElement("span");
    dot.addEventListener("click", function() { goToSlide(i); });
    dotsContainer.appendChild(dot);
}
goToSlide(0);
startAutoPlay();

这里(index + slideCount) % slideCount取模运算非常关键，它让索引在0到slideCount-1之间循环，既不会变成负数，也不会越界。

定时器重置的原理也要理解：如果每次点击都调用setInterval而不清除旧的定时器，就会有多个定时器同时跑，轮播速度越来越快。所以正确做法是“先clearInterval，再setInterval”。这是一个高频面试题，期末答辩同样可能问到。

4. 常见问题、调试技巧与答辩准备

4.1 HTML文件无法预览的经典原因

很多同学说“代码明明没错，但浏览器打开就是白屏/报错”。先按这个顺序检查：

第一，文件路径里有没有中文或特殊字符。C:\Users\张三\桌面\新建文件夹\期末作业.html这种路径，放在某些浏览器和编辑器环境下会解析异常。最稳妥的方案是建一个纯英文目录，比如D:\web-final\。

第二，CSS和JS文件路径是否正确。你写完<link rel="stylesheet" href="css/style.css">，用浏览器打开HTML时，它是以HTML文件所在目录为基准去找css/style.css的。最常见的问题是：人和CSS文件放在同一个目录，却写了css/style.css，就会404。先打开浏览器的开发者工具（F12），切到Console和Network面板，看看具体哪个文件加载失败。Network面板的红色条目就是加载失败的资源，点开能看到完整路径，对照改就行。

第三，双标签的meta是不是写全了。<meta charset="UTF-8">没写或写错，中文会变成乱码。<meta name="viewport" content="width=device-width, initial-scale=1.0">不写，在手机端预览时页面会挤成一团。这两行从标准模板里复制，别手敲。

第四，是不是用了相对路径访问图片/数据文件。如果商品图片路径写的是/images/xxx.jpg，前面的斜杠表示从服务器根目录开始找，你用file://协议直接打开本地HTML是没有根目录概念的，图片必挂。本地文件用相对路径，就是不加最前面的斜杠。

4.2 JavaScript运行时报错的标配排查法

最让人崩溃的报错通常长这样：Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')。翻译成人话就是：你试图在页面上找某个元素，但根本没找到。

原因一般是：JS写在了HTML前面。比如你把<script>放在<head>里，脚本执行时<body>还没渲染，document.getElementById("productGrid")自然拿到的是null。解决方案有三条路：

把<script>放在</body>之前，让DOM先渲染完再执行JS；
给外部JS加defer属性：<script src="js/main.js" defer></script>；
或者把全部代码包在window.onload回调里。

推荐第二种，defer就是“等HTML解析完再下载执行”，一行解决，而且不会阻塞页面的第一次渲染。这个知识点太基础也太常考，必须搞清楚。

再看一个经典现象：页面里点了“加入购物车”按钮没反应。排查思路是：先确认事件有没有绑上。在事件回调第一行加console.log("点击了")，如果点按钮控制台没输出，说明事件绑定前按钮还不存在。这里十有八九就是你在动态渲染商品列表之前就去绑定了按钮事件。记住一个原则：元素都没生成，你绑什么事件？ 要么用上节说的事件委托，要么在renderProducts()渲染完成后，再补一轮事件绑定。顺序错乱是新手JS报错的最大来源。

javascript:void(0)这个东西再提一嘴。网上很多老教程或模板会把超链接的href写成javascript:void(0)，为了阻止链接跳转，在旧时代很流行。但现代开发基本不这么写了，因为如果有JS运行错误，这个javascript:协议执行失败会在控制台报错。更正规的做法是：href="#"加e.preventDefault()，或者直接用<button>元素来做交互按钮。要是你拷贝到一份带javascript:void(0)的模板，建议把它改成button，省得答辩时被问“这句什么意思”你还要解释半天。

4.3 CSS布局的翻车现场与修复方案

场景一：Flex布局子元素宽度怎么都不自适应。 常见写法是.nav-item { flex: 1; }，想让导航项平分宽度，但子项内部有个长文本，把整个布局撑破了。解决办法：给子元素加min-width: 0，再让内部文本用text-overflow: ellipsis做省略号处理。flex: 1的完整写法其实是flex: 1 1 0%，就是“允许放大、允许缩小、基础尺寸为0”，理解了这个，再看到宽度自适应问题就没那么玄了。

场景二：兄弟元素选择器写错。 CSS里+是相邻兄弟选择器，~是通用兄弟选择器。例如.label + input { ... }只匹配紧跟在.label后面的那个input，而.label ~ input匹配.label后面的所有input兄弟元素。很多同学记不住，又不需要看文档，就乱用，样式没生效还找不到原因。建议自己写个demo页面验证一遍，花五分钟理解，以后不会再错。

场景三：字体渐变在部分浏览器上不显示。 前面那个background-clip: text的写法，需要加-webkit-前缀才兼容部分浏览器，同时注意background-clip和-webkit-background-clip都要写。这种“浏览器前缀兼容”本身就是CSS课程的一个考点，你在代码注释里写一句“为了兼容WebKit内核浏览器添加前缀”，老师看到了会认可。

场景四：CSS动画没反应。 优先检查元素本身有没有position: relative或absolute，因为很多动画涉及子绝父相定位。再检查transition有没有写在基础状态上，而不是写在:hover状态上——写在:hover里会导致鼠标移入时有动画，移出时瞬间回弹，效果非常生硬。

4.4 答辩时怎么讲代码才能拿高分

代码写得好只是第一步，期末大作业是要答辩的。很多同学代码是自己写的，但一紧张就说不清楚，很吃亏。

准备答辩的时候，按这个逻辑组织自我介绍：“我是从商品的展示、筛选、购物车管理三个维度来设计这个商城的。展示层用到了语义化标签和CSS Grid/Flex布局；交互层用JavaScript的数组方法监听用户操作，动态刷新页面数据；数据层用localStorage实现了刷新不丢失。”——这一段话已经把考点全点了一遍，老师基本就能确认你是真会的。

预判几个高频问题并提前准备答案：

问：“为什么用data-category而不是id？”——答：自定义属性更灵活，一个元素可以携带多个数据值，符合“结构与数据分离”的思路。
问：“购物车数据存在哪里？刷新会丢失吗？”——答：存在localStorage，刷新后从localStorage重新读取，不会丢失。然后主动补充一句“JSON.parse配合|| []兜底处理空数据”。
问：“如何实现的排序？”——答：使用Array.prototype.sort()方法，通过比较函数返回值的正负来决定排列顺序，排序前先浅拷贝一份数据避免影响原始数组。
问：“轮播图自动播放和手动播放如何避免冲突？”——答：手动切换时先clearInterval清除原有定时器，再重新setInterval启动，确保同一时间只有一个定时器在运行。

这些问题如果你平时写代码时都思考过，答辩根本不慌。最怕的是从网上下载了自己都看不懂的代码，老师一问三不知。记住：期末大作业的价值不在于代码量多炫酷，而在于里面每个知识点你都能讲清“为什么”，这才是HTML+CSS+JavaScript这门课真正想考核的目标。

写在最后

按照以上四章的内容完整落地，你的电子器件购物商城至少是一个结构完整、功能齐全、代码干净、有加分细节的期末作品。我个人在实际操作中的体会是：这个项目最耗时间的往往不是写代码，而是反复调整CSS细节和排查那些肉眼难找的路径、层级问题。建议你从今天开始，每天集中写一个模块，第一天搭结构和样式，第二天写商品渲染和筛选，第三天补购物车和本地存储，第四天专攻轮播图和细节动画，第五天整体调试。

最后再分享一个小技巧：交付之前，把你整个项目文件夹压缩一份发给同学，让他在他自己电脑上解压打开跑一遍。同一个代码在自己电脑上正常，到别人电脑上各种路径错乱的情况太常见了。提前踩过这个坑，答辩的时候你不仅能从容应对，甚至还能主动跟老师说一句：“我在别的电脑上测试过，路径兼容没有问题。”——这句话本身，就是印象分。