简介：一套面向网页设计入门与前端开发初学者的学成在线案例资源，源自黑马程序员及Pink老师课程体系，将PSD设计稿与HTML/CSS实现打包到一起。设计稿涵盖首页、课程列表页、课程介绍页、职业规划页等典型页面，适合用于训练从设计图到静态页面的还原能力；标签中反复出现的粉色视觉元素，也适合关注女性化、温馨风格界面的学习者参考。压缩包共11个文件，含4个PSD源文件、5个PNG切图素材、1个HTML页面与1个CSS样式表，整体17.71MB；PSD可用来拆解图层与设计思路，PNG为页面所需图片素材，HTML/CSS则展示完整页面结构与样式写法。目前已有14059人学习下载，案例热度较高。通过对照PSD与代码，可以掌握色彩搭配、字体选择、布局调整等常见网页设计技巧，也能观察设计文件如何落地为实际页面，适合作为课后练习或课程设计参考。

1. 学成在线PSD素材及代码：把一张首页设计稿拆出完整的前端练手闭环

一直觉得HTML和CSS的入门阶段，最缺的不是知识，而是“像样的设计稿”。语法背熟以后，很多人卡在“不知道页面该怎么搭”。我手里保留的这套学成在线PSD素材及代码，正好把这个问题补上了：一份完整首页PSD源文件，外加一套可运行的HTML/CSS代码，从PSD切图、量尺寸、取色，到HTML结构、CSS布局、hover交互，一条链路全都有。适合刚学完标签语法想上手的初学者，也适合带新人时当教学素材。这套资源里最有价值的部分不是代码本身，而是PSD里藏着的一整套设计还原流程。下面按我实操的顺序展开说。

2. PSD源文件怎么用：图层识别、尺寸测量与切片导出

第一次拿PSD做网页，别着急写代码，先花半小时把设计稿的图层结构摸清楚。我拿到的这套学成在线素材包，PSD一般是1920宽的设计稿，按顶部导航、banner、课程推荐、页脚等几个区域做好分组。文件名不一定统一规范，但结构大体一致。打开后先别拖动图层，按下面三步走。

2.1 打开PSD先看图层结构，别急着拖参考线

快捷键 Ctrl+J 复制当前图层，在副本上做标注，不会破坏原图。用图层面板右上角的搜索框按名称过滤，可以快速定位某个按钮或标题。如果你拿到的是图层嵌套比较深的版本，按住 Ctrl 键（Mac 用户对应 Command 键）点击画布中的目标元素，PS 会直接帮你在图层面板里定位到那一层，这比在几十个图层里人肉滚动高效很多。

这一步的目的不只是找某个像素，而是建立对整份设计稿的模块认知：哪些部分需要切图，哪些背景可以直接平铺，哪些元素是文字而非图片。比如 banner 里的人物大图一般是一整幅背景，直接导出大图即可；而课程卡片上的星星评分通常是文字字符，就不该用切图方式去导。先把这些判断做完，后面导出才不会缺图。

2.2 量尺寸、字号、行高的标准方法

量宽度高度最常用的是矩形选框工具，快捷键 M。框住元素后看信息面板的 W 和 H，注意信息面板的显示单位要切成像素。量字号用文本工具，快捷键 T，点击 PSD 中的文字，字符面板里就能看到字体、字号和行高。颜色取值用吸管工具直接点，看到什么颜色就记录成 hex 值。

一个踩过多次的细节：按钮或卡片往往带着投影、发光之类的图层效果，量高度时如果连阴影一起框进去，量出来的值会比实际内容多出 2px。我一般会先把目标图层的效果关掉再量，量完再恢复，这样出来的数据才和真正的视觉盒子一致。下面是拿到 PSD 后建议采集的设计规范清单：

这套数据在写 CSS 时要对照使用。如果在字符面板里看到的是 pt，就在标尺上右键切到像素，不要自己换算，单位切对了数值才是可靠的。

2.3 切片导出与命名规范

需要切图的目标一般只有图标、按钮、特殊背景的模块图。大块的纯色和渐变背景不需要导出，CSS 里用 background 属性直接还原。导出方式有两种，我推荐组合使用。

• 单个图标或按钮：在图层上右键选择“导出为”，格式选 PNG，透明背景，导出后直接得到独立图片文件。
• 多个相邻小元素：用切片工具框选后，Alt+Shift+Ctrl+S 打开“存储为Web所用格式”，左侧选“仅限选中的切片”，格式选 PNG-24，导出速度快且可控。

命名规范直接影响后面的生产效率。我一般用“模块_元素_状态”的格式，例如 btn_search_normal.png、btn_search_hover.png、icon_play.png。这套素材包自带的代码里也沿用了类似命名，命名一致的情况下，对照 PSD 写 CSS 几乎不用猜。

提示：导出切图前，把图层特效如投影、内发光和主体一起切，或单独导出透明阴影层，别切一半留一半，否则在浏览器里贴图会发现按钮边缘突兀。

另外一个常见问题是打开 PSD 后提示缺少字体，页面里的文字被默认字体替代。这不影响切图和量尺寸，因为字符面板里仍能读取原设计的字号和行高，按记录值在 CSS 里用一套回退字体，例如 Microsoft YaHei、PingFang SC、Arial，就能还原。素材包配套代码里一般也设置了类似字体栈，所以不必为了字体纠结。

3. 从设计稿到HTML：模块拆分、语义化标签与骨架搭建

切完图之后真正开始写页面了，这时候最忌讳的是直接打开编辑器从顶部一路敲到底。先把 PSD 从上到下拆成若干模块，再决定每个模块用什么标签，最后才写骨架。顺序反了，后面大概率要推倒重来。

3.1 先把设计稿拆成模块，别打开编辑器就敲

以这套学成在线案例为例，典型的在线教育首页设计稿一般包含以下模块，从上到下依次是：顶部导航（logo、导航链接、搜索框、登录入口）、banner 横幅（宣传大图、左右切换箭头、课程分类导航）、精品推荐区域（标题行加若干课程卡片）、数据或特色介绍区、页脚（版权与备案信息）。有的版本还会在 banner 下方多一个二级导航，具体看你手上这份 PSD 的分组，但大结构基本一致。

之所以先拆模块，是因为 HTML 的逻辑单元和 PSD 的图层分组是对应的。把 PSD 的每个分组映射成一个 HTML 区块，后续写 CSS 才能逐个击破。如果边看边写，很容易写成一个巨大的 div 套 div，后面调样式时根本找不到入口。

3.2 语义化标签和类名命名：header、nav、main、section、footer

按模块选择合适的标签。顶部导航用 header，导航链接用 nav 配合 ul/li，主体用 main，每个内容区域用 section，页脚用 footer。这比全部用 div 的好处是结构可读性强，浏览器和搜索引擎能正确理解页面层级，后面做响应式改造时，语义化标签也自带默认表现，不容易乱。课程卡片列表用 ul 包 li，而不是直接用 div 平铺，因为卡片本身就是一组并列的数据。

类名命名推荐以块为单位，参考“模块-元素”的方式，例如 .course-card、.course-card-title、.course-card-price。避免使用 .box1、.box2 这种序号命名，后期一调整意味着整组重命名。素材包自带的代码里也是这个风格，对照起来清爽很多。之所以强调课程列表用 ul/li 而不是平级 div，是因为课程卡片这类数据天然是列表语义。后续不管做浮动、flex 还是循环生成，只要遍历这个列表结构，新增卡片只是多一个 li 的问题，不会有样式找不到入口的困扰。

给一份 HTML 骨架，内容部分用占位符：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学成在线-首页</title> <!-- 引入CSS样式 --> <link rel="stylesheet" href="css/index.css"> </head> <body> <!-- 顶部导航：logo、导航链接、搜索框 --> <header class="header"> <div class="container"> <h1 class="logo"><a href="#">学成在线</a></h1> <nav class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul> </nav> <div class="search"> <input type="text" placeholder="请输入关键词"> <button type="button">搜索</button> </div> </div> </header> <main> <!-- banner横幅区 --> <section class="banner"> <div class="banner-img"> <img src="images/banner.png" alt="热门课程推荐"> </div> </section> <!-- 精品推荐课程列表 --> <section class="recommend container"> <h2>精品推荐</h2> <ul class="course-list"> <li class="course-item"> <a href="#"> <img src="images/course01.png" alt="前端开发入门"> <h3>前端开发入门</h3> <p class="price">¥299</p> </a> </li> </ul> </section> </main> <!-- 页脚 --> <footer class="footer"> <div class="container"> <p>学成在线 - 让学习变得更简单</p> </div> </footer> </body> </html>

这套骨架里的几个选择都有对应理由，不是随手写的。lang="zh-CN" 声明页面语言，便于浏览器正确处理中文和搜索引擎理解；meta viewport 在移动端方案里是必需品，虽然桌面版优先但不加总归不完整。logo 用 h1 而非 div，语义上首页最重要的标题就是站点名称，对 SEO 友好。搜索框是 input + button，不是一整个 div 模拟的假搜索，键盘操作和表单提交都正常。课程列表用 ul/li，每张卡片是一个 li，为后续浮动布局做好了准备。

3.3 编码、favicon 和图片路径的细节

HTML 文件第一行必须是 ，否则某些老旧浏览器会进入怪异模式。charset 用 UTF-8，避免中文注释和标题出现乱码。favicon 可以在 head 里用 link 标签引一张小图标，没有就用一张简单的 logo 也行。图片路径优先使用相对路径，CSS 文件存到 css 目录、图片存到 images 目录时，CSS 样式里引用图片必须以 CSS 文件所在目录为基准，不能用 HTML 页面所在目录。这个细节是许多新人第一次写页面就会踩的坑，下一章展开说明。

到这里，HTML 部分已经具备页面结构了，接下来就是把 CSS 写上去，完成视觉还原。

4. CSS布局实现：版心、浮动、清除浮动与hover效果

HTML 骨架是框架，CSS 是装修。套用这套素材做页面，建议按“全局样式→版心→模块→交互效果”的顺序写，先保证整体比例正确，再抠细节。顺序反了，容易出现调完一个卡片又推翻前面全部布局的情况。

4.1 先定版心和通栏背景：让所有内容居中

大多数版本的设计稿是 1920 宽，但页面内容实际被约束在约 1200px 的版心内。写 CSS 时先定义全局样式和版心类，把水平居中一次搞定：

/* 基础重置：统一盒模型，避免列宽计算偏差 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 14px/1.6 "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; background: #f5f5f5; color: #333; } /* 版心：内容区域的宽度 */ .container { width: 1200px; margin: 0 auto; } .header { height: 60px; background: #fff; }

这段代码里需要说明三个关键点。*{margin:0;padding:0;box-sizing:border-box}把浏览器默认样式清零，同时让 width 包含 padding 和 border，后续计算列宽不会因为多加 1px 边框而换行，这个前置设置非常重要。版心宽度 1200px 是从 PSD 内容区量出来的，设计稿画布 1920，但内容不是铺满的，如果不量直接把整个页面做满，会在宽屏上拉出灾难性的横向拉伸。.header 是通栏元素，宽度默认撑满屏幕，而内部 .container 负责把内容约束到 1200px 并居中。通栏背景色写在 header 上，内容宽度写在 container 上，两者各司其职，这是所有模块布局的基础。

如果设计稿底部还有一条深色页脚背景，同样把背景写在 .footer 上，内部再用 .container 做版心。全站背景色选了浅灰是为了和设计稿保持一致，具体色值以你量到的为准。

4.2 浮动布局与清除浮动：课程卡片三列排开

课程卡片区域通常显示三列，常见做法是把每个 .course-item 设置 float:left，再配合负 margin 控制列间距。如果你选择用 flex 布局也可以，但这份素材配套代码是按 float 写的，先按 float 跑通一遍，能更深入理解盒子和文档流的原理。

/* 课程列表容器：负margin用于抵消每张卡片的左右间距 */ .course-list { margin: 20px -15px 0; } .course-item { float: left; width: 380px; margin: 0 15px 30px; background: #fff; border-radius: 6px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }

这里有几个参数值得解释。三列卡片每列宽度 380px，是通过 (1200 - 303) / 3 得到的，其中 30 是每列左右 margin 之和 152。用负 margin 而不是 nth-child 去边距，好处是无论后面加几列，间距都自动保持一致，不用专门写 margin-right:0。float:left 让三张卡片在同一行排列，但浮动元素会脱离标准文档流，父容器 .course-list 高度会塌陷，下面必须在父容器上清除浮动，否则后续模块会被顶上来。overflow:hidden 在这里既能裁掉卡片图片圆角溢出的部分，也能作为父容器清浮动的一种变通手段，不过不建议在父容器上依赖它，因为 overflow:hidden 还会隐藏下拉菜单的溢出部分。

清除浮动的经典方案是给父元素加伪元素 clearfix，素材包里几乎每个有浮动的模块都挂着这个类：

/* 双伪元素清浮动：解决父容器高度塌陷 */ .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; }

这两段伪元素的原理是：:after 在父容器内部末尾插入一个看不见的块级元素，clear:both 强制它清除前面所有浮动元素的影响，于是父容器的高度重新被撑起来。:before 的作用主要是合并相邻块级元素的 margin，避免父元素和子元素 margin 叠加产生意外距离。这个兼容性表现稳定，就算父容器有背景或边框也不会露馅，属于值得长期保留的通用工具类。

4.3 用CSS画banner箭头和评分星星：不依赖切图的轻量方案

banner 左右两侧的切换箭头，很多切图包里已经导出了 PNG，但完全可以用 CSS 的 border 技巧来画，省一次图片请求，还方便 hover 变色。箭头本质上是一个只有一条边框着色的“三角形”。由于 border 的斜切机制，当元素宽度和高度都是 0 时，四条 border 的边界会形成四个三角形区域。保留一边有颜色，另外两边设成 transparent，就能得到一个朝指定方向的箭头。

/* banner左右箭头：利用border画三角，不切图 */ .banner .arrow-left, .banner .arrow-right { position: absolute; top: 50%; width: 0; height: 0; border-top: 24px solid transparent; border-bottom: 24px solid transparent; cursor: pointer; } .banner .arrow-left { left: 20px; border-right: 30px solid rgba(0, 0, 0, 0.4); } .banner .arrow-right { right: 20px; border-left: 30px solid rgba(0, 0, 0, 0.4); }

代码里的关键逻辑：左箭头在右边着色，右箭头在左边着色。24px 决定三角形的高度，30px 决定三角形底边宽度，不同设计稿观感不同，这两个值按 PSD 里的箭头大小微调即可。用 rgba 半透明能让箭头看起来不那么生硬，悬浮时把透明度调高或换一种主题色，交互反馈就有了。

课程卡片上的星级评分同理，直接用字符“★”配合颜色显示，完全不需要额外切图。把评分字符放在一个 span 里，设置字体颜色和字号，视觉上与设计稿差别很小，而且后续改分数只需要改字符内容，维护成本低。很多同类案例也是这么处理的。

悬停交互的写法也值得刻意练一下，因为课程卡片是列表里高频出现的组件，hover 态做得好不好直接影响作品完成度。推荐 box-shadow 和 transform 的组合写法：

/* 卡片hover效果：浮起阴影+轻微上移 */ .course-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }

transform 只做位移不做缩放，位移 3px 大约相当于鼠标掠过时卡片轻微浮起，视觉上轻盈不油腻。box-shadow 的 x 偏移设为 0，y 偏移 8px，模糊半径 20px，透明度 0.12，阴影颜色用黑色带极低透明度即可，不要用纯黑，避免出现生硬的黑影。transition 已经在 .course-item 基础样式中声明，动画时长 0.3s，缓动函数是 ease，悬浮和移开时都会平滑过渡。

提示：float 布局下给每个卡片设固定高度是常见做法，但如果卡片文字量不等，底部会出现参差不齐。稳妥的作法是给 .course-item 里的图片设置统一高度并加上 object-fit: cover，再统一文字行高，能让大部分情况保持整齐。

5. 常见问题与避坑：路径、浮动塌陷、取色偏差、盒模型、hover失效

这套素材练完一遍，至少会经历五种高频翻车现场。把它们列在这里当作排查清单，比报错后再一个个试要省事得多。每条都按现象、原因、解决展开。

5.1 图片在浏览器里全部裂开或显示不出来

现象：按素材包目录打开 index.html，页面文字和布局都在，唯独图片位置空白或显示破碎图标，控制台报 404。

原因：相对路径的基准搞混了。HTML 里的是相对于 HTML 文件所在目录解析，而 CSS 里的 background: url("images/xxx.png") 是相对于 CSS 文件所在目录解析。素材包通常把 CSS 放在 css 子目录，图片放在 images 目录，在 CSS 里写 url("images/xx.png") 会到 css/images 去找，自然找不到。此外，PSD 导出的图片文件名可能带空格或中文，本地 file 协议偶尔能打开，但部署到服务器或换电脑就会出现编码问题。

解决：先看控制台报错的具体地址，把路径改对。CSS 文件在 css 目录时要写成 url("../images/xxx.png")，HTML 里的 img 写成 images/xxx.png。图片全部导出后立刻重命名为全小写的英文字母加下划线，中文字符串和空格一概不要留。这一条对任何拿来做改版的素材都适用，路径问题造成的返工非常浪费情绪。

5.2 浮动父盒子塌陷，背景变成一条细线

现象：banner 下面某一块浅色背景区域没有撑开，页面中间出现一条横杠，或者页脚直接出现在课程卡片中间。

原因：子元素全部 float:left 后脱离文档流，父元素没有高度也没有清除浮动，高度自动塌成 0。如果父元素设置了背景色，就会只剩背景横向平铺的一条；父元素没设高度，则后续内容被错误计算位置。

解决：给父元素追加 clearfix 类，或者给父元素一个明确的高度。高度方案只适合内容固定的模块，比如顶部导航；内容动态的列表区必须用 clearfix。用 overflow:hidden 也能清浮动，但它会同时裁剪掉溢出内容，比如下拉菜单或 hover 浮层，所以不建议滥用。我自己的习惯是新建一个公共工具类 .clearfix 放在全局样式里，哪里有浮动就挂哪里，副作用最小。

5.3 从PSD取色后，页面颜色比设计稿深或偏色

现象：吸管工具取到的按钮主色放入 CSS 后，刷新页面发现颜色明显比 PSD 里看到的深，或者整体偏黄、偏灰。

原因：取色目标图层可能带了透明度、渐变叠加或混合模式。比如按钮底色图层是 50% 透明，叠加在深色背景上，直接吸该图层得到的颜色是纯色本身，而不是最终呈现的混合色。这种问题在图层结构复杂的设计稿里非常常见，堪称前端还原里最像玄学的一环。

解决：取色前先看图层面板的图层不透明度，如果低于 100%，先把不透明度临时调成 100% 再取色；如果图层带渐变叠加或图案叠加，把叠加样式关掉取完色再打开。最保险的做法是把 PSD 当前视觉效果用快捷键存成一张无损截图，直接在截图里吸色，这样取到的一定是与设计稿最终效果一致的颜色。从那以后我取色一律从截图走，色差问题基本绝迹。

5.4 三列布局第四张卡片掉到下一行或上下对不齐

现象：本来一行三张课程卡片没问题，但某一行始终只放得下两张，第三张被挤到下一行；或者三张卡片顶部对齐但底部参差不齐。

原因：没有统一 box-sizing。给 .course-item 设置 width:380px 后再加 padding 和 border，实际占据的宽度变成 380 + padding + border，超过容器宽度就会被换行。另外卡片内图片没有固定高度，不同标题行数造成内容高度不一致，底部自然参差。

解决：在全局样式里加 box-sizing:border-box，让 width 直接包含 padding 和 border，列宽计算才不会出错；图片设置统一高度并加 object-fit:cover，不管原图比例是横是竖都被裁切展示，卡片高度得以统一。写课程列表前先算总宽：容器宽度 1200 减去每列间距，再除以列数，得到单列宽度，一步一步算下来基本不会翻车。

5.5 hover高亮不生效或点击区域小得可怜

现象：鼠标滑过课程卡片时没有出现预期的阴影或上移效果；有的卡片标题点击区域只有文字那么窄，其余大片空白都点不到。

原因：hover 效果写在了 li 上而真正接收鼠标事件的是 a 标签；或者 a 标签没有设置 display:block，没有撑满整个卡片，点击区域只有内联内容那么宽。还有一种情况是伪类顺序写错，:visited 写在了 :hover 后面，导致 hover 状态被 visited 覆盖。

解决：把 hover 规则写在真正触发交互的元素上，通常是 a。给 a 设置 display:block，让它的尺寸铺满父容器，点击区域自然扩大。如果伪类同时存在，按 LVHA 顺序书写，也就是 a:link、a:visited、a:hover、a:active，这个顺序是标准约定，写反了交互效果容易被浏览器“静默忽略”。排查时先按 F12 看样式面板里哪些规则被划掉，优先级问题一眼就能看清。

6. 像素级还原的验证方法与进阶改造：让静态页面变成加分作品

基本页面完成之后，真正的差距在“还原准确度”。多数新人交上去的作业，布局和配色大体对，但细节经不起推敲。这里给出一个我一直在用的验证方法，以及一个能让作品明显提升的改造方向。

6.1 用差值混合模式做像素级对比验证

把浏览器窗口宽度调整为和 PSD 一致，通常是 1920 或 1366，整页截图后保存为 png。在 PS 里打开这张截图，拖到原设计稿上方，把截图图层的混合模式切换成“差值”。如果两个图层内容完全一致，叠加区域会呈现为纯黑色；出现灰白色或彩色差分的地方，就是像素对不上的位置。用这个方法可以快速找出边距差几像素、字体行高不一样等肉眼难以确认的问题。截图时注意关掉浏览器缩放，确保 100% 显示比例，不然差值结果不可信。

光标移到差分区域，用矩形选框量出偏移量，再回代码里修正宽度、间距和字号。整个过程熟练的话十分钟跑完一遍，比对着 PSD 用肉眼慢慢校对准确得多。

6.2 从float迁移到flex：布局方式的进阶重构

练完 float 版本的目的是理解文档流和清除浮动的原理，但如果要拿这份作品去展示，建议再把同一份 HTML 改成 flex 布局重写一遍 CSS。flex 方案里，三列卡片从“计算宽度、清浮动、去边距”变成一行关键声明：

/* flex布局：免去清浮动和nth-child列间距设置 */ .course-list { display: flex; justify-content: space-between; flex-wrap: wrap; } .course-item { width: 380px; margin-bottom: 30px; }

两段代码中，justify-content:space-between 负责自动分配列间距，不用再写 nth-child 或负 margin；flex-wrap:wrap 允许卡片换行，换行后行与行的间距靠 margin-bottom 控制。需要注意单列浮动时的固定高度规则在 flex 下仍然有效，图片高度固定、文字行高统一这几点不能省。

如果想把作品进一步做成响应式，可以加一个简单断点：

/* 移动端适配：768px以下改为单列 */ @media (max-width: 768px) { .course-list { justify-content: center; } .course-item { width: 90%; margin-bottom: 20px; } }

媒体查询里的改动让窄屏时卡片变成近满宽的单列排列，内容列表在手机上变成上下堆叠，不会被屏幕宽度卡住。这套素材本身是固定宽度的桌面稿，做成移动端适配属于额外加分项，但面试或作品集展示时，这一点往往是区分认真程度的关键细节。

整个练手过程走下来，会发现 PSD 处理、HTML 结构、CSS 布局、验证排错这四个环节每一个都藏着坑。我现在的习惯是拿到一份新设计稿，先关图层特效取色、再定路径命名、再算盒子宽度、最后再写浮动或 flex，把这套流程强制走一遍，项目返工率低很多。如果你打算练这套学成在线 PSD 素材和配套代码，下载后从头到尾完整过一遍，会比只看不练收获大得多。希望帮到你。

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