学成在线PSD前端练手：从设计稿到HTML/CSS完整还原流程

简介一套面向网页设计入门与前端开发初学者的学成在线案例资源源自黑马程序员及Pink老师课程体系将PSD设计稿与HTML/CSS实现打包到一起。设计稿涵盖首页、课程列表页、课程介绍页、职业规划页等典型页面适合用于训练从设计图到静态页面的还原能力标签中反复出现的粉色视觉元素也适合关注女性化、温馨风格界面的学习者参考。压缩包共11个文件含4个PSD源文件、5个PNG切图素材、1个HTML页面与1个CSS样式表整体17.71MBPSD可用来拆解图层与设计思路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先看图层结构别急着拖参考线快捷键 CtrlJ 复制当前图层在副本上做标注不会破坏原图。用图层面板右上角的搜索框按名称过滤可以快速定位某个按钮或标题。如果你拿到的是图层嵌套比较深的版本按住 Ctrl 键Mac 用户对应 Command 键点击画布中的目标元素PS 会直接帮你在图层面板里定位到那一层这比在几十个图层里人肉滚动高效很多。这一步的目的不只是找某个像素而是建立对整份设计稿的模块认知哪些部分需要切图哪些背景可以直接平铺哪些元素是文字而非图片。比如 banner 里的人物大图一般是一整幅背景直接导出大图即可而课程卡片上的星星评分通常是文字字符就不该用切图方式去导。先把这些判断做完后面导出才不会缺图。2.2 量尺寸、字号、行高的标准方法量宽度高度最常用的是矩形选框工具快捷键 M。框住元素后看信息面板的 W 和 H注意信息面板的显示单位要切成像素。量字号用文本工具快捷键 T点击 PSD 中的文字字符面板里就能看到字体、字号和行高。颜色取值用吸管工具直接点看到什么颜色就记录成 hex 值。一个踩过多次的细节按钮或卡片往往带着投影、发光之类的图层效果量高度时如果连阴影一起框进去量出来的值会比实际内容多出 2px。我一般会先把目标图层的效果关掉再量量完再恢复这样出来的数据才和真正的视觉盒子一致。下面是拿到 PSD 后建议采集的设计规范清单采集项使用工具注意事项版心宽度矩形选框 信息面板量内容区的最大宽度不是整个画布宽度模块间距矩形选框 信息面板量两个模块间的外间距注意是否包含 padding字号文本工具 字符面板行高也在这里看单位改成像素主色/辅助色吸管工具有透明度的图层需先调整不透明度再取色图片尺寸裁剪工具属性栏对 banner 大图直接看裁剪预设的宽高这套数据在写 CSS 时要对照使用。如果在字符面板里看到的是 pt就在标尺上右键切到像素不要自己换算单位切对了数值才是可靠的。2.3 切片导出与命名规范需要切图的目标一般只有图标、按钮、特殊背景的模块图。大块的纯色和渐变背景不需要导出CSS 里用 background 属性直接还原。导出方式有两种我推荐组合使用。单个图标或按钮在图层上右键选择“导出为”格式选 PNG透明背景导出后直接得到独立图片文件。多个相邻小元素用切片工具框选后AltShiftCtrlS 打开“存储为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 langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title学成在线-首页/title !-- 引入CSS样式 -- link relstylesheet hrefcss/index.css /head body !-- 顶部导航logo、导航链接、搜索框 -- header classheader div classcontainer h1 classlogoa href#学成在线/a/h1 nav classnav ul lia href#首页/a/li lia href#课程/a/li lia href#职业规划/a/li /ul /nav div classsearch input typetext placeholder请输入关键词 button typebutton搜索/button /div /div /header main !-- banner横幅区 -- section classbanner div classbanner-img img srcimages/banner.png alt热门课程推荐 /div /section !-- 精品推荐课程列表 -- section classrecommend container h2精品推荐/h2 ul classcourse-list li classcourse-item a href# img srcimages/course01.png alt前端开发入门 h3前端开发入门/h3 p classprice¥299/p /a /li /ul /section /main !-- 页脚 -- footer classfooter div classcontainer p学成在线 - 让学习变得更简单/p /div /footer /body /html这套骨架里的几个选择都有对应理由不是随手写的。langzh-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 偏移设为 0y 偏移 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 或负 marginflex-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 素材和配套代码下载后从头到尾完整过一遍会比只看不练收获大得多。希望帮到你。本文还有配套的精品资源点击获取