学成在线PSD素材切图全流程：从量尺寸到页面落地

简介：这是面向网页设计初学者与前端开发者的“学成在线”页面实现素材，源自黑马程序员及学成在线案例。整套资源将设计稿与前端代码配套呈现，既能用于练习 HTML/CSS 页面还原，也可作为课程实训或个人作品集的参考素材，帮助使用者打通从视觉稿到静态页面的完整流程。

压缩包共含 11 个文件，整体大小约 17.71MB。其中 4 个 PSD 源文件覆盖首页、课程列表页、课程介绍页与职业规划页，方便在 Photoshop 中逐层拆解设计构图；5 张 PNG 图片提供 banner、logo、图标等切图素材；另有 index.html 与 style.css 构成一套可运行的页面示例，便于对照学习结构与样式写法。

该资源目前已有 14050 人学习下载，热度较高。通过对比 PSD 图层与前端代码，可以直观理解色彩搭配、字体选择、间距布局等设计决策如何落地为 CSS 规则；同时还能研究导航、轮播、卡片等常见模块的代码组织方式，是一份适合反复临摹和扩展改造的实战型资源。

1. 学成在线PSD素材及代码：别急着量尺寸，先读板式再动手

学成在线PSD素材及代码，粗看是设计师交付的PSD源文件和前端代码一整套；实际动手时，大多数人却把时间耗在对着设计稿量尺寸，忘了先看板式和设计规范。我见过不少同学拿到这套素材，第一反应是打开Photoshop开始切图，结果写到一半发现导航高度不对、间距全乱，只能回去重新看稿。这套素材最适合三类人：正在跟培训机构实战项目的新手、拿教育类页面练切图和布局的转行工程师、想补一个完整静态项目经验的在校生。它练的不只是“把PSD变成页面”，更是把设计规范转成CSS变量、把图层结构映射为HTML分区的习惯。先读板式、再写代码，比直接开切能省一半返工时间。

2. 拆开学成在线PSD素材：先做图层体检，再谈写代码

切图这件事看着是体力活，真正分高下的地方在动手之前。PSD素材里的图层组织、命名规范、参考线位置，决定了你后面写HTML时是顺风顺水还是反复改结构。我一般会先花二十分钟把设计稿“读”完，而不是急着导出图片。

2.1 用Photoshop做三件事：看图层、量尺寸、读字体

拿到PSD的第一个操作不是按Ctrl+Shift+S，而是把“图层”面板打开，从头到尾过一遍。看什么？看分组。学成在线这类教育类项目的PSD，通常会把首页分成导航、轮播、课程分类入口、推荐课程、底部footer若干组。如果图层命名不规整，先花五分钟重命名，把“形状 1 副本 3”改成“header-logo”，后面做切图和写代码都少踩坑。

量尺寸要用“信息”面板配合矩形选框。选好工具，框住某个区域，信息面板里会直接显示宽高的像素值。间距不要靠肉眼估算，把参考线从标尺拖出来，对齐到两个区块的边缘，再测量参考线之间的距离。这个习惯能直接避免页面里常见的“导航离顶8px还是10px”的玄学问题。

读字体时用文字工具点击对应文本图层，字符面板会列出字体名称和字号。需要注意的是部分图层被转成了形状，这时没法直接读字号，常见的处理方式是保持相同视觉比例，在代码里用相邻文字的字号推断。把读到的字体、字号、行高写到一张草稿纸上，后面写CSS时不用反复切窗口去看。

2.2 学成在线PSD素材的关键板式：首页、个人中心、课程列表

学成在线PSD素材里出现频率最高的三块板式，基本代表了教育类网站的标准布局。首页从上到下是顶部导航（Logo、菜单、搜索框、登录入口）、轮播banner、课程分类入口、推荐课程卡片区、底部footer。个人中心是典型的左侧边栏加右侧内容区，边栏放头像、订单、我的课程这类入口。课程列表页则是筛选项加课程卡片网格加分页器。

这三块板式能提炼出一个共同点：页面是纵向分区的。每个区都有自己的背景色和间距节奏，切图时不能混在一起导出。比如首页的导航是一个区块，轮播是另一个区块，它们的底图和内容元素要单独导出，不要为了省事把整个首屏拼成一张大图。这也是教育类PSD素材和普通视觉稿最大的区别——业务层级清晰，代码结构要跟着业务走。

把板式读明白以后，HTML结构其实已经浮出来了：header、banner、section、footer，不需要看着设计稿从头编造标签，PSD的分区就是天然的语义结构。

2.3 把设计规范抽出来：字号、色值、间距的默认值

写代码前先建一张“设计规范表”。这张表的目的是让所有颜色、字号、间距在代码里只出现一次，而不是散落在各个CSS规则里。用吸管工具在PSD里点几个关键位置，读出主色、辅色、文字色的Hex值；从字符面板读出各级标题和正文的字号；用参考线量出区块之间的间距。

下面是我从常见学成在线PSD中抽出的规范表示例，具体数值以你拿到的PSD吸管为准：

这张表建好以后，后面所有页面的代码都围绕它展开。我在这一步还会顺手把表改成CSS变量，写进:root里，后面检查代码规范的时候就不用对着PSD反复切换窗口了。

3. 从学成在线PSD素材到页面骨架：切图流程与最小可复现步骤

切图工具的选型没有唯一答案，但常见做法是先用Photoshop自带能力，不要急着装一堆插件。PS自带的“导出为”和“存储为Web所用格式”足够处理学成在线里绝大多数图标和背景图，而且导出参数可控，不会出现平台相关的奇怪色彩。

3.1 切图之前：把图层整理成“可导出状态”

很多人切图翻车，不是因为导出参数不对，而是图层状态没弄好。导出前做三件事：隐藏参考线、隐藏不想出现在图里的辅助文字、把目标图层的透明部分检查一遍。比如logo旁边如果带了一截没有合并的阴影，导出后会多出一块灰色区域，放页面上非常扎眼。

整理图层还有一个实操习惯：复制一个干净的组再操作。原图不动，在副本里删除不需要的部分，避免误删后找不到后悔药。目录结构我一般这样建：

mkdir -p assets/img/icon mkdir -p assets/img/banner mkdir -p assets/img/course

逻辑说明：icon目录放小图标，banner目录放轮播大图，course目录放课程卡片里的封面和讲师头像。按区块分目录，写CSS引用路径时一目了然，后续找人接手也不用猜文件在哪。

3.2 把PSD切图导出为PNG：两种常用做法与参数

第一种是选区复制法。用矩形选框选好区域，按Ctrl+Shift+C合并复制，再新建透明背景文档粘贴，最后导出PNG。这种方法适合把分散图层拼成一张图，比如把某个卡片的背景和装饰线合在一起。

第二种是切片法。用切片选择工具沿着设计稿画矩形，再通过“文件—导出—存储为Web所用格式”导出。注意格式选PNG-24，不要选JPEG，图标和带透明区域的图片用JPEG会出现白底或杂色。“缩放”里如果页面要在手机上用，就同时导出1x和2x两套图，2x图的宽度是设计稿的二倍。导出后的文件用通用命名：icon-nav-search.png、banner-home-01.png，不要用中文名，也不要叫未标题-1.png。

3.3 写HTML骨架：让结构对应PSD的分区

设计稿读完之后，先写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> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="header"> <div class="header-logo">学成在线</div> <nav class="header-nav"> <a href="#">首页</a> <a href="#">课程</a> <a href="#">名师</a> </nav> <div class="header-search"> <input type="text" placeholder="搜索课程"> </div> <a href="#" class="header-login">登录</a> </header> <main class="main"> <section class="banner"> <div class="banner-slider"> <img src="assets/img/banner/banner-home-01.png" alt="首页轮播"> </div> </section> <section class="course-list"> <h2 class="section-title">推荐课程</h2> <div class="course-grid"> <div class="course-card"> <img src="assets/img/course/course-cover-01.png" alt="课程封面"> <h3>Java基础入门</h3> <span class="course-price">￥299</span> </div> </div> </section> </main> <footer class="footer"> <p>© 学成在线</p> </footer> </body> </html>

逻辑说明：body下面直接按“PSD顶部到底部”的顺序放header、main、footer，main内部再按banner、course-list排。每个区块都用语义化标签，class命名用区块名加元素名，比如header-logo、course-card，这样CSS不用看HTML也知道规则要挂在哪里。

这段代码中header里的导航、搜索、登录对应PSD导航栏的最右侧区域；banner对应首页轮播区；course-list对应推荐课程区。学习路线记录阶段不需要加交互，先让页面从上到下完整展示，再回头补细节。

3.4 先用1200px容器把页面框架搭起来

布局参数可以先定死：内容宽度1200px、左右居中。这是教育类页面最常见的设计宽度，后续如果要做响应式，再把1200px改成max-width加媒体查询。

/* 基础重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --main-color: #00a4ff; /* 主色 */ --text-color: #333; /* 正文色 */ --content-width: 1200px; } body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--text-color); } .container { max-width: var(--content-width); margin: 0 auto; padding: 0 15px; } .header { height: 60px; background: #fff; border-bottom: 1px solid #eee; }

参数说明：box-sizing: border-box是新手最容易漏掉的一行。没有它，CSS里写的width会被padding撑大，卡片布局经常会多出几像素导致换行。--main-color和--content-width是CSS变量，后面写导航高亮、课程价格、按钮背景都从这里取值。

把这三层搭完，页面已经有一个能跑的骨架。此时不要急着美化，先去看导航栏和banner的实际渲染效果，确认切图和HTML对得上，再进入细节实现。

4. 学成在线页面落地：导航、轮播、课程卡片的代码细节

静态页面真正能“立起来”的模块主要有三个：导航栏、轮播banner、课程卡片。这三个模块在学成在线PSD素材里都有独立的设计分组，也基本覆盖了前端高频布局方式：定位、定时器切换、网格排列。

4.1 导航栏：从PSD读出行高，再给粘性定位

导航栏的参数不要凭感觉设。PSD里导航栏的高度是固定的，常见在60px到80px之间。直接量出来，写进CSS的height，不要用padding硬撑。导航内容分左中右三段，用flex布局最省事。

.header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; height: 60px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .header-logo { font-size: 24px; font-weight: 700; color: var(--main-color); } .header-nav a { margin-right: 20px; font-size: 14px; color: #333; text-decoration: none; } .header-nav a:hover { color: var(--main-color); } .header-search input { width: 200px; height: 34px; padding: 0 12px; border: 1px solid #ddd; border-radius: 17px; font-size: 14px; }

逻辑说明：position: sticky让导航栏滚动时贴住顶部，z-index: 100保证轮播图或课程卡片在滚动时不会盖住导航。justify-content: space-between把Logo、导航、搜索、登录分到左右两端，不用手写浮动。

参数说明：height: 60px是直接从PSD量出来的，不要改成min-height，否则内部元素垂直方向容易错位。border-radius: 17px是搜索框圆角，高度34px时半圆值取17px，视觉上最协调。

4.2 轮播图：切好的banner图怎么动起来

轮播图的实现不复杂，但要注意一个细节：所有banner图先叠在同一个位置，再通过JS切换透明度或位移，而不是让图片从上往下排列再滑动。前者代码简单，也不会在切换时出现白屏闪烁。

<div class="banner-slider"> <div class="banner-item active"> <img src="assets/img/banner/banner-home-01.png" alt="轮播图1"> </div> <div class="banner-item"> <img src="assets/img/banner/banner-home-02.png" alt="轮播图2"> </div> </div>

.banner-slider { position: relative; width: 100%; height: 320px; overflow: hidden; } .banner-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; } .banner-item.active { opacity: 1; }

const items = document.querySelectorAll('.banner-item'); let current = 0; setInterval(() => { items[current].classList.remove('active'); current = (current + 1) % items.length; items[current].classList.add('active'); }, 3000);

逻辑说明：JS把图片切换逻辑控制在“去掉当前激活类、给下一张加激活类”两个动作上，CSS的transition负责过渡动画。current = (current + 1) % items.length保证了循环到最后一张时自动回到第一张。

参数说明：transition: opacity 0.5s ease中0.5s是过渡时长，想要切换更柔和就改成0.8s，想要干脆就改成0.2s；setInterval的3000毫秒是停留时间，具体数值根据banner内容的阅读时长调整，一般教育类页面用3000到5000毫秒比较合适。

4.3 课程卡片：间距、圆角、阴影的参数怎么定

课程卡片是学成在线首页信息密度最高的区域，也是示例代码讲解里最值得拆的部分。卡片宽度、封面比例、标题字号、价格颜色都要统一，否则页面会显得杂乱。用Grid排列卡片比浮动更可控：

.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .course-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .course-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .course-card img { width: 100%; height: 140px; object-fit: cover; } .course-card h3 { padding: 12px 16px 4px; font-size: 16px; font-weight: 600; } .course-price { display: block; padding: 8px 16px 16px; font-size: 18px; font-weight: 700; color: #ff7a00; }

卡片内部参数可以参考下面这张表：

逻辑说明：repeat(4, 1fr)表示一行四列，每列等宽。gap直接控制卡片间距，比给每张卡片写margin再处理第一列左边距省事得多。hover时的位移和阴影变化给卡片加了反馈，看起来不那么死板。

5. 学成在线PSD切图常见坑：五条血泪经验

这套素材做下来，返工最多的不是布局，而是切图和CSS细节。下面五条踩坑记录是按出现频率排的，每一条都是先看现象、再讲原因、最后给解决办法。

5.1 切图发虚，放进页面像蒙了一层雾

现象：图标或banner导出后，放到网页里边缘发虚、字不清晰，尤其在手机上更明显。

原因：多半是导出时用了1x尺寸，或者直接在PS里把原图放大后再导出。PSD里的位图放大后边缘没有足够像素补全，自然发虚。

解决：导出时选2x或3x倍图，网页里用CSS把图片宽度压回设计稿尺寸。比如设计稿里图标是24px宽，导出48px的图，CSS里写width: 24px。高清屏上会占用高密度像素，边缘就锐利了。

5.2 颜色看起来发灰，和PSD里不一样

现象：从PSD里吸到的色值是#999999，放到页面上却比原稿更深或更浅；同一个颜色在不同区块里显示不一致。

原因：PSD颜色配置文件和浏览器显示机制不一定相同，还有可能是导出时误用了低品质JPEG格式导致色彩被压缩。

解决：统一在PS里把“颜色设置”调到“显示器RGB”，吸管取色后直接复制Hex值。图标和装饰图全部走PNG-24格式，不要压缩成JPEG。

5.3 字体大小对不上，标题和正文比例失调

现象：设计稿里标题是28px，代码里写的也是28px，但页面预览看起来比PSD小一圈。

原因：浏览器默认字号是16px，如果全局没有重置根字号，或者误把PSD里的像素值当成了em单位，渲染出来的实际尺寸就会对不上。另外不同操作系统的字体渲染算法也有差别，同一字号在Windows和macOS下粗细感不同。

解决：在CSS开头写html { font-size: 16px; }，所有尺寸都用px或者基于这个根值的rem。页面里多用标准字体栈，比如“PingFang SC”“Microsoft YaHei”，少用自定义字体包，避免出现字体加载前后跳动。

5.4 卡片挤爆或错位，换行后多出半张卡片

现象：课程卡片一行四列，浏览器宽度正常时没问题，稍微拖动缩放或打开开发者工具就自动换行，第四列掉到第二行。

原因：我排查过不少次，90%的情况是没加box-sizing: border-box，卡片设了宽度又加padding，实际占用宽度超出容器，一行放不下四列。

解决：全局重置里必须包含box-sizing: border-box。如果还错位，就检查卡片内部是否有固定宽度的元素，比如封面图设置了width: 300px而不是width: 100%，把它改成相对宽度即可。

5.5 图标和文字怎么都对不齐

现象：导航栏里的图标和文字一起排列时，图标总比文字高出一两个像素，看起来像故意歪着。

原因：图标本身是图片，默认按基线对齐；文字则是按行高占位。二者对齐方式不同，直接放同一个flex容器里就会出现视觉错位。

解决：在图标所在容器上加display: flex; align-items: center;，或者给图标设vertical-align: middle并加一个2px左右的微调量。不要靠肉眼在PS里量像素，写代码时直接以导航栏高度为基准做垂直居中，再微调1到2px即可。

6. 用验收三板斧给学成在线PSD素材收尾：对图、跑页面、留规范

页面做完不等于结束，验收这一步我习惯固定走三板斧，既能发现隐藏问题，也能为下一个项目留下模板。第一板斧是对图。把完成的页面截图拖回Photoshop，和原设计稿分两个图层叠放，混合模式改成“差值”，完全一致的区块会显示为黑色，有偏差的地方会发白高亮。这个方法能精确到像素级检查间距和大小，比肉眼对照可靠得多。

第二板斧是跑本地服务器再做交互检查。直接双击HTML文件打开，部分异步资源和字体加载会受限，页面效果和真实环境有差别。用python -m http.server 8080起一个本地服务，再用无痕窗口访问，能同时检查缓存和资源路径是否写对。顺手做一份自查清单：导航是否吸顶、轮播是否循环、卡片hover是否有反馈、footer是否贴底。

第三板斧是把PSD里抽出来的规范沉淀成CSS变量文件。把--main-color、--text-color、--card-radius这些变量集中放到variables.css里，下次做类似项目直接复用。这是一个很小的成本，但能省掉大量重复吸色和量尺寸的时间。我习惯把切图时用到的按钮操作宏指定成Photoshop动作，下次处理同类素材时按一个键就完成导出，这个习惯帮我省了不少时间。这套流程不一定是最快的，但一定是返工最少的，希望帮到你。

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