简介：这份资源面向网页设计初学者与进阶开发者，围绕黑马程序员「学成在线」案例，提供从视觉稿到页面实现的完整练习素材，可用于对照学习HTML结构搭建与CSS样式还原，理解设计稿到代码的落地过程。压缩包共11个文件，约17.71MB，包含4个PSD分层设计稿（首页、课程列表页、课程介绍页、职业规划页）、5张PNG图片素材、1个HTML页面与1个CSS样式文件，覆盖设计源文件与前端代码两类内容，便于逐层拆解图层组织、配色与布局思路，并对照样式规则分析色彩搭配、字体选择与响应式处理。目前已有14060人学习下载，适合作为课程配套练习或自主临摹项目，帮助读者在还原案例的过程中积累页面结构与样式编写经验，提升独立完成静态页面的能力。

1. 学成在线 PSD 素材及代码：一份能直接跑起来的静态页还原包

前端练手项目里，「学成在线」这个案例被反复提起，但多数人卡在同一个地方：拿到 PSD 却不知道从哪一层切起，切完发现布局对不上，对上了又发现字体和间距全是玄学。这份资源把 PSD 源文件和配套 HTML/CSS 代码一起打包，解决的正是「设计稿到可运行页面」中间那段没人愿意细讲的落地环节。它适合刚学完 HTML 标签和 CSS 盒模型、想找一个完整页面练手的人，也适合带新人时需要一个标准参照物的从业者。整个案例是典型的 PC 端企业培训类站点首页，包含顶部导航、轮播区、课程卡片列表、讲师模块和页脚，结构规整、模块重复度高，正好用来练浮动、定位、清除浮动和精灵图这几样老派但绕不开的基本功。下面按「先看清结构、再动手切图、最后排错」的顺序拆开讲，每一步都能照着复现。

2. 拆解 PSD 图层与页面骨架：先定版心再谈切图

拿到 PSD 之后最忌讳的操作是打开就切。图层命名混乱、分组嵌套深、隐藏图层一堆，直接切出来的图尺寸和位置大概率对不上。正确顺序是先读设计稿的整体约束，再决定切哪些图、哪些用 CSS 画。

2.1 从 PSD 里读出三个关键参数

打开 PSD 后先做三件事，不用急着导出任何图片。第一，量版心宽度。用矩形选框工具拉一条横跨内容区的选区，看信息面板的宽度值，这个案例里内容区是居中的固定宽度，两侧留白随浏览器变化，所以后面所有模块都要套一个定宽容器再margin: 0 auto。第二，量模块间距。相邻两个区块之间的垂直距离决定了margin和padding的分配，量的时候以文字基线或卡片边缘为准，不要以图层边界为准，因为图层边界常常带透明像素。第三，记录主色和辅助色的十六进制值，用吸管工具取色后直接写进 CSS 变量或注释里，避免后面反复回 PSD 取色。

常见做法是新建一个文本文件，把版心宽度、各模块高度、主色、字号、行高逐条记下来，这份清单就是后面写 CSS 的依据。血泪经验是：不记清单直接写，写到第三个模块就会开始凭感觉填数值，最后整页间距忽大忽小。

2.2 图层分组与切图边界的判断

PSD 里通常按「头部 / 轮播 / 课程列表 / 讲师 / 页脚」分好组，但组内往往混着文字图层、形状图层和位图。判断标准很简单：能用 CSS 写出来的绝不切图。纯色背景、圆角矩形、分割线、简单图标优先用 CSS 的background-color、border-radius、border实现；只有渐变复杂、带纹理、含插画或照片的部分才导出为图片。这个案例里需要切的主要是轮播大图、课程封面缩略图、讲师头像和几个装饰性小图标。

切图时统一导出为 PNG 或 JPG，命名用「模块名_用途」的格式，比如banner_01.jpg、course_cover_01.jpg、icon_play.png。小图标如果尺寸一致、风格统一，可以合并成一张精灵图，用background-position定位，减少请求数。导出前记得关掉无关图层，否则会把隐藏的文字或参考线一起带出来。

2.3 搭出可复用的页面骨架

骨架阶段只写结构不写样式细节，把语义标签用对。下面这段是首页的顶层结构，模块顺序和 PSD 分组一一对应：

<!-- 页面骨架：模块顺序与 PSD 分组保持一致 --> <div class="header"> <!-- 顶部导航 --> <div class="w"> <!-- 版心容器，统一宽度居中 --> <div class="nav">...</div> </div> </div> <div class="banner">...</div> <!-- 轮播区，通栏背景 --> <div class="course"> <!-- 课程列表 --> <div class="w">...</div> </div> <div class="teacher"> <!-- 讲师模块 --> <div class="w">...</div> </div> <div class="footer">...</div> <!-- 页脚，通栏背景 -->

这里的.w是版心类，全站复用，宽度取 PSD 量出来的值，配合margin: 0 auto居中。通栏模块（banner、footer）的背景铺满整行，内容仍然套.w，这样背景色不会因为版心限制而断开。骨架写完先在浏览器里看一眼，确认模块上下顺序和设计稿一致，再进入样式阶段。顺序错了后面调间距会非常痛苦，因为浮动和定位都依赖文档流位置。

3. 用浮动与定位还原三大模块：从导航到课程卡片

骨架有了，接下来按模块逐个还原。这个案例的技术栈就是原生 HTML + CSS，没有框架，所以浮动布局、清除浮动、绝对定位这几样必须吃透，否则卡片会掉行、轮播会错位。

3.1 顶部导航的浮动布局与清除浮动

导航区左边是 logo，中间是横向菜单，右边是登录注册，典型的三段式。做法是给 logo 和右侧区域分别float: left和float: right，中间菜单也左浮动，父容器清除浮动。清除浮动用伪元素方案，比加空 div 干净：

/* 清除浮动：给浮动元素的父容器加 clearfix */ .clearfix::after { content: ""; display: block; clear: both; } .nav-logo { float: left; } .nav-menu { float: left; margin-left: 40px; } .nav-menu li { float: left; margin-right: 30px; } .nav-user { float: right; }

clear: both让伪元素落到所有浮动元素下方，父容器因此被撑开，背景色和边框才不会塌陷。菜单项之间的间距用margin-right控制，最后一个可以单独去掉，或者用li + li选择器统一加左边距，避免首项多出空隙。导航高度用line-height等于容器高度实现垂直居中，比padding上下对称更好调。

3.2 轮播区的定位与层级控制

轮播区是通栏背景加居中内容，左右箭头绝对定位在两侧，底部小圆点绝对定位在底部居中。父容器设position: relative，子元素用position: absolute加top/left/right/bottom定位。箭头垂直居中用top: 50%配合transform: translateY(-50%)，比算固定像素稳。

/* 轮播容器与箭头定位 */ .banner { position: relative; height: 420px; /* 高度取自 PSD 量值 */ background: url(../images/banner_bg.jpg) center/cover no-repeat; } .banner .arrow-left, .banner .arrow-right { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; background: url(../images/icon_arrow.png) no-repeat; } .banner .arrow-left { left: 60px; } .banner .arrow-right { right: 60px; transform: translateY(-50%) rotate(180deg); }

center/cover保证背景图铺满且不变形，箭头用同一张图旋转 180 度复用，省一次切图。层级上如果箭头被内容盖住，给箭头加z-index，但前提是它和内容在同一层叠上下文里，父容器有position: relative就满足。轮播本身如果要做自动切换，那是 JS 的活，静态还原阶段只保证结构和样式到位。

3.3 课程卡片的浮动网格与间距对齐

课程列表是重复卡片，一行四张，卡片之间等距。用浮动做网格时，最容易翻车的是最后一张掉行，原因是容器宽度除以卡片宽度除不尽，或者margin-right加多了。稳妥做法是卡片宽度用百分比，间距用margin-right，每行最后一张用nth-child(4n)去掉右边距：

/* 课程卡片：一行四张，第四张去右边距 */ .course-list { overflow: hidden; } /* 触发 BFC，包住浮动子元素 */ .course-item { float: left; width: 23.5%; /* 四张加三个间距刚好占满 */ margin-right: 2%; margin-bottom: 20px; background: #fff; } .course-item:nth-child(4n) { margin-right: 0; } .course-item .cover { width: 100%; display: block; }

overflow: hidden在这里既清除浮动又裁掉溢出，一举两得，但要注意它会把超出容器的阴影或下拉菜单也裁掉，如果卡片有悬浮阴影效果，改用 clearfix。卡片内部封面图设display: block消除图片底部默认间隙，这个间隙是行内元素基线对齐造成的，很多人以为是 padding 写错了。标题用两行截断，超出部分overflow: hidden加text-overflow: ellipsis，配合固定高度保证卡片等高。

4. 避坑与排查：静态页还原里最容易翻车的五处

代码能跑不代表还原到位，下面这几条是这个案例里高频出现的问题，每条都按现象、原因、解决三步走，照着排查能省不少时间。

4.1 卡片掉行或错位

现象：一行本该四张卡片，实际只排了三张，第四张跑到下一行。原因通常是卡片宽度加间距超过 100%，或者边框、内边距把盒子撑大了。解决：确认box-sizing: border-box是否生效，把卡片宽度和间距加起来算一遍，必要时把宽度调小 0.5% 留余量。另外检查有没有多余的空白字符在浮动元素之间产生间隙。

4.2 父容器高度塌陷

现象：给子元素加了浮动后，父容器的背景色或边框消失，下面的模块往上顶。原因：浮动元素脱离文档流，父容器计算高度时不计入。解决：给父容器加 clearfix 伪元素，或者用overflow: hidden触发 BFC。注意overflow: hidden会裁剪溢出内容，有悬浮效果时慎用。

4.3 图片底部出现莫名间隙

现象：图片下方有几像素空白，导致卡片高度比预期高。原因：img默认是行内元素，按基线对齐，基线下方留出字母降部空间。解决：给图片设display: block或vertical-align: top，一行 CSS 搞定，不用去调 margin。

4.4 绝对定位跑出父容器

现象：轮播箭头或角标定位到了页面别的位置。原因：父容器没有设position: relative，绝对定位元素往上找最近的定位祖先，找到了body或更外层。解决：给直接父容器加position: relative，并确认没有中间层意外设置了position导致定位基准偏移。

4.5 字体与行高在不同机器上不一致

现象：本地调好的文字换台电脑就换行或溢出。原因：设计稿用的字体本机没装，浏览器回退到默认字体，字宽变化。解决：优先用系统通用字体栈，比如font-family: "Microsoft YaHei", Arial, sans-serif，不要依赖单一商业字体；行高用无单位数值或百分比，避免固定像素在不同字号下比例失调。

提示：排查布局问题时，给可疑元素临时加outline: 1px solid red比改背景色更直观，不会影响盒模型尺寸。

5. 精灵图与响应式微调：让还原页更接近可用状态

静态还原做到能看只是及格线，真正拉开差距的是细节处理。这个案例里小图标不少，逐个切图会让请求数飙升，合并成精灵图是常规操作；另外虽然是 PC 端案例，加一点宽度适配能让页面在窄屏下不至于横向滚动条满天飞。

5.1 精灵图的坐标计算与复用

精灵图的做法是把多个小图标按固定间距排在一张透明 PNG 上，CSS 里用background-position取对应区域。关键是坐标要算准，通常以图标左上角在整图中的像素位置取负值：

/* 精灵图定位：图标在整图中的左上角坐标取负 */ .icon { display: inline-block; width: 24px; height: 24px; background: url(../images/sprite.png) no-repeat; } .icon-play { background-position: -0px -0px; } .icon-star { background-position: -24px -0px; } .icon-time { background-position: -48px -0px; }

每个图标的width/height必须和精灵图里单格尺寸一致，否则会把相邻图标露出来。坐标用负值是因为背景图默认从元素左上角开始铺，往左上移才能露出目标区域。如果图标之间有留白，坐标要按实际间距累加，不能简单按图标宽度乘序号。改图标尺寸时不要直接改width/height，那会拉伸图标，正确做法是重新导出对应尺寸的精灵图，或者用background-size整体缩放并同步调整坐标。

5.2 窄屏下的最小适配

PC 端案例不要求完整响应式，但至少保证窗口缩到 1200px 以下时不出现横向滚动条。做法是给版心容器加min-width兜底，同时给body设overflow-x: auto，让窄屏出现滚动条而不是内容被裁。更细一点可以用媒体查询在 1024px 以下把课程卡片从四列改两列：

/* 窄屏适配：卡片两列，版心不再强制居中留白 */ @media (max-width: 1024px) { .w { width: 96%; } .course-item { width: 48%; margin-right: 4%; } .course-item:nth-child(4n) { margin-right: 4%; } .course-item:nth-child(2n) { margin-right: 0; } }

这里要注意nth-child的覆盖顺序，先重置四列规则再应用两列规则，否则第四张的去边距逻辑会干扰两列布局。媒体查询的断点不要拍脑袋，按内容开始拥挤的实际宽度定，这个案例里四列卡片在 1024px 左右开始挤，断点就设在这里。

5.3 验证还原度的笨办法

还原完怎么判断像不像？我一般会把浏览器窗口调到和 PSD 画布同宽，截图后和设计稿并排对比，重点看三处：模块之间的垂直间距是否一致、卡片内文字与边缘的距离是否统一、图标和文字的基线是否对齐。间距不一致多半是 margin 和 padding 混用导致的，统一成一种就好；基线不对齐通常是行内元素和块级元素混排，给图标加vertical-align: middle能解决大半。从那以后我每次还原静态页，都会在写完每个模块后立刻截图比对，而不是全部写完再统一看，因为问题越早发现越容易定位。希望这份拆解能帮到你，把 PSD 到页面的那段路走顺。

本文还有配套的精品资源，点击获取