简介：一套源自一号店早期官网的静态HTML源代码，面向前端入门者、网页设计人员及电商平台研究者，用于学习纯HTML+CSS构建电商页面的经典方式。压缩包共330个文件，约2.97MB，图片素材占绝大多数，包括189个JPG、94个PNG、34个GIF，另有6个CSS样式表、5个HTML页面及少量辅助文件，整体结构简洁，便于按页面查找对应资源。压缩包内HTML页面覆盖了首页、商品列表等常用模块，布局思路清晰；CSS文件可独立调整配色与版式，适合配合图片素材做逆向练习。当前已有1406人浏览学习。这份代码没有数据库，也没有JavaScript和jQuery，恰好能让人专注于基础的HTML语义化标签、页面分区、表单元素与图片引用等知识点；通过分析站点首页、列表页、详情页的文档结构，还能理解早期电商网站的信息组织方式、链接跳转与SEO写法。对需要临摹经典电商界面、完成静态页面课程设计，或研究一号店历史版式的前端学习者来说，是一手可快速上手的参考资料。
1. 一份没有数据库、没有 JS 的一号店 HTML 包，值得拆吗
拿到 yihaodian 这个压缩包时，很多人的第一反应是“太旧了”。六个 CSS 文件、两个 GIF、一个 Thumbs.db，没有 JS 也没有数据库脚本，看上去就是一个静态切图页。但恰恰是这种“没有”让它有拆的价值：没有后端依赖，双击 index.html 就能在浏览器里跑通；没有 JS，所有交互都是纯 HTML/CSS 的状态控制；没有框架抽象，DOM 结构直接暴露电商首页最原始的标签组织方式。这里直接从压缩包本身出发，聊多 CSS 文件时代的模块拆分思路、无 JS 条件下的交互方案，以及接手老页面时怎么排错和迁移，对正在做 html 网页制作入门的人尤其顺手。
2. 六个 CSS 文件的分工：拆开一号店首页的样式组织方式
2.1 多 CSS 文件的加载顺序与覆盖逻辑
一个目录里同时出现 index.css 直到 index6.css，不可能是随手命名的。早年切图页没有预处理器，习惯做法是 index.css 放 reset、字体和全局容器宽度，后面几个文件按页面区块从上往下排：页头、导航、楼层内容、商品列表、侧栏和页脚。对应到 HTML 中，<head>里link标签的书写顺序就是浏览器加载的顺序，后加载的样式表在相同优先级下会覆盖先加载的规则。所以看到 index6.css 里出现对.header的重新定义不用意外，这是刻意用文件顺序做的覆盖层。
<!-- 常见的多 CSS 引入顺序 --> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/index2.css"> <link rel="stylesheet" href="css/index3.css"> <link rel="stylesheet" href="css/index4.css"> <link rel="stylesheet" href="css/index5.css"> <link rel="stylesheet" href="css/index6.css">这段代码的逻辑是：先建立全局基础样式，再叠加各区块样式，最后挂微调层。参数上值得注意的就是href的路径写法，css/index.css是相对路径，要求页面文件与 css 目录平级；如果页面放在子目录里，这个路径就会失效。
拿到一包不知底细的 CSS 文件，我先做的是“逐个注释法”：在浏览器开发者工具里把某个 css 链接禁掉再刷新，看哪个区块塌陷。比如注释掉 index2.css 只有导航区变形，那它的职责边界就清楚了。以下是注释过程中按失效范围给六个文件做的职责映射，属于经验推断，具体还要以你手头文件的实际内容为准：
| CSS 文件 | 推断职责 | 注释后的现象 |
|---|---|---|
| index.css | reset、全局字体、容器宽度 | 全站间距和字体微变 |
| index2.css | 页头、导航、搜索区 | 头部排版错乱 |
| index3.css | 首页焦点区、楼层容器 | 主体背景和栅格丢失 |
| index4.css | 商品卡片、价格区 | 商品列表排列塌陷 |
| index5.css | 侧栏、页脚、辅助模块 | 底部样式失效 |
| index6.css | 微调与局部覆盖 | 仅细节样式变化 |
这种基于“失效范围”推断模块边界的方式，比逐行读代码快得多，尤其是面对压缩过或换过作者的 CSS 时。我一般先花十分钟做完这件事，再决定后续改动从哪个文件下手。
2.2 电商首页 HTML 骨架里的核心标签
一号店这类电商首页，HTML 结构有很强的一致性。页面整体由<div>撑起纵向三段式布局，商品区域用列表元素组织，按钮和价格用<a>与<span>组合。没有 JS 的情况下，占位链接的 href 直接写#，视觉反馈靠 CSS 的 hover 完成。
<!-- 典型区块结构 --> <div class="header"> <div class="logo"> <a href="/"><img src="images/b_5.gif" alt="一号店"></a> </div> <ul class="nav"> <li><a href="#">全部分类</a></li> <li><a href="#">生鲜</a></li> <li><a href="#">粮油</a></li> </ul> </div> <div class="main"> <div class="floor"> <h2 class="floor-title">今日推荐</h2> <ul class="item-list"> <li><a href="#"><img src="images/b_6.gif" alt=""></a></li> </ul> </div> </div> <div class="footer">版权与帮助信息</div>这段结构里，header、main、footer 构成页面主骨架，floor 是楼层，item-list 是商品横向排列的容器。<img>的 alt 属性在装饰性图片上可以留空，但如果图片承载按钮功能，比如这里的 logo 链接，alt 就应该写文本，否则屏幕阅读器读出来的是一串空链接。这也是老页面做无障碍改造时最先要补的一类标签。
另外一个容易被忽略的细节是ul > li > a的嵌套层级。电商导航基本都用这个结构，因为默认的列表语义对爬虫和读屏软件都友好。如果看到导航里直接铺 div 而没有列表标签，那通常是后来者重写时图省事留下的，迁移时值得改回列表结构。
2.3 用规则块数量估算重构成本
六个 CSS 文件合起来的体量，直接决定重构要花多少时间。我先统计每个文件里的规则块数量，规则块一般以左花括号{结束，数量能大致反映代码规模。
# 统计每个 CSS 文件的规则块数量，近似评估规模 for f in index*.css; do echo "$f: $(grep -c '{' "$f") 个规则块" done这条命令的逻辑是：for循环依次把 index.css 到 index6.css 赋值给变量 f，grep -c '{'统计每个文件里左花括号出现的行数。需要注意grep -c统计的是“包含花括号的行数”而不是花括号个数，一行放多个规则时会少算，但用于成本评估足够。
规则块超过 400 的文件就是重构重灾区。这种文件里通常混着大量重复的颜色值和选择器，改造时优先抽公共变量、合并相同声明，而不是急着改布局。另外还要警惕长选择器，像.main .floor .item-list .item .name span这种五级嵌套，渲染匹配虽然不至于卡顿，但可读性和维护性都很差，能在重构中压缩到三层以内是最好的结果。
3. 没有 JS 也能交互动起来：纯 HTML/CSS 状态处理方案
3.1 锚点跳转与 :target 伪类实现区块切换
静态页最常见的交互是 Tab 切换和楼层跳转。没有 JavaScript 的年代，锚点配合:target伪类是成本最低的方案。:target匹配的是当前 URL 中#后面标识的元素，用户点击带 hash 的链接后，对应元素进入被匹配状态，CSS 就能据此改变样式。
/* 纯 CSS 的 tab 切换 */ .tab-content { display: none; } .tab-content:target { display: block; } /* 一键返回顶部的纯 CSS 算法 */ .to-top { display: none; } #top:target ~ .to-top { display: block; }这段代码的思路是：所有 tab 内容默认隐藏，点击导航里的#tab1形式链接后，URL 变为page.html#tab1，.tab-content:target匹配成功，对应的内容块显示。返回顶部用的是同一个机制，页面底部放一个id="top"的空锚点，:target命中后让回到顶部的按钮可见。局限非常明显：:target同时只能匹配一个目标，多个 tab 联动时会出现互相覆盖的情况，也没有切换动画。
提示：
:target方案只适合原型或零依赖环境，生产环境建议同时监听hashchange事件做增强，否则浏览器前进后退时状态可能错乱。
如果只想快速验证布局，我会用这个方案应付，毕竟它不需要任何构建工具，页面在本地双击就能跑。
3.2 checkbox hack 实现菜单展开收起
菜单展开收起需要记住“当前是否展开”这个状态。checkbox hack 的思路是让一个隐藏的复选框承载状态，用<label>的 for 属性与它绑定，点击 label 就相当于点击了复选框，再通过:checked伪类和兄弟选择器控制菜单显隐。
<input type="checkbox" id="menuToggle" class="menu-toggle"> <label for="menuToggle" class="menu-btn">商品分类</label> <ul class="menu"> <li>生鲜</li> <li>零食</li> <li>家居</li> </ul>.menu-toggle { display: none; } .menu { display: none; } /* 复选框选中时，让后面的菜单兄弟元素显示 */ .menu-toggle:checked ~ .menu { display: block; }这里的关键约束是 DOM 结构：input 必须与.menu有同一个父容器，且 input 要排在.menu前面，否则~通用兄弟选择器匹配不到。display: none把复选框隐藏起来，但它仍参与文档流状态管理。label 的 for 值为menuToggle，与 input 的 id 一致，点击 label 时复选框就会被选中或取消。
这种交互在移动端原型里很常见，但它对键盘操作和读屏软件支持很差。复选框本身不可见，焦点管理缺失，严格来说并不符合无障碍规范。拿它做静态度展示可以，如果要上线，还是得换回按钮加事件监听。
3.3 hover 驱动的二级导航与悬浮面板
纯 hover 菜单在电商页面里用得最多，也最容易出问题。子菜单默认隐藏，父级悬浮时显示，再用绝对定位把子菜单钉在导航下方。
.nav > li { position: relative; } .nav .sub-nav { display: none; position: absolute; top: 30px; left: 0; } .nav > li:hover .sub-nav { display: block; }这段代码的核心是定位关系：.nav > li设置position: relative，子菜单的position: absolute才以 li 为参照物，否则它会飘到页面左上角附近。top: 30px是子菜单到导航顶部的距离，具体值取决于导航本身的高度，按经验通常取导航高度或略小一点，让子菜单和父项之间不留视觉缝隙。
悬浮状态下最常见的故障是“鼠标从一级菜单移到二级菜单时，子菜单消失”。原因往往是两项之间存在 1 到 2 像素的间隙，鼠标经过间隙时父级的 hover 状态被移除。排查时在开发者工具里给子菜单加一个透明的上边框或扩大 padding，把间隙堵上就能解决。以下是四种无 JS 交互方案的对比，方便在不同场景里做选择：
| 方案 | 状态来源 | 适用场景 | 主要限制 |
|---|---|---|---|
| 锚点跳转 | URL hash | 楼层导航、返回顶部 | 无法触发回调 |
| :target 伪类 | URL hash | 单组 tab 切换 | 同时只能匹配一个目标 |
| checkbox hack | 复选框选中态 | 菜单展开收起 | 依赖严格 DOM 结构 |
| :hover 悬浮 | 鼠标悬停态 | 下拉导航 | 触摸屏天然失效 |
无 JS 交互方案共有的痛点是刷新后状态不保留，因为复选框选中态、悬停态都不会在页面重载后恢复。这也是它们最终被 JavaScript 取代的根本原因。但在纯静态演示、原型确认和低代码环境下，这套写法仍然值得保留，至少它零依赖，并且能让人把注意力集中在 HTML 结构和 CSS 规则本身上。
4. 图片资源、Thumbs.db 与静态页排错
4.1 GIF 图片与雪碧图的取舍
压缩包里的 er.gif、b_5.gif、b_6.gif，从命名习惯看，er 多半是 error 的缩写，常见于加载失败或空状态占位；b_5、b_6 这种 b 开头的大概率是 button 或 banner 的缩写，被用作按钮背景或横幅素材。早年为了减少 HTTP 请求，页面会把多张尺寸一致的小图合并成一张雪碧图，再用background-position显示其中一小块。
.icon-b5 { background: url(../images/b_5.gif) -20px -30px no-repeat; }这条规则里的-20px -30px是背景图偏移量。背景图左上角默认与元素左上角对齐，负的 X 值将背景图向左移动 20 像素，负的 Y 值向上移动 30 像素，视觉上就会把大图中坐标 (20, 30) 位置的内容显示到元素区域里。调试这种代码时，最有效的方法是打开开发者工具的“背景图可视化”面板，直接拖动查看哪一块区域被裁出来了。
需要注意的是，GIF 只有 1 位透明通道，适合做边缘硬朗的小图标，遇到半透明渐变会出现明显锯齿。如果要在现代项目里复刻这种视觉，把 GIF 转成 PNG-8 或 WebP，文件体积更小，边缘也干净得多。
4.2 Thumbs.db 是怎么混进代码包的
Thumbs.db 不是源码，它是 Windows 资源管理器在缩略图模式下自动生成的缓存数据库。任何人在 Windows 里以缩略图方式浏览过图片素材目录，系统都会在这个目录里生成 Thumbs.db，记录缩略图数据。它常混在下载包里，本质属于工程杂物。
识别和清理它很简单，两条命令就能解决：
# 删除当前目录及子目录下所有 Thumbs.db find . -name "Thumbs.db" -type f -delete # 列出所有包含 thumbs 字样的文件，便于人工确认 find . -iname "*thumbs*" -type f第一条命令中，. -name "Thumbs.db"匹配所有名为 Thumbs.db 的文件，-type f限定结果必须是普通文件而不是目录，-delete执行删除。这里没有加-force概念，建议先跑第二条 find 确认范围再删，避免文件名大小写或变体遗漏。
就算团队里没人用 Windows，也要防一手：成员在资源管理器里看完图片素材后执行git add .，很容易把 Thumbs.db 带进版本库。正确做法是把这类文件写进 .gitignore：
# Windows 资源管理器缓存 Thumbs.db ehthumbs.db Desktop.ini这几行配置的含义是忽略 Windows 缩略图缓存、视频缩略图缓存和桌面配置文件。macOS 的.DS_Store也建议一并加进去，原理相同。
4.3 静态页打不开或样式错乱时的定位顺序
老静态包最常见的故障形态是“双击 index.html 只有文字、没有样式”。八成是路径问题，CSS 文件可能用了绝对路径/css/index.css，或者带盘符的file:///路径，浏览器本地解析失败。排查顺序我固定分三步走。
# 1. 检查 HTML 中引用的 CSS 文件是否真实存在 while read path; do if [ -f "$path" ]; then echo "存在: $path" else echo "缺失: $path" fi done < <(grep -oP '(?<=href=")[^"]+\.css' index.html)这段命令把 index.html 里所有href以.css结尾的路径抽出来，逐个判断文件是否存在。grep -oP的-o只输出匹配片段，-P启用 Perl 正则，(?<=href=")是后行断言，表示只匹配href="之后的内容。while read循环从命令替换的结果中读取每一行，[ -f "$path" ]判断文件是否存在。
资源文件都在但样式依然错乱，就把浏览器切到开发者工具的 Network 面板，看 CSS 的响应状态码：404 是文件缺失，403 是权限限制，还有一类是file://协议下的本地资源加载限制。遇到后一种情况，起一个本地 HTTP 服务就能解决。
# 在项目根目录起 HTTP 服务，绕过 file:// 限制 python3 -m http.server 8080这条命令启动一个监听 8080 端口的静态文件服务，当前目录就是网站根目录。浏览器访问http://localhost:8080/index.html即可正常加载 css 和图片。8080 只是端口号，如果被占用可以换成 8000 或 9000，注意访问地址也要跟着变。
5. 静态原型迁移到现代项目的三个上手技巧
5.1 先导出一份视觉规范，别急着写组件
老页面虽然没有设计规范文档，但视觉风格是完整的。迁移前先用浏览器取色器和字号面板把主色、辅助色、价格色、按钮色记录下来，字体族和基础字号也记全。颜色提取也可以用命令直接做。
# 提取 CSS 中所有十六进制颜色，按出现次数排序 grep -hoP '#[0-9a-fA-F]{3,8}' *.css | sort | uniq -c | sort -rn这里-h不打印文件名，-o只输出匹配到的颜色值，sort排序后交给uniq -c统计次数，最后的sort -rn按次数降序排列。输出结果里出现次数最多的几个颜色，就是页面默认的主题色，直接填进设计 token 的初始值。
5.2 把所有资源路径收口到配置项
老页面里的图片路径往往散落在 CSS、HTML 和行内样式中，迁移时最容易出问题。我一般先做一次全量提取，把引用的图片和字体路径列成清单，再统一替换成模板变量或构建配置里定义的 assetBase。
# 查找 CSS 中所有 url() 引用 grep -noP 'url\(\K[^)]+' index*.css | sort -u\K的作用是标记匹配的起点，把url(部分排除在外，只输出括号内的路径。sort -u去重后得到全部资源引用。逐个确认这些文件在目标目录中的位置，再按新目录结构批量改写路径值，比迁移完成后拿着报错信息反查快得多。
5.3 用文件 hash 锁定版本，避免改错分支
静态页迁移最怕“不知道当前这份是不是最新版”。迁移完成后，把多个文件的 hash 值打出来存档，之后每次拿到新包，先对一下数字就能判断是不是同一版本。
# 计算所有 css 文件的 md5 值 md5sum index*.css > version.txt cat version.txtmd5sum对每个 css 文件计算哈希，>把结果重定向到 version.txt。哈希值相同说明文件内容完全一致，任何一个字节有变化，结果就会不同。把这个文件留在项目根目录里，下次再有人发来同名压缩包，对比一下就不会在十几个目录里来回翻找了。
本文还有配套的精品资源，点击获取
