简介这是面向网页设计初学者与前端开发者的“学成在线”页面实现素材源自黑马程序员及学成在线案例。整套资源将设计稿与前端代码配套呈现既能用于练习 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的第一个操作不是按CtrlShiftS而是把“图层”面板打开从头到尾过一遍。看什么看分组。学成在线这类教育类项目的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吸管为准用途参数备注主色以PSD吸管读值为准导航高亮、按钮、价格文字常用正文色以PSD吸管读值为准不要直接用纯黑主字号14px正文基础字号标题字号18px或24px区块标题用页面内容宽度1200px居中容器这张表建好以后后面所有页面的代码都围绕它展开。我在这一步还会顺手把表改成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两种常用做法与参数第一种是选区复制法。用矩形选框选好区域按CtrlShiftC合并复制再新建透明背景文档粘贴最后导出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 langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title学成在线 - 首页/title link relstylesheet hrefcss/style.css /head body header classheader div classheader-logo学成在线/div nav classheader-nav a href#首页/a a href#课程/a a href#名师/a /nav div classheader-search input typetext placeholder搜索课程 /div a href# classheader-login登录/a /header main classmain section classbanner div classbanner-slider img srcassets/img/banner/banner-home-01.png alt首页轮播 /div /section section classcourse-list h2 classsection-title推荐课程/h2 div classcourse-grid div classcourse-card img srcassets/img/course/course-cover-01.png alt课程封面 h3Java基础入门/h3 span classcourse-price299/span /div /div /section /main footer classfooter p© 学成在线/p /footer /body /html逻辑说明body下面直接按“PSD顶部到底部”的顺序放header、main、footermain内部再按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 classbanner-slider div classbanner-item active img srcassets/img/banner/banner-home-01.png alt轮播图1 /div div classbanner-item img srcassets/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.2ssetInterval的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; }卡片内部参数可以参考下面这张表元素推荐值说明卡片圆角8px与页面整体圆角风格统一卡片阴影0 4px 12px rgba(0,0,0,0.08)阴影不宜过重封面高度140px按PSD封面宽高比换算标题内边距12px 16px 4px上左右外紧内松价格颜色橙色系与主色蓝色形成反差逻辑说明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动作下次处理同类素材时按一个键就完成导出这个习惯帮我省了不少时间。这套流程不一定是最快的但一定是返工最少的希望帮到你。本文还有配套的精品资源点击获取