简介这份资源面向网页设计初学者与进阶开发者围绕黑马程序员「学成在线」案例提供从视觉稿到页面实现的完整练习素材可用于对照学习HTML结构搭建与CSS样式还原理解设计稿到代码的落地过程。压缩包共11个文件约17.71MB包含4个PSD分层设计稿首页、课程列表页、课程介绍页、职业规划页、5张PNG图片素材、1个HTML页面与1个CSS样式文件覆盖设计源文件与前端代码两类内容便于逐层拆解图层组织、配色与布局思路并对照样式规则分析色彩搭配、字体选择与响应式处理。目前已有14060人学习下载适合作为课程配套练习或自主临摹项目帮助读者在还原案例的过程中积累页面结构与样式编写经验提升独立完成静态页面的能力。1. 学成在线 PSD 素材及代码一份能直接跑起来的静态页还原包前端练手项目里「学成在线」这个案例被反复提起但多数人卡在同一个地方拿到 PSD 却不知道从哪一层切起切完发现布局对不上对上了又发现字体和间距全是玄学。这份资源把 PSD 源文件和配套 HTML/CSS 代码一起打包解决的正是「设计稿到可运行页面」中间那段没人愿意细讲的落地环节。它适合刚学完 HTML 标签和 CSS 盒模型、想找一个完整页面练手的人也适合带新人时需要一个标准参照物的从业者。整个案例是典型的 PC 端企业培训类站点首页包含顶部导航、轮播区、课程卡片列表、讲师模块和页脚结构规整、模块重复度高正好用来练浮动、定位、清除浮动和精灵图这几样老派但绕不开的基本功。下面按「先看清结构、再动手切图、最后排错」的顺序拆开讲每一步都能照着复现。2. 拆解 PSD 图层与页面骨架先定版心再谈切图拿到 PSD 之后最忌讳的操作是打开就切。图层命名混乱、分组嵌套深、隐藏图层一堆直接切出来的图尺寸和位置大概率对不上。正确顺序是先读设计稿的整体约束再决定切哪些图、哪些用 CSS 画。2.1 从 PSD 里读出三个关键参数打开 PSD 后先做三件事不用急着导出任何图片。第一量版心宽度。用矩形选框工具拉一条横跨内容区的选区看信息面板的宽度值这个案例里内容区是居中的固定宽度两侧留白随浏览器变化所以后面所有模块都要套一个定宽容器再margin: 0 auto。第二量模块间距。相邻两个区块之间的垂直距离决定了margin和padding的分配量的时候以文字基线或卡片边缘为准不要以图层边界为准因为图层边界常常带透明像素。第三记录主色和辅助色的十六进制值用吸管工具取色后直接写进 CSS 变量或注释里避免后面反复回 PSD 取色。常见做法是新建一个文本文件把版心宽度、各模块高度、主色、字号、行高逐条记下来这份清单就是后面写 CSS 的依据。血泪经验是不记清单直接写写到第三个模块就会开始凭感觉填数值最后整页间距忽大忽小。2.2 图层分组与切图边界的判断PSD 里通常按「头部 / 轮播 / 课程列表 / 讲师 / 页脚」分好组但组内往往混着文字图层、形状图层和位图。判断标准很简单能用 CSS 写出来的绝不切图。纯色背景、圆角矩形、分割线、简单图标优先用 CSS 的background-color、border-radius、border实现只有渐变复杂、带纹理、含插画或照片的部分才导出为图片。这个案例里需要切的主要是轮播大图、课程封面缩略图、讲师头像和几个装饰性小图标。切图时统一导出为 PNG 或 JPG命名用「模块名_用途」的格式比如banner_01.jpg、course_cover_01.jpg、icon_play.png。小图标如果尺寸一致、风格统一可以合并成一张精灵图用background-position定位减少请求数。导出前记得关掉无关图层否则会把隐藏的文字或参考线一起带出来。2.3 搭出可复用的页面骨架骨架阶段只写结构不写样式细节把语义标签用对。下面这段是首页的顶层结构模块顺序和 PSD 分组一一对应!-- 页面骨架模块顺序与 PSD 分组保持一致 -- div classheader !-- 顶部导航 -- div classw !-- 版心容器统一宽度居中 -- div classnav.../div /div /div div classbanner.../div !-- 轮播区通栏背景 -- div classcourse !-- 课程列表 -- div classw.../div /div div classteacher !-- 讲师模块 -- div classw.../div /div div classfooter.../div !-- 页脚通栏背景 --这里的.w是版心类全站复用宽度取 PSD 量出来的值配合margin: 0 auto居中。通栏模块banner、footer的背景铺满整行内容仍然套.w这样背景色不会因为版心限制而断开。骨架写完先在浏览器里看一眼确认模块上下顺序和设计稿一致再进入样式阶段。顺序错了后面调间距会非常痛苦因为浮动和定位都依赖文档流位置。3. 用浮动与定位还原三大模块从导航到课程卡片骨架有了接下来按模块逐个还原。这个案例的技术栈就是原生 HTML CSS没有框架所以浮动布局、清除浮动、绝对定位这几样必须吃透否则卡片会掉行、轮播会错位。3.1 顶部导航的浮动布局与清除浮动导航区左边是 logo中间是横向菜单右边是登录注册典型的三段式。做法是给 logo 和右侧区域分别float: left和float: right中间菜单也左浮动父容器清除浮动。清除浮动用伪元素方案比加空 div 干净/* 清除浮动给浮动元素的父容器加 clearfix */ .clearfix::after { content: ; display: block; clear: both; } .nav-logo { float: left; } .nav-menu { float: left; margin-left: 40px; } .nav-menu li { float: left; margin-right: 30px; } .nav-user { float: right; }clear: both让伪元素落到所有浮动元素下方父容器因此被撑开背景色和边框才不会塌陷。菜单项之间的间距用margin-right控制最后一个可以单独去掉或者用li li选择器统一加左边距避免首项多出空隙。导航高度用line-height等于容器高度实现垂直居中比padding上下对称更好调。3.2 轮播区的定位与层级控制轮播区是通栏背景加居中内容左右箭头绝对定位在两侧底部小圆点绝对定位在底部居中。父容器设position: relative子元素用position: absolute加top/left/right/bottom定位。箭头垂直居中用top: 50%配合transform: translateY(-50%)比算固定像素稳。/* 轮播容器与箭头定位 */ .banner { position: relative; height: 420px; /* 高度取自 PSD 量值 */ background: url(../images/banner_bg.jpg) center/cover no-repeat; } .banner .arrow-left, .banner .arrow-right { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; background: url(../images/icon_arrow.png) no-repeat; } .banner .arrow-left { left: 60px; } .banner .arrow-right { right: 60px; transform: translateY(-50%) rotate(180deg); }center/cover保证背景图铺满且不变形箭头用同一张图旋转 180 度复用省一次切图。层级上如果箭头被内容盖住给箭头加z-index但前提是它和内容在同一层叠上下文里父容器有position: relative就满足。轮播本身如果要做自动切换那是 JS 的活静态还原阶段只保证结构和样式到位。3.3 课程卡片的浮动网格与间距对齐课程列表是重复卡片一行四张卡片之间等距。用浮动做网格时最容易翻车的是最后一张掉行原因是容器宽度除以卡片宽度除不尽或者margin-right加多了。稳妥做法是卡片宽度用百分比间距用margin-right每行最后一张用nth-child(4n)去掉右边距/* 课程卡片一行四张第四张去右边距 */ .course-list { overflow: hidden; } /* 触发 BFC包住浮动子元素 */ .course-item { float: left; width: 23.5%; /* 四张加三个间距刚好占满 */ margin-right: 2%; margin-bottom: 20px; background: #fff; } .course-item:nth-child(4n) { margin-right: 0; } .course-item .cover { width: 100%; display: block; }overflow: hidden在这里既清除浮动又裁掉溢出一举两得但要注意它会把超出容器的阴影或下拉菜单也裁掉如果卡片有悬浮阴影效果改用 clearfix。卡片内部封面图设display: block消除图片底部默认间隙这个间隙是行内元素基线对齐造成的很多人以为是 padding 写错了。标题用两行截断超出部分overflow: hidden加text-overflow: ellipsis配合固定高度保证卡片等高。4. 避坑与排查静态页还原里最容易翻车的五处代码能跑不代表还原到位下面这几条是这个案例里高频出现的问题每条都按现象、原因、解决三步走照着排查能省不少时间。4.1 卡片掉行或错位现象一行本该四张卡片实际只排了三张第四张跑到下一行。原因通常是卡片宽度加间距超过 100%或者边框、内边距把盒子撑大了。解决确认box-sizing: border-box是否生效把卡片宽度和间距加起来算一遍必要时把宽度调小 0.5% 留余量。另外检查有没有多余的空白字符在浮动元素之间产生间隙。4.2 父容器高度塌陷现象给子元素加了浮动后父容器的背景色或边框消失下面的模块往上顶。原因浮动元素脱离文档流父容器计算高度时不计入。解决给父容器加 clearfix 伪元素或者用overflow: hidden触发 BFC。注意overflow: hidden会裁剪溢出内容有悬浮效果时慎用。4.3 图片底部出现莫名间隙现象图片下方有几像素空白导致卡片高度比预期高。原因img默认是行内元素按基线对齐基线下方留出字母降部空间。解决给图片设display: block或vertical-align: top一行 CSS 搞定不用去调 margin。4.4 绝对定位跑出父容器现象轮播箭头或角标定位到了页面别的位置。原因父容器没有设position: relative绝对定位元素往上找最近的定位祖先找到了body或更外层。解决给直接父容器加position: relative并确认没有中间层意外设置了position导致定位基准偏移。4.5 字体与行高在不同机器上不一致现象本地调好的文字换台电脑就换行或溢出。原因设计稿用的字体本机没装浏览器回退到默认字体字宽变化。解决优先用系统通用字体栈比如font-family: Microsoft YaHei, Arial, sans-serif不要依赖单一商业字体行高用无单位数值或百分比避免固定像素在不同字号下比例失调。提示排查布局问题时给可疑元素临时加outline: 1px solid red比改背景色更直观不会影响盒模型尺寸。5. 精灵图与响应式微调让还原页更接近可用状态静态还原做到能看只是及格线真正拉开差距的是细节处理。这个案例里小图标不少逐个切图会让请求数飙升合并成精灵图是常规操作另外虽然是 PC 端案例加一点宽度适配能让页面在窄屏下不至于横向滚动条满天飞。5.1 精灵图的坐标计算与复用精灵图的做法是把多个小图标按固定间距排在一张透明 PNG 上CSS 里用background-position取对应区域。关键是坐标要算准通常以图标左上角在整图中的像素位置取负值/* 精灵图定位图标在整图中的左上角坐标取负 */ .icon { display: inline-block; width: 24px; height: 24px; background: url(../images/sprite.png) no-repeat; } .icon-play { background-position: -0px -0px; } .icon-star { background-position: -24px -0px; } .icon-time { background-position: -48px -0px; }每个图标的width/height必须和精灵图里单格尺寸一致否则会把相邻图标露出来。坐标用负值是因为背景图默认从元素左上角开始铺往左上移才能露出目标区域。如果图标之间有留白坐标要按实际间距累加不能简单按图标宽度乘序号。改图标尺寸时不要直接改width/height那会拉伸图标正确做法是重新导出对应尺寸的精灵图或者用background-size整体缩放并同步调整坐标。5.2 窄屏下的最小适配PC 端案例不要求完整响应式但至少保证窗口缩到 1200px 以下时不出现横向滚动条。做法是给版心容器加min-width兜底同时给body设overflow-x: auto让窄屏出现滚动条而不是内容被裁。更细一点可以用媒体查询在 1024px 以下把课程卡片从四列改两列/* 窄屏适配卡片两列版心不再强制居中留白 */ media (max-width: 1024px) { .w { width: 96%; } .course-item { width: 48%; margin-right: 4%; } .course-item:nth-child(4n) { margin-right: 4%; } .course-item:nth-child(2n) { margin-right: 0; } }这里要注意nth-child的覆盖顺序先重置四列规则再应用两列规则否则第四张的去边距逻辑会干扰两列布局。媒体查询的断点不要拍脑袋按内容开始拥挤的实际宽度定这个案例里四列卡片在 1024px 左右开始挤断点就设在这里。5.3 验证还原度的笨办法还原完怎么判断像不像我一般会把浏览器窗口调到和 PSD 画布同宽截图后和设计稿并排对比重点看三处模块之间的垂直间距是否一致、卡片内文字与边缘的距离是否统一、图标和文字的基线是否对齐。间距不一致多半是 margin 和 padding 混用导致的统一成一种就好基线不对齐通常是行内元素和块级元素混排给图标加vertical-align: middle能解决大半。从那以后我每次还原静态页都会在写完每个模块后立刻截图比对而不是全部写完再统一看因为问题越早发现越容易定位。希望这份拆解能帮到你把 PSD 到页面的那段路走顺。本文还有配套的精品资源点击获取