简介：这是一套源自黑马程序员“学成在线”课程案例的网页设计练习包，定位为前端入门与视觉还原训练的实战素材，适合刚接触HTML和CSS的初学者，也适合希望提升页面精细还原能力的设计师或开发者。压缩包共11个文件，整体约17.71MB，包括4个PSD设计稿、5张png切图素材以及配套的HTML与CSS代码。PSD文件覆盖首页、课程介绍页、职业规划页等典型版式，可逐层拆解设计思路；png素材对应页面中的图标、Logo和Banner元素；HTML与CSS则清晰呈现了从设计稿到静态页面的实现过程。目前已有14059人学习下载，具有较好的入门参考价值。通过对照设计文件和代码，读者能学会如何组织图层、切图命名、设定颜色与字体、调整间距与布局，理解前端开发中视觉还原的完整链路，从而在自己的练习中更高效地完成页面制作。

1. 为什么拿“学成在线”当第一个完整页面：一次把PSD变成网页的完整训练

很多同学学完 HTML 标签和 CSS 属性之后，打开编辑器反而不知道第一行该写什么。语法都会，但一碰到整页设计稿就卡住，这是从「知识点」过渡到「完整项目」之间最常见的一道坎。这套「学成在线 PSD 素材及代码」解决的正是这个问题：它给的不是零散的小练习，而是一份完整的教学级设计稿，连同页面结构、版心布局、浮动定位、雪碧图、清除浮动这些实战写法一起，带你把一个真实的首页从 PSD 还原成静态网页。适合正在做课程设计或毕业设计、需要一个整站案例练手的学生，也适合刚入行、想在作品集里放一个完整静态页面的新人。它的价值不在于「代码能跑」，而在于「照着设计稿把页面还原出来」的完整流程——这一步走通，后面学框架、写组件都会顺很多。

2. 拿到 PSD 后先别写代码：设计稿分析、切图与 CSS 选型

2.1 先读设计稿再动编辑器：从 PSD 里提取尺寸、颜色与字体

拿到「学成在线」的 PSD 素材，第一步不是打开代码编辑器，而是先花二十分钟把设计稿读明白。我一般会先在 Photoshop 里打开图层面板，看看整个画布的尺寸——这类教学案例的设计稿通常做的是 1600px 左右的宽画布，而页面的主要内容区域会被约束在一个固定宽度的「版心」里。以这套素材常见的参数为例，版心宽度是 1200px，居中显示；导航栏高度约 42px 到 60px 之间；banner 区域通常是整宽背景、内部内容对齐版心；课程卡片列表则是四列网格。

这些尺寸不靠肉眼猜，而是用 PSD 里的标尺工具和信息面板量出来。量完尺寸还要取色，主色、辅色、文字色、边框色分别记录成一份色板，写 CSS 的时候直接引用变量或注释里的色值，避免写到一半反复切回去吸色。字体方面，注意设计稿里中文字体与数字字体的区分，正文一般用系统默认字体栈，标题可能单独指定字号和字重。把这一页信息整理成下面这种参数表，后面写代码会清晰很多：

2.2 布局选型：为什么这个案例最适合用浮动加清除浮动

「学成在线」这种教学案例在布局选型上有一个比较固定的答案：内容区域用float浮动布局，配合clearfix清除浮动。很多初学者会问：现在都用 flex 了，为什么还要用浮动？这个问题的答案恰恰是这套素材的核心训练目标。用 flex 布局，子元素会自动排成一行，间距浏览器帮你算；而用浮动，你必须自己面对盒子的宽高、margin 的叠加、父容器的高度塌陷。这些看起来是麻烦，实际上是在帮你建立盒子模型和标准流、浮动流的直觉。

如果你做的是自己的课设项目，用 flex 完全没问题；但如果是拿这套素材来练基本功或者做答辩演示，我建议至少主体结构用浮动来实现。原因很实际：答辩时老师问「为什么这个卡片会换行」「为什么父元素高度没了」，你能讲清楚原理，比回答「flex 自带这个效果」要有说服力得多。我的习惯是：导航栏和课程列表这类需要「横向排列」的结构用浮动，整体页面骨架用标准流从上往下排，竖直方向上的内容堆积不涉及浮动问题。

2.3 文件结构与命名规范：一个页面也要按项目来组织

很多同学写第一个完整页面时，把所有代码堆在一个index.html里，样式全写在<style>标签中。这套素材配套的代码一般会给出一个更规范的目录结构，建议直接照搬并理解它的用意：

project/ ├── index.html ├── css/ │ └── index.css └── images/ ├── logo.png ├── banner.png ├── icon-xxx.png └── course-cover-xx.jpg

HTML 和 CSS 分文件是必须的，这关系到后面维护和答辩讲结构。命名上遵循「语义化 + 模块化」：外层盒子用.header、.banner、.course-list、.footer，内部的重复元素用.course-item、.nav-item这类名字。图片命名也尽量带前缀，icon-开头放小图标，course-开头放课程封面，这样在 CSS 里写路径时不容易搞混。不要用.div1、.box2这种名字，等你写到第三个模块就会后悔。

2.4 切图操作：哪些图要切、怎么导出不模糊

PSD 里的图层不会自己变成网页能用的图片，切图这一步很关键。需要切的一般有三类：一是 logo 和功能图标，这类是 PNG 格式，背景透明；二是 banner 大图，通常是 JPG 格式，因为它是照片或渐变色块，不用透明通道；三是课程封面的缩略小图，按设计稿里显示的大小切出来即可。我的做法是先在 PSD 里把图层转为智能对象，再用「导出为」功能按 2 倍尺寸导出，这样在 Retina 屏幕上不会发虚。切完图放进images目录后，回到 PS 里双击原图层确认尺寸，再写进 CSS 的width和height。

这里补充一个常见坑：部分素材包里的 PSD 是分层的，但设计稿里有「隐藏图层」或「参考线图层」。切图前先关掉参考线图层，只看实际展示的内容层，否则导出时会带出一条横线或边框。检查方式是切完图后在文件夹里预览一遍，凡是看到多余元素的就重新导出。

3. 总体架构设计：header、banner、课程列表与 footer 的模块化实现

3.1 页面层级规划：先画盒子再写标签

在写第一行代码之前，先把整个页面画成盒子嵌套图。「学成在线」首页的结构从外到内大致是这样：最外层是一个整宽的背景容器，里面放版心div，版心里再按模块拆分。header、banner、课程列表、footer 这四块是横向区块，区块内部再用浮动去排列子元素。这个层级用文字描述就是：body > .header > .wrapper > .logo + .nav + .login，课程列表是body > .course-list > .wrapper > ul > li。

HTML 骨架建议先搭出来，不急着写样式。先把空标签放到页面里，命名好 class，然后写一点临时的边框样式，确认每个盒子的边界范围与自己预想一致。这个动作叫「画盒子」，能过滤掉大约一半的布局错位问题。

<body> <!-- 头部区域 --> <div class="header"> <div class="wrapper"> <div class="logo"> <h1><a href="#">学成在线</a></h1> </div> <ul class="nav"> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul> <div class="login"> <a href="#">登录</a> </div> </div> </div> <!-- 课程列表区域 --> <div class="course-list"> <div class="wrapper"> <h2 class="title">热门课程</h2> <ul class="course-items"> <li class="course-item"> <a href="#"> <img src="images/course-01.jpg" alt="前端开发课程"> <span class="course-name">前端开发入门与实战</span> </a> </li> <!-- 更多课程项按同样结构重复 --> </ul> </div> </div> </body>

这段结构里有一个值得注意的设计：logo 用h1 > a而不是裸的img，是因为从语义化角度看，页面主要的标识应该是最重要的标题；同时给h1里的链接设置背景图或直接放图片，后续做 SEO 和屏幕阅读器适配都更友好。课程列表用ul > li而不是重复写div，是因为「一组相同结构的条目」在语义上就是列表，浮动布局时也更容易统一处理间距。

3.2 header 模块：版心、logo、导航与登录区的实现

header 是整页里最典型的一段结构，它演示了「同一行里三个不同宽度的盒子怎么用浮动摆平」。版心.wrapper宽度 1200px，里面的 logo 向左浮动，导航栏向左浮动，登录区向右浮动。导航项之间用margin-right拉开距离，登录区用float: right推到右边。

.wrapper { width: 1200px; margin: 0 auto; } .header { height: 42px; background: #fff; border-bottom: 1px solid #eee; } .logo { float: left; width: 200px; height: 42px; } .logo a { display: block; width: 100%; height: 100%; background: url("../images/logo.png") no-repeat center/contain; text-indent: -9999px; /* 隐藏文字但保留给搜索引擎 */ } .nav { float: left; margin-left: 40px; } .nav li { float: left; line-height: 42px; margin-right: 24px; } .nav li a { padding: 0 8px; color: #333; } .nav li a:hover { color: #f60; border-bottom: 2px solid #f60; }

这段 CSS 里最容易被忽略的是text-indent: -9999px。logo 的文字「学成在线」仍然在 HTML 里，只是用缩进把它推出可视区域，再用背景图显示 logo。这是一个非常经典的处理方式，答辩时被问到「图片和文字如何兼顾」，这就是答案。导航 hover 用border-bottom做下划线效果，而不是给a加背景色，原因是下划线不改变导航项宽度，不会导致 hover 时文字突然跳动。

3.3 课程卡片列表：ul > li 网格与间距的计算逻辑

课程列表是整页里最容易出问题的地方，因为它同时涉及浮动的排列、间距的计算和图片的尺寸。设计稿里四列卡片的宽度和间距需要用心算一遍，不能靠感觉。以一个常见参数为例：版心宽 1200px，四列卡片，每列预留 3 个间隙，假设卡片宽 270px、间隔 30px，总宽度是 270 × 4 + 30 × 3 = 1170px，剩余 30px 可以平均分配在两侧或者作为列表的左边距。这样算出来的布局才是精确的。

.course-item { float: left; width: 270px; margin: 0 15px 20px; list-style: none; } .course-item img { display: block; width: 270px; height: 150px; border-radius: 6px; } .course-name { display: block; margin-top: 10px; font-size: 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

这里有两个细节值得展开。第一是margin: 0 15px 20px这种写法的妙处：左右各 15px，四个卡片加起来的左右间隔就是 30px，正好符合设计稿的间距，而且第一个和最后一个卡片也会自动和边界留出 15px，不会顶到容器边缘。第二是white-space: nowrap; overflow: hidden; text-overflow: ellipsis;三件套，课程名超出一行时自动显示省略号，避免文字把卡片撑出不同的高度。

卡片用ul包裹后，还要注意ul的默认样式——它有默认的padding-left和list-style，必须清零。做完这一步，记得在ul的父容器上加清除浮动的类名，否则父容器高度会变成 0，后面的 footer 会直接贴上来。

3.4 footer 模块：版权信息与多栏结构的收尾

footer 模块通常视觉上比较简单，但实现时有一个容易忽略的问题：它内部的栏目也是多列布局，而且底部边框、背景色要与上方模块区分清楚。这里延续浮动布局的思路，用同一套模式收尾即可。

<div class="footer"> <div class="wrapper"> <div class="footer-links"> <dl> <dt>关于我们</dt> <dd><a href="#">公司介绍</a></dd> <dd><a href="#">加入我们</a></dd> </dl> <!-- 更多 dl 栏目 --> </div> <div class="copyright"> <p>© 学成在线 版权所有</p> </div> </div> </div>

footer 的内容结构用dl > dt + dd，而不是ul > li，原因是这里是一个「标题 + 若干条目」的语义结构，dl在语义上更贴近。CSS 方面，footer设置为深色背景，内部链接颜色调浅，栏目之间用float: left并排，最后一个栏目或版权区用clear: both确保不会受到前面浮动的影响。到这里，整个页面的四大模块已经搭完，接下来需要处理的是实现过程中最容易翻车的一些细节。

4. 关键实现细节与常见问题排查

4.1 高度塌陷：父容器为什么变成了 0 高度

现象：课程列表的父容器ul或最外层.course-list高度变成 0，背景色消失，footer 直接顶到卡片下面。原因：子元素全部浮动后脱离了标准流，父容器里没有可参与计算高度的子元素，于是高度塌陷为零。解决：在父容器上追加一个清除浮动的类名，经典写法是 clearfix：

.clearfix::after { content: ""; display: table; clear: both; }

给.course-list、.header这类包含浮动子元素的容器都加上clearfix类。这不是玄学，而是浮动布局的配套动作，凡是用了float的容器，基本都要考虑父元素清除浮动。

4.2 导航换行或对不齐：宽度超出版心

现象：导航栏的 li 元素在某个宽度下突然折行，或者最后一个导航项和登录区挤在一起。原因：导航项总宽度加 margin 超出了版心剩余宽度，比如 logo 占 200px、margin-left 40px，导航项每个 80px，三个就是 240px，再加上登录区 100px，总宽接近 580px，本不该超——但如果某个 li 里的 a 设置了左右 padding，实际占宽就会超出预估。解决：用浏览器开发者工具检查每个 li 的实际宽度，把所有padding、margin加进去重新算总和。记住一个原则：浮动布局里，横向空间永远是「加法」关系，任何一个盒子的实际宽度都必须精确计算。

4.3 背景图不显示或位置跑偏

现象：logo 背景图不出图，或者 banner 的背景图出现在错误位置。原因大概率是路径错误，或者是背景定位写错。CSS 文件在css文件夹里，引用images下的图片要写../images/xxx.png，这是相对路径的经典错误。另一个常见问题是背景图做雪碧图定位时，background-position的数值算错了方向。解决：先用开发者工具的网络面板看图片请求是否 404；如果 404，先检查路径，再检查文件名大小写。雪碧图定位建议使用负数坐标，并且先切一个 1×1 的测试图验证坐标方向，再套用真实图标。

4.4 切出来的图模糊或尺寸不符

现象：页面上的图片看起来比设计稿模糊，尤其是 logo 和小图标。原因：切图时直接按设计稿里的 1 倍尺寸导出，在高分屏下被浏览器拉伸到 2 倍，自然发虚。解决：切图时按 2 倍尺寸导出，然后在 CSS 里把图片显示尺寸设置为设计稿的一半。比如设计稿里 logo 宽 100px，导出 200px 宽的图，CSS 里写width: 100px。这样在小屏上也足够清晰。如果素材包里已经切好了图，直接看图片实际尺寸和 CSS 设定尺寸的倍数关系，通常能发现问题。

4.5 版心不一致：部分模块左右漂移

现象：header 里的内容和课程列表的左边距不对齐，肉眼能看出页面「歪了」。原因：某个模块的.wrapper写错了宽度，或者写成了width: 100%，再或者多加了一个padding，导致实际内容宽度超出 1200px。解决：检查每个模块的 wrapper 是否统一为width: 1200px; margin: 0 auto;；另外确认没有给 wrapper 额外设置padding，因为 padding 会加宽盒子的实际渲染宽度。这里有个随时能用的检查技巧：在浏览器控制台选中所有.wrapper元素，逐个看它们的盒模型大小，凡是宽度不是 1200px 的，就是被 padding 或 border 撑开了。

5. 验收与答辩：把「做完了」变成「达标了」

5.1 三屏对照验收法

我每次写完静态页面，都会做一个最朴素的验收动作：把 PSD 导出成一张整页长图放在屏幕左侧，浏览器打开index.html放在右侧，然后从上到下逐段对照。对照时不只看布局，还要看间距的细节，比如导航文字是否垂直居中、课程卡片标题是否都在同一水平线、footer 的版权文字是否和设计稿一致。可以自制一份验收清单，逐项打勾：

5.2 答辩高频追问与回答要点

答辩时老师最喜欢问的几类问题，答案其实都在前面的实现细节里。问「为什么用浮动而不用 flex」，回答时要强调浮动会让你手动计算盒子的宽高和间距，从而更深入理解盒子模型，同时指出你已经在父容器上做了 clearfix 处理；问「课程卡片的间距怎么算出来的」，直接把 270 × 4 + 30 × 3 = 1170 这个公式列出来，比任何解释都有说服力；问「图片为什么用背景图而不是 img」，说清楚背景图适合 logo 这种需要精确定位且要隐藏文字的装饰性图片，而课程封面这种内容性图片用 img 标签更合适。遇到答不上的问题，不要硬编，明确说「我目前是用这种方式实现的，如果您说的方案在某种场景下更合适，我可以继续优化」。这个态度本身就加分。

从那以后我每次写完页面，都会强制自己把 PSD 放到屏幕左侧、浏览器放到右侧，一屏一屏对照过再提交。这个习惯不是玄学，而是能救你于答辩现场的动作：大多数「看起来怪怪的」问题，都是在这个环节被发现并修掉的。希望帮到你。

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