这是第 7 课的作业：不用 grid、只用多层 flex 嵌套，
把电商首页那种「一大块带几小块」的拼图式排版拼出来。
原作业的九张图全部挂在培训机构的图床外链上，这里换成了本地 CSS 渐变占位块，
离线打开也不会再裂图。
🔧 这一页修了什么：原作业的 9 张图全部指向培训机构图床的远程地址
（9-1-images/1~9.jpg），整页 100% 依赖第三方服务器：
对方一下线、或者开个防盗链，页面立刻变成 9 个破图框。现在九个拼块全部改成本地 CSS 渐变 +
emoji 图标，零外部请求、离线可跑，源文件里也再找不到任何 http 图片地址。
另外两处也顺手改了：格线原本是用 border 一条条画的（改个间距就全乱），现在用
gap + border-radius + overflow: hidden；
顶栏那排频道词原本是 <h2>、既抢了标题的语义又根本点不动，
现在改成 <nav> + <a>，带 hover 下划线动画。
说明：商品名与价格是演示数据，图片位置用渐变色块代替，只是为了展示排版骨架。