简介：这份资源面向网页设计初学者与进阶开发者，围绕黑马程序员「学成在线」案例，提供从视觉稿到页面实现的完整练习素材，可用于对照学习HTML结构搭建与CSS样式还原，尤其适合想打通设计与前端编码衔接环节的学习者。压缩包共11个文件、约17.71MB，包含4个PSD设计稿、5张PNG切图、1个HTML页面与1个CSS样式表，PSD覆盖首页、课程列表页、课程介绍页与职业规划等页面，便于逐层拆解布局与配色思路，HTML与CSS则对应呈现结构与样式规则。目前已有14060人学习下载，说明该案例在同类教程中认可度较高。通过比对设计稿与代码，读者可以理解色彩搭配、字体选择与版式调整如何落地，并借助分层PSD与切图素材反复练习页面复现，逐步掌握响应式布局与界面细节处理的方法。
1. 学成在线静态页拆解：一份能直接跑通的 HTML+CSS 教学案例
打开压缩包，第一眼看到的是index.html和一堆按模块切好的 PSD 源文件，而不是那种“只有一张设计图、代码全靠自己猜”的素材包。这个项目的定位很明确：它是一套在线教育平台首页的静态页面复刻案例，用纯 HTML + CSS 把导航、轮播、课程卡片、讲师推荐、页脚这些典型区块一层层搭出来，配套 PSD 让你能对着设计稿量尺寸、取色值、切图标。适合谁？刚学完盒模型和浮动、想找一个完整页面练手的人；也适合带课的老师拿它当课堂案例，因为结构干净、命名规整、没有框架干扰。关键词里的 html、css、pink 老师、黑马程序员、学成在线案例，说的就是这类“跟着视频敲一遍、再自己改一遍”的练手项目。它不解决业务问题，但能让你第一次完整经历“设计稿 → 结构拆分 → 样式还原”的链路，这个链路走顺了，后面上框架才不会虚。
2. 项目结构与技术选型：为什么它坚持不用框架
2.1 目录长什么样，每个文件夹负责什么
拿到源码先别急着打开浏览器，先把目录扫一遍，心里有个地图。这类教学案例的目录通常长这样，我按实际拆包时最常见的组织方式还原：
学成在线/ ├── index.html # 首页主结构 ├── css/ │ ├── base.css # 重置样式、公共变量、清除浮动 │ ├── index.css # 首页各模块样式 │ └── common.css # 头部、底部等复用区块 ├── images/ # 切图产物（logo、图标、banner） ├── upload/ # 课程封面、讲师头像等位图 ├── psd/ # 设计源文件，按模块分 PSD │ ├── 首页.psd │ ├── 课程模块.psd │ └── 讲师模块.psd └── fonts/ # 图标字体（如果有）base.css是地基，负责把浏览器默认的 margin、padding 清掉，统一box-sizing，定义好清除浮动的工具类；common.css放头部导航和页脚这种每个页面都有的部分；index.css才是首页独有的样式。这种拆法的好处是改一个模块不用在几千行里翻找，坏处是新手容易漏引某个 css 文件导致样式“莫名其妙不生效”——后面避坑章节会专门说这个。psd/目录是这份资源区别于普通代码包的地方，它让你能回到设计源头，而不是对着截图瞎猜间距。
2.2 技术选型：纯静态三件套，刻意不引入构建工具
这个项目只用 HTML5 + CSS3，没有 Vue、没有 React、没有 Sass 编译，也没有 webpack。这不是技术落后，而是教学场景下的刻意选择。你想想，如果一上来就npm install，新手连“为什么样式没生效”都还没搞明白，就被构建报错劝退了。纯静态的好处是：双击index.html就能看效果，改一行 CSS 刷新就能验证，反馈链路最短。
布局上它用的是经典的浮动 + 定位方案，而不是 Flex 或 Grid。原因同样现实：这套案例对应的是 CSS 基础阶段，浮动布局是绕不过去的基本功，清除浮动、BFC、外边距塌陷这些“玄学”问题，只有在浮动布局里才会真实遇到。等你把这份代码敲完，再去看 Flex，会发现很多当年踩的坑直接被规范掉了，理解反而更深。
提示：如果你已经熟悉 Flex，完全可以拿这份项目做“改造练习”——把浮动布局逐个替换成 Flex，对比两种写法的差异，这比单纯抄一遍收获大得多。
2.3 页面模块的拆分逻辑
首页从上到下可以拆成五个大块：头部导航（logo + 导航链接 + 搜索框 + 登录注册）、轮播区（banner 图 + 左右箭头 + 小圆点）、精品课程推荐（标题 + 课程卡片网格）、讲师推荐（讲师头像 + 简介）、页脚（友情链接 + 版权信息）。每个大块在 HTML 里对应一个语义化标签，比如<header>、<section>、<footer>，内部再用div细分。
拆分的核心原则是“一个模块一个容器”，容器负责定宽居中，内部元素负责排列。比如课程卡片区，外层.course-list定宽并清除浮动，里面每个.course-item左浮动、设好宽度和间距。这样改卡片数量时只动 HTML，不用碰布局代码。我一般会建议在动手写 CSS 之前，先在纸上把每个模块的盒子画出来，标上宽高和间距，再开始敲——这个习惯能省掉大量“写完发现对不上设计稿”的返工。
3. 核心模块代码逐段拆：从导航到课程卡片
3.1 公共重置与清除浮动：base.css 里的地基
先看base.css，这是所有样式生效的前提。下面这段是我从这类项目里提炼的典型写法，保留了关键部分：
/* 清除默认内外边距，统一盒模型 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 去掉列表默认小圆点 */ ul, ol { list-style: none; } /* 去掉链接下划线，颜色继承父级 */ a { text-decoration: none; color: #333; } /* 清除浮动工具类：给父容器加 clearfix */ .clearfix::after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } /* 版心：定宽居中，全站复用 */ .w { width: 1200px; margin: 0 auto; }逐段说。box-sizing: border-box让 padding 和 border 算进宽度里，这样你给卡片设width: 280px再加内边距，总宽还是 280，不会撑破布局——这是新手最容易翻车的地方之一，不加这一行，后面所有宽度计算都得重来。.clearfix用伪元素清除浮动，父容器加了它，内部浮动的子元素才能把父容器“撑开”，否则父容器高度为 0，下面的模块会叠上来。.w是版心类，1200px 是这类 PC 端页面的常见定宽，margin: 0 auto实现水平居中，全站每个模块的外层容器都套这个类，保证左右对齐一致。
注意：
*选择器重置所有元素，在大型项目里会有性能顾虑，但教学案例页面规模小，这样写最直观。真实项目里更常见的是用 normalize.css 或按需重置。
3.2 头部导航：flex 之前的经典浮动布局
头部导航是练浮动的好素材。结构上左边 logo、中间导航链接、右边搜索和登录，典型的三段式。代码大致如下：
<header class="header w clearfix"> <div class="logo fl"> <a href="#"><img src="images/logo.png" alt="学成在线"></a> </div> <nav class="nav fl"> <ul class="clearfix"> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul> </nav> <div class="search fr"> <input type="text" placeholder="输入关键词"> <button>搜索</button> </div> </header>.header { height: 80px; line-height: 80px; /* 单行文字垂直居中 */ } .fl { float: left; } .fr { float: right; } .nav li { float: left; margin: 0 20px; } .nav li a { display: block; height: 80px; padding: 0 10px; } .nav li a:hover { border-bottom: 2px solid #00a4ff; /* 悬停底部高亮 */ }逻辑说明：.fl和.fr是两个工具类，分别左浮动和右浮动，把 logo、导航、搜索框排成一行。line-height: 80px等于容器高度，让单行文字垂直居中，这是 PC 端导航最省事的做法。导航项li左浮动，a设成display: block并撑满高度，这样鼠标悬停的点击区域是整个导航块，而不是只有文字那一小条——体验细节，但很多新手会漏。悬停用border-bottom做高亮，注意这会让元素高度多出 2px，如果导航项本身有背景色，可能出现轻微跳动，稳妥做法是预留padding-bottom或用box-shadow模拟下划线。
参数上，margin: 0 20px控制导航项间距，padding: 0 10px控制文字与点击区边缘的距离，这两个值对着 PSD 量出来改就行。搜索框部分用float: right靠右，内部input和button并排，注意给input设outline: none去掉聚焦时的默认蓝框，再用border自定义边框，否则浏览器默认样式会破坏设计稿的观感。
3.3 课程卡片网格：浮动布局里最容易错位的部分
课程推荐区是整页最考验布局功底的地方。设计稿通常是一行四张卡片，卡片之间有固定间距。用浮动实现的关键是宽度和间距的精确计算：
.course-list { /* 父容器，已加 clearfix */ } .course-item { float: left; width: 280px; height: 320px; margin-right: 26px; /* 卡片间距 */ background: #fff; transition: box-shadow 0.3s; } /* 每行最后一个去掉右边距，避免换行 */ .course-item:nth-child(4n) { margin-right: 0; } .course-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .course-item img { width: 100%; height: 160px; object-fit: cover; /* 封面图裁切不变形 */ }算一下：版心 1200px，四张卡片，间距 26px，那么4 × 280 + 3 × 26 = 1120 + 78 = 1198，差 2px 是留给浮动的容错，实际项目里要么把卡片宽度调到 281，要么把间距调到 25，保证总和不超过 1200。这个计算必须提前做，否则第四张卡片会被挤到下一行，出现“三张一行、一张孤零零”的错位——这是浮动布局最经典的血泪经验。
nth-child(4n)去掉每行最后一个的右边距，是防止间距累积导致换行。object-fit: cover让课程封面图按比例裁切填满容器，不会因为原图比例不一致而拉伸变形。悬停加阴影用transition做过渡，成本低但观感提升明显。卡片内部再分上下两块：上半图片，下半标题、讲师、价格，用padding和line-height控制文字节奏，价格用醒目的颜色和字号突出。
3.4 轮播区与定位：absolute 配合 relative 的父子关系
轮播区是定位练习的典型场景。外层容器position: relative，左右箭头和小圆点position: absolute相对它定位：
.banner { position: relative; height: 420px; overflow: hidden; } .banner img { width: 100%; height: 100%; object-fit: cover; } .banner .arrow-l, .banner .arrow-r { position: absolute; top: 50%; margin-top: -30px; /* 自身高度一半，实现垂直居中 */ width: 40px; height: 60px; background: rgba(0, 0, 0, 0.3); color: #fff; text-align: center; line-height: 60px; cursor: pointer; } .arrow-l { left: 0; } .arrow-r { right: 0; } .banner .dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); /* 水平居中 */ }关键点有两个。一是箭头的垂直居中：top: 50%把元素顶部推到容器中线，再用负的margin-top（等于自身高度一半）往上拉，这是绝对定位元素垂直居中的经典手法；小圆点则用left: 50%加translateX(-50%)水平居中，两种手法都值得记住。二是overflow: hidden裁掉超出容器的部分，防止图片或箭头溢出破坏布局。
提示：这份案例的轮播通常只有静态结构和样式，没有 JS 自动切换逻辑。想加交互，可以在
index.js里用setInterval切换图片的src或transform，这是很好的练手延伸。
4. 跑起来与还原度校验：本地打开到逐像素对稿
4.1 三步把页面跑起来
这个项目不需要任何环境，步骤简单到可以背下来：
- 解压压缩包到任意英文路径目录（路径带中文有时会导致图片加载异常，虽然现代浏览器大多支持，但养成英文路径习惯没坏处）。
- 双击
index.html，默认浏览器打开即可看到页面。 - 按
F12打开开发者工具，切到 Console 面板，确认没有红色报错；切到 Network 面板刷新，看图片和 css 是否全部 200 加载成功。
如果页面样式全乱、只有裸 HTML，九成是 css 路径写错或文件没放对位置。检查index.html里<link rel="stylesheet" href="css/index.css">的相对路径，确认css文件夹和index.html同级。图片不显示同理，看src路径和images/目录是否对得上。这一步排查完，页面应该和设计稿大体一致了。
4.2 对着 PSD 校验尺寸和色值
还原度怎么保证？靠 PSD。用任意支持 PSD 的工具打开psd/首页.psd，用吸管取色、用标尺量间距，然后回到代码里核对。我一般按这个顺序对：先对版心宽度和模块高度，再对模块之间的垂直间距，最后对字号、行高、颜色。颜色值建议统一提到base.css顶部用 CSS 变量管理：
:root { --main-color: #00a4ff; /* 主色，从 PSD 吸取 */ --text-color: #333; --gray-color: #999; --bg-gray: #f3f5f7; }这样改主题色只动一处，不用全文件搜索替换。字号方面，PC 端正文常见 14px，标题 18～24px，行高一般是字号的 1.5 倍左右，具体以 PSD 标注为准。对稿时别追求一次到位，先把大块位置摆对，再抠细节，否则容易在某个 2px 的间距上耗半天。
4.3 用开发者工具做“像素级”微调
浏览器开发者工具是这个项目最好的调试伙伴。选中某个元素，右侧 Styles 面板能实时改数值，改到满意再把值抄回代码。想量两个元素之间的距离，用 Elements 面板选中元素，鼠标悬停时页面会高亮盒模型，配合标尺能看出 margin 和 padding 的实际占位。遇到“明明设了宽度却对不上”的情况，先看盒模型图里 content、padding、border 各占多少，八成是box-sizing没生效或某个 padding 忘了算。
还有一个实用技巧：在 Console 里执行document.querySelectorAll('.course-item').length，快速确认卡片数量是否符合预期；用getComputedStyle查某个元素最终生效的样式，排查“样式被覆盖”的问题特别快。
5. 避坑与常见问题：那些年静态页踩过的坑
5.1 样式不生效：先查引入顺序和选择器权重
现象：改了index.css里的样式，刷新页面毫无变化。原因：三种可能——<link>路径写错导致文件根本没加载；base.css在index.css之后引入，重置样式把自定义样式覆盖了；选择器权重不够，被更具体的选择器压住。解决：Network 面板确认 css 文件 200 加载；引入顺序固定为base.css → common.css → index.css，后引入的优先级更高；用开发者工具看 Styles 面板里被划掉的样式，就知道是谁覆盖了谁，必要时提高选择器 specificity，但别滥用!important。
5.2 浮动导致父容器高度塌陷
现象：课程卡片区下面的模块叠到了卡片上面，或者页脚跑到了页面中间。原因：子元素全部浮动后脱离文档流，父容器没有内容撑开，高度变成 0。解决：给父容器加clearfix类（前面base.css里定义过），或者给父容器设overflow: hidden触发 BFC。前者更可控，后者在需要溢出显示的场景（比如下拉菜单）会出问题，所以优先用 clearfix。
5.3 图片路径大小写与中文名翻车
现象：本地 Windows 上图片正常，换台机器或部署到服务器后图片全裂。原因：Windows 文件系统不区分大小写，Logo.png写成logo.png也能找到；Linux 服务器区分大小写，直接 404。中文文件名在某些服务器编码下也会出问题。解决：所有文件名统一小写、用英文和短横线，比如course-cover-01.jpg；HTML 里的src严格对应实际文件名。这个习惯越早养成越好，能省掉大量部署时的排查时间。
5.4 盒模型算错导致一行放不下四张卡片
现象：设计稿一行四张卡片，实际渲染成三张一行。原因：卡片宽度加间距的总和超过版心宽度，或者box-sizing没设成border-box，padding 和 border 额外撑宽了元素。解决：先确认* { box-sizing: border-box; }生效；再按卡片宽 × 数量 + 间距 × (数量 - 1) ≤ 版心宽重新算一遍，留 1～2px 余量；最后检查是否有隐藏的 margin 或 border 没算进去。
5.5 行内元素设宽高无效
现象：给<a>或<span>设了width、height，完全没反应。原因：行内元素（inline）不接受宽高设置，这是 CSS 规范决定的。解决：改成display: block或display: inline-block。导航链接、按钮这类需要点击区域的元素，通常设成block并撑满父容器高度，点击体验更好。
6. 二次开发：把教学案例改成自己的作品集页面
这份代码最大的价值不是“还原得多像”，而是它给了你一个干净的起点去改。我一般会从三个方向动手，每个方向都能练到不同的东西。
方向一：换皮做个人作品集。保留整体骨架，把课程卡片换成项目卡片，字段从“课程名 / 讲师 / 价格”改成“项目名 / 技术栈 / 链接”。改的时候注意 HTML 结构和 CSS 类名同步调整，别只改文字不改类名，否则样式会错位。配色用前面定义的 CSS 变量统一换，十分钟就能出一版新视觉。
方向二：浮动改 Flex，对比两种布局。挑课程卡片区下手，把.course-item的float: left和margin-right换成父容器的display: flex; gap: 26px; flex-wrap: wrap;，删掉nth-child(4n)的边距处理。改完你会发现代码少了一截，也不用再担心清除浮动。这个对比做完，你对“为什么现代布局推荐 Flex”会有体感，而不是背结论。
方向三：加交互，从静态走向动态。轮播加自动切换和手动点击，课程卡片加悬停详情浮层，导航加吸顶效果。以吸顶为例，用几行 JS 监听滚动：
// 导航吸顶：滚动超过头部高度时固定 const header = document.querySelector('.header'); const headerTop = header.offsetTop; window.addEventListener('scroll', () => { if (window.scrollY > headerTop) { header.classList.add('fixed'); } else { header.classList.remove('fixed'); } });.header.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }逻辑很直白：记录导航初始距顶部的距离，滚动超过它就加fixed类，position: fixed让导航脱离文档流固定在顶部，z-index保证它盖在其他内容之上。注意吸顶后导航脱离文档流，下面的内容会往上跳，稳妥做法是给占位元素补一个等高的padding-top，或者用position: sticky替代——后者一行 CSS 就能实现，兼容性现在也够用了，值得作为改造练习对比一下。
验证改造是否成功，别只看“看起来对”。我的习惯是每次改完都走一遍：刷新看 Console 有无报错、Network 有无 404、缩放浏览器窗口看布局是否错乱、用开发者工具切到移动端视图看有没有横向滚动条。这套检查流程走顺了，交付出去的页面才敢说“能跑”。
从那以后我每次拿到这类静态案例，都强制自己先跑通、再对稿、最后至少改一个模块，而不是敲完就扔——因为真正记住的从来不是抄过的那一遍，而是改出问题又修好的那几次。希望帮到你。
本文还有配套的精品资源，点击获取
