简介面向网页设计初学者与前端开发入门者这份学成在线案例素材包源自黑马程序员与pink老师课程将设计源文件与页面代码整合到一起适合用来完整走通“设计→切图→前端实现”的流程。压缩包共11个文件约17.71MB包含4个PSD源文件分别对应首页、课程列表页、课程介绍页和职业规划页可在Photoshop中分层查看配色、字体、间距等设计细节另配5张PNG切图含 banner、用户图标、搜索按钮等常用元素以及 index.html 和 style.css能直接对照学习HTML语义化结构与CSS浮动、定位等经典布局写法。目前已有14059人学习下载。借助这套素材既能拆解专业设计稿的视觉规范也能从头练习页面还原理解设计如何落到代码适合完成一个完整的企业级静态页面案例。1. 学成在线案例为什么切图实战还得靠手写HTML和CSS很多人一拿到PSD设计稿第一反应是找自动切图插件一键生成网页几秒钟就能看到完整页面。可实际上真正跟过完整落地项目的人都知道自动生成的代码结构混乱、类名没有语义想改一处布局会牵连整个页面翻车概率极高。学成在线这套经典切图案例之所以常被选作前端课设就是因为从PSD到网页的每一步都要亲手完成HTML结构、CSS布局、切图导出、像素级对齐这些基本功全部覆盖。这篇文章就围绕这个需求给你一套能直接落地、能自检验收的完整方案从技术选型讲到模块实现再到最后怎么答辩。2. 总体设计与技术选型先拆布局再写代码避免“边写边乱”2.1 为什么选HTML5 CSS3而不是Vue、React学成在线页面本身是静态页面核心内容是导航栏、搜索区、课程卡片列表和底部信息不涉及数据交互也不需要组件复用。用Vue或React做不是不行而是对“训练还原PSD”这个目标没有帮助。这个案例的核心目的是把盒模型、浮动、定位、背景、伪类这些CSS基础吃透而这些恰恰是框架默认帮你掩盖掉的东西。很多同学写完几个框架项目再回头补基础就是因为当初直接用脚手架样式全靠组件库布局交给栅格系统最后连一个clearfix都写不利索。做学成在线这类项目时我一般会坚持用纯HTMLCSS完成JavaScript只用在极少数辅助场景其余全部由CSS承担。等你能够完整还原一整页PSD再上手框架视角会完全不一样。这个选型逻辑很简单先基本功后工具链。对比维度自动切图生成手写HTML CSS代码可读性类名无意义、嵌套深结构清晰、语义明确布局理解黑盒生成不懂原理亲手计算盒模型后期修改改一处牵连多处模块化局部调整答辩价值讲不出设计依据每个数值都有来历2.2 页面结构固定版心加五大分区学成在线PSD的典型布局是上下结构加中间内容区整体版心宽度在1200像素左右内容居中左右留白。拿到设计稿的第一步不是打开编辑器而是先把页面拆成几个大块顶部导航、Banner搜索区、热门课程推荐区、精品课程列表区、页脚信息区。拆完大块后再拆内部小模块。顶部导航里左边是Logo、中间是菜单、右边是用户入口课程列表区是四列网格每列包含课程封面、课程标题、讲师信息和价格。这种分层拆解的意义在于写CSS时每一层都是独立的盒子间距、边框、背景都控制在局部不会出现改一个样式影响全站的情况。页面宽度为什么固定1200px而不是做成响应式这里要说明一下切图案例的训练目标是把设计稿还原成网页关注的是布局基本功。响应式属于进阶话题过早引入媒体查询和弹性布局反而会分散精力。所以这个案例采用固定版心用wrapper类做居中容器所有模块共用这个宽度基准。2.3 目录结构与素材命名拿到学成在线的素材包里面一般包含PSD源文件、切好的图片素材和参考代码。我建议动手前先把目录整理成统一规范避免写着写着找不到文件。learn-online/ ├── index.html ├── css/ │ ├── base.css # 样式重置与公共类 │ └── index.css # 首页模块样式 ├── images/ │ ├── logo.png │ ├── banner.png │ ├── course-01.jpg │ └── icon-arrow.png └── psd/ └── learn-online.psd这个目录结构看起来很简单作用却很大。css集中管理images统一放图psd单独存放源文件。很多同学喜欢把素材跟页面混放图片命名用1.jpg、2.jpg等到验收时找不到图、改不了样式只能从头翻。命名规范上我一般用“模块-用途”的格式比如课程封面图就叫course-01.jpg不会写cover1.jpg这种没有辨识度的名字。一个文件对应一个模块后面做像素级验收会非常方便。注意PSD源文件在整个项目交付前不要删除。中期要改字号、调间距都得回到源文件里去测量这是切图实战中最后悔药也买不回来的操作。3. 核心模块实现从PSD到网页的还原细节3.1 导航栏Logo与菜单的结构化写法顶部导航栏是最容易被忽视却又最体现CSS基础的模块。学成在线导航栏的PSD设计要求内容垂直居中左侧Logo、中间菜单项、右侧登录注册入口整体高度一般在70到80像素之间。HTML结构我推荐直接用语义化标签来写header classheader div classwrapper div classlogo a href#img srcimages/logo.png alt学成在线/a /div nav classnav ul lia href# classactive首页/a/li lia href#课程/a/li lia href#职业规划/a/li /ul /nav div classuser a href#登录/a a href# classbtn-register注册/a /div /div /header这里有几个设计点需要注意。ul默认自带margin和padding列表项默认竖排所以必须先重置再浮动。我常用的做法是给ul设置margin: 0和padding: 0li使用float: left实现横向排列如果不用浮动直接在ul上设置flex布局效果一样但浮动方案对理解文档流更有帮助课设答辩时也更容易讲清原理。CSS部分最容易翻车的细节是Logo图片的对齐。很多同学写完导航发现图片下方多出3到5像素的空隙这是img标签默认按文字基线对齐导致的解决办法是给img设置vertical-align: top或者直接display: block。这个细节在导航里不明显放到课程封面图上就非常显眼后面会展开说明。3.2 Banner搜索区背景图与表单控件的对齐Banner区是整个页面的视觉重心PSD上通常是一张宽幅背景图中间放一个搜索框搜索框内有占位文字和搜索按钮。实现时用div容器承载背景图搜索表单放在背景图内居中位置。section classbanner div classwrapper search-wrap input typetext classsearch-input placeholder请输入想搜索的内容 button classsearch-btn搜索/button /div /section.banner { height: 420px; background: url(../images/banner.png) no-repeat center top; } .search-wrap { padding-top: 120px; text-align: center; } .search-input { width: 450px; height: 50px; border: 0; border-radius: 4px 0 0 4px; padding: 0 15px; vertical-align: middle; } .search-btn { height: 50px; padding: 0 30px; border: 0; background-color: #00a4ff; color: #fff; border-radius: 0 4px 4px 0; vertical-align: middle; }这段实现里有几个参数值得说明。搜索框宽度450px、高度50px是根据PSD设计稿里控件的实际尺寸换算出来的水平方向通过父级text-align: center实现居中垂直方向用padding-top: 120px把搜索框推到背景图合适的位置。这里有两个高频踩坑点。第一input和button并排时明明高度都设成50px却总是对不齐这是默认line-height和字体基线差异导致的给两者都加vertical-align: middle即可解决。第二搜索框placeholder的文字颜色在不同浏览器里默认值不一样需要单独设置input::placeholder选择器来统一样式否则验收时会在某个浏览器里露出默认灰色。再提一点background简写url后面跟的no-repeat center top表示背景图不平铺、水平居中、垂直靠上。这个垂直对齐方式要和PSD中背景图的构图对齐如果设计稿的背景主体偏下就要把top改成bottom不能盲目套模板。3.3 课程卡片网格浮动布局与盒子尺寸核算课程列表是学成在线页面里信息量最大的模块PSD设计稿里一般是四列排列每张卡片包含封面图、课程名称、讲师信息、价格。这里最考察布局基本功因为每张卡片的宽度需要精确计算不能随手写一个数。以版心1200px、四列卡片、列间距30px为例核算逻辑是这样的总间距是30乘3等于90px剩下用于卡片的宽度是1200减90等于1110px每张卡片理论宽度是1110除以4等于277.5px。实际写代码时我不会写277.5px这种带小数的值而是把每张卡片宽度设为270px右边距30px四张卡片总宽270乘4加30乘3等于1170px在1200px版心里左右各留15px视觉上反而更均衡。卡片区域的CSS写法.course-list { margin: 0; padding: 0; list-style: none; } .course-list li { float: left; width: 270px; margin-right: 30px; margin-bottom: 30px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .course-list li:nth-child(4n) { margin-right: 0; } .course-list .course-cover { width: 270px; height: 150px; display: block; } .course-list .course-title { font-size: 16px; color: #333; padding: 15px; line-height: 1.5; } .course-list .course-price { color: #ff7c2d; font-weight: 700; padding: 0 15px 15px; }宽度为什么设270而不是277.5因为浏览器对小数像素的处理存在差异四舍五入后可能让最后一排卡片错位。我把卡片宽度定为270px右边距30px正好四张一行这是一个在切图实战中反复验证过的稳妥做法。还有一个关键坑点li浮动之后父级ul的高度会塌陷后面紧跟着的底部分区会往上挤盖住课程列表。解决这个问题最常用的是clearfix方法这个在避坑章会专门展开细讲。先记住结论凡是父级里面只有浮动子元素的情况都要给父级加清除浮动的处理。3.4 底部信息区语义化标签与居中排版页面底部是最容易被随手糊弄的部分但学成在线PSD对底部信息有具体设计上方是Logo、简介和友情链接下方是版权和备案信息。这类区块在实现时用footer标签内部子区块用div或section都可以文本用p包裹。footer classfooter div classwrapper footer-main div classfooter-logo img srcimages/logo-footer.png alt学成在线 p学成在线致力于提供优质IT职业教育课程/p /div div classfooter-links h4合作伙伴/h4 ul lia href#合作机构一/a/li lia href#合作机构二/a/li /ul /div /div div classfooter-copyright pCopyright © 2024 学成在线 版权所有/p /div /footer这里有一个排版要点版权区域和上方主内容区通常背景色不同主内容区颜色深、文字浅版权区颜色浅、文字深两者之间可能还有一条分割线。CSS实现时footer-main负责上部的两栏布局用float: left让Logo区和链接区并排copyright区域直接text-align: center居中不需要额外限制宽度。写底部时有一个很实用的检查习惯底部文字在深色背景上很容易出现对比度不足。比如链接文字颜色被设置成#333结果放到深色背景上完全看不清验收时翻了车。这里建议底部主区域的文字颜色统一用浅色系版权区再用深色文字两个区块分开控制。4. 常见问题排查切图实战中五个最容易翻车的场景切图案例做起来不难但翻车点非常集中多数问题不是不会写而是对CSS渲染机制理解不透。下面按“现象、原因、解决”的顺序整理五个在学成在线这类项目里反复出现的场景。4.1 图片路径错误导致背景图不显示现象页面打开后图片位置一片空白背景图不出来浏览器控制台报404。原因大多是路径层级写错。比如CSS文件在css目录里background写成url(images/banner.png)浏览器会以CSS文件所在目录为基准去拼接路径正确写法应该是url(../images/banner.png)。另一种情况是图片文件名带中文或空格本地测试能打开部署到服务器就404。解决统一路径规则CSS中引用图片一律写相对CSS文件的路径文件命名使用英文小写和连字符避免中文和空格。排查时先打开浏览器控制台的网络面板确认是哪个资源请求失败再逐层检查路径。不要凭感觉改也不要同一份代码里混用相对路径和绝对路径。4.2 浮动父级高度塌陷底部内容往上挤现象课程列表下方的内容顶到卡片上面父级背景色没有包住卡片区域。原因课程卡片全部设置float: left后li脱离普通文档流父级ul计算高度时发现子元素高度为0于是高度塌陷。如果父级没有显式设置高度后面的footer就会往上挤占位置。解决给父级使用clearfix闭合浮动这是切图项目里最稳妥的方案。.clearfix::after { content: ; display: table; clear: both; }这段代码的原理是::after伪元素在容器末尾生成一个空白块clear: both强制它换行到所有浮动元素下方父级因此被撑开。注意这里用display: table而不是display: block因为table在某些浏览器中不会产生额外空白这是实际项目中踩过坑之后得出的写法。4.3 写了一大堆样式就是不动选择器优先级没搞清楚现象明明改了字体颜色页面纹丝不动控制台里看到自己的样式被划掉但又找不到是哪条规则覆盖的。原因选择了过低优先级的选择器被更高权重的规则覆盖。比如页面里已有.container .course-title { color: red; }你新增一条.course-title { color: blue; }前者优先级更高后者不是没生效而是被盖掉了。解决养成从浏览器开发者工具Elements面板查看Computed样式的习惯看最终计算值再定位问题。写CSS时控制选择器嵌套层数一般不超过三层三层以上就需要重构。如果确实要覆盖用更具体的选择器而不是!important。!important是后悔药偶尔用一次可以用多了后面维护的人会非常崩溃。4.4 课程封面图底部出现缝隙图片和标题对不齐现象课程封面图和下面的标题容器之间有明显空隙怎么调margin都消不掉。原因img元素默认是内联显示行内元素会在底部预留文字基线的空间所以图片下方多出一段空白。前面导航栏的Logo也有这个问题只是封面图尺寸大看起来更明显。解决给img设置display: block把图片变成块级元素缝隙立刻消失。更一劳永逸的做法是在重置样式文件里统一加img { display: block; }省得每张图片单独处理。另外封面图固定高度150px但实际导出的图片可能存在宽高比不一致的情况需要object-fit: cover防止图片变形这个属性在还原设计稿时几乎必用。4.5 页面字体和设计稿对不上像素感偏胖现象PSD设计稿里字体看起来正常浏览器里字偏大或偏小行距也不对页面整体比设计稿胖一圈。原因PSD设计稿的字号单位是像素浏览器默认字体大小是16px。如果设计稿里的说明文字是12px代码里没有显式声明font-size浏览器就会显示默认字号。另一个原因是设计稿使用的字体在浏览器里没有加载自动回退成系统默认字体。解决在样式重置文件里设置完整的字体栈body声明font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif所有字号按照PSD标注的像素值逐个声明行高用line-height精确控制。验收时可以用下一章讲到的叠加对比法如果字号还是偏大偏小优先检查是不是被浏览器默认样式影响了。5. 进阶调整从“还原页面”到“写出规范工程”5.1 语义化标签重构让结构更清晰初学前端时写HTML容易全部用div页面层级像一锅粥。学成在线页面做进阶优化时我会把无意义的div替换成语义化标签。这样做的直接好处是代码可读性提升答辩时能主动说出“这里用nav而不是div因为它是导航区域”这就是加分项。前面导航栏已经用了语义化标签课程区域同样替换成sectionsection classcourse-hot h2热门推荐/h2 p classcourse-desc精选热门课程助力快速成长/p /section section classcourse-list-wrap h2精品课程/h2 ul classcourse-list li img srcimages/course-01.jpg alt前端开发课程 h3前端开发零基础入门/h3 p讲师张老师/p p classcourse-price¥299.00/p /li /ul /section这里有一个容易被忽略的细节section是分块元素语义上要求内部有标题所以对应的h2不能省略。如果某个区域确实不需要标题更应该用div而不是section。很多人以为语义化就是换标签其实语义化是让标签含义与内容匹配这个认知在答辩时特别重要。课程卡片内部用h3做课程标题也是语义化的一部分h1到h6有明确的层级关系页面上的标题层级应该从h2往下逐级使用不要跳级。这一点虽然在视觉上没差别但在页面结构和可访问性层面是有分的。5.2 样式重置与全局公共类不同浏览器自带不同的默认样式比如body默认margin是8pxul默认有paddingh1到h6字号各不相同这些默认值会让页面在不同浏览器里显示不一致。做切图类项目我习惯第一件事就是写一个base.css做样式重置。* { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; border: 0; } body { font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif; font-size: 14px; color: #333; background: #f5f5f5; } .wrapper { width: 1200px; margin: 0 auto; }这个重置文件里有几个关键点值得说明。box-sizing: border-box让width直接包含padding和border计算卡片尺寸时不会出现“宽度定好了又加了内边距导致撑破”的情况这是切图时避免布局错乱的核心设置。img设置max-width: 100%防止大图撑破容器border: 0是清除图片在旧浏览器里的蓝色边框。最后一个.wrapper就是版心公共类全站所有需要居中的容器都用它避免每个模块重复写margin: 0 auto。字体方面body统一设置14px作为基准字号这是页面正文的常用尺寸。设计稿里如果某段文字明显更小再单独给对应标签设置font-size。这样做的意义是全站文字有了统一基准不会被浏览器默认的16px干扰实现了像素级还原的第一步。5.3 切图导出尺寸、格式与命名怎么选从PSD导出素材也有讲究很多同学直接截图另存为JPG导出的图片模糊或者尺寸不对。这里我一般按以下几个原则处理。第一Logo、图标这类需要透明背景的图导出PNG格式不要导出JPG。JPG不支持透明背景放进页面会出现白色方块整个导航栏的精致感瞬间就没了。第二Banner这种大面积背景图导出JPG并压缩到合适的质量页面加载速度会快很多。第三课程封面图如果PSD里是圆角设计导出时保留圆角效果不要在CSS里额外写border-radius两边的圆角参数不一定一致叠出来边缘会有明显差异。还有一个重要细节导出图片的尺寸严格按PSD里图层实际像素大小不要为了省空间缩小图片。CSS最终显示尺寸和图片文件尺寸不一致没关系浏览器会自动缩放但文件原始尺寸大于显示尺寸时高分屏下显示会更清晰。这个细节在验收时用放大镜对比就能看出来差异。命名沿用前面说的“模块-用途”规范banner.png表示首页Banner背景course-cover-01.jpg表示课程封面图。后期想替换素材只需要覆盖同名文件代码一行都不用改这是工程化意识也是验收时节省时间的关键操作。6. 验收与答辩像素级核对与高频提问应对最后一环决定课设的最终分数。代码写完不等于交付完成要从“能跑”提升到“能证明自己拿得出手”。我一般会整理三张核对表作为验收清单按顺序走一遍。第一张表对照PSD检查页面逐模块比对间距、字号、颜色、图片是否一致第二张表检查浏览器兼容性Chrome、Edge、Firefox各打开一遍重点看布局有没有位移、字体有没有异常回退第三张表整理技术点清单把每个模块用到的布局手段和选择理由写出来答辩现场直接照着说。具体到像素级对比有一个非常实用的调试技巧把PSD导出的设计稿截图作为背景图叠在页面下方做透明度对比。操作方法是给body设置设计稿截图作为背景同时加opacity: 0.5透明度再把页面内容正常铺在上面拖动滚动条就能直观看到每个模块与设计稿的偏差。调整完成后记得把调试样式删掉这个办法能帮你在十分钟内找完所有间距问题。答辩时最容易出现的提问和应对方式如下直接列成表格方便你对照准备高频提问推荐回答思路为什么用浮动不用flex教学场景需要展示文档流理解且兼容性更稳为什么版心宽度1200px设计稿按此宽度绘制也是当时主流屏幕设计习惯为什么卡片宽度270px按四列、间距30px计算总宽不超出版心字体大小怎么定的对照PSD标注的像素值配合重置后的基准字号应对这些问题的关键不是背答案而是把设计依据讲清楚。回答里带出“计算”和“依据”这两个词分数一般不会低。即使某个答案不准确只要展示出“我是算过、验证过才这么写的”态度导师就能相信你有独立的工程判断力。最后分享一个我的习惯从那以后我每次做完一个静态页面都强制自己走一遍验收清单先查路径再查布局先对间距再对字号先在Chrome里过一遍再去其他浏览器看一遍全部走完才敢说交付。学成在线这个案例做完你收获的不只是几张网页还有这一套以后每个项目都用得上的验收方法。希望帮到你。本文还有配套的精品资源点击获取