简介面向HTML与CSS初学者这套“学成在线”网页设计案例素材与代码源自黑马程序员前端课程配合pink老师教学体系适合用于课堂同步练习、课后复刻或前端入门项目复盘。压缩包共11个文件包体约17.71MB其中4个PSD源文件提供完整视觉稿5张PNG图片包含Banner、Logo、搜索图标等界面元素另附一套可直接运行的HTML页面与CSS样式表覆盖首页、课程列表页、课程介绍页和职业规划页等典型板块。通过将PSD图层与前端代码对照学习可以掌握图片切片、浮动与定位布局、字体与色彩搭配、地区导航及卡片式模块设计等关键技能理解从设计稿到响应式静态页面的完整工作流。资源已有14050人浏览下载尤其适合需要积累项目经验或强化页面还原能力的学习者反复拆解后能明显提升代码规范性与布局效率。1. 学成在线案例套件从设计稿到网页的一次完整走查当你在某套前端课程里拿到这份“学成在线案例”PSD素材和配套代码时第一反应往往是打开 Photoshop 直接切图。但我建议你先花十分钟确认一件事这套素材要你练的是 HTML CSS 基本功还是“设计稿到网页”的完整流程。这份素材是一个在线教育平台的静态首页包含顶部导航、轮播区域、精品推荐、课程卡片列表和底部信息结构非常标准适合刚学完选择器、盒模型和浮动的人拿来验证自己能不能独立还原一个页面。它能解决的具体问题是从 PSD 切图开始到浮动与 flex 布局、背景定位、精灵图、hover 交互再到现在找工作时常被问的高度塌陷和路径引用错误。新手可以按章节走熟手可以直接跳到避坑章挑你要的全程我会按实际拆包的顺序把步骤和参数写清楚。2. 把 PSD 切成网页图层命名、切片导出与目录结构所谓“切图”很多人理解为拿切片工具框一下再导出实际这只是最后一步。真正决定后面代码能不能顺利落地的是切图之前怎么分层、怎么命名、怎么决定每张图的存储格式。这一章按我拆这份素材的顺序来写每一节都能直接照做。2.1 先看 PSD 的图层构成确定哪些图必须切打开 PSD 后先别急着动手打开图层面板从上往下过一遍。这份素材的图层文件夹基本按区域划分菜单栏、banner、推荐位、课程卡、页脚每个文件夹内部是背景切片和小图标。教学用 PSD 通常用中文或拼音命名比如“banner_bg”“icon_arrow”“course_cover”这种命名方式好处是导出后文件名基本不用改坏处是不同作业的命名风格差异很大你拿到手后最好自己统一一遍。我一般会做一次“图层清理”先隐藏所有参考线和辅助元素再把每个要切出的元素拖到新建文档里单独观察尺寸。判断依据很简单凡是 CSS 里用img或背景图展示的内容就要切凡是用纯色、渐变、圆角能画出来的装饰就不切。这份素材里 banner 右侧的装饰云朵、按钮上的渐变光泽其实都可以用 CSS 实现切了反而让图片数量膨胀、加载变慢。提示切图前先检查 PSD 的色彩模式必须是 RGB。如果发现是 CMYK用“图像 → 模式 → RGB 颜色”转换一次否则导出的图片在网页上会有明显的偏色。图层检查这一步做完你手里应该有一张“待切清单”。我习惯用表格记一下避免切到一半忘了哪张图是给哪个模块用的模块元素预期格式用途顶部logoPNG 24img引入顶部导航箭头PNG 8背景定位banner大背景JPEG背景图banner搜索图标SVG 或 PNG按钮前置图标课程卡封面图JPEG卡片配图页脚备案图标PNG 24信息展示这张表写完你就能估算出最终图片数量。这个案例大概 10 到 20 张图就够如果你切出来超过 40 张说明有些装饰元素不该切回头重新检查一次。2.2 切片导出两种姿势存为 Web 所用格式PSD 切图常用的有两套做法不同场景混着用效率最高。第一种是传统的“切片工具 存储为 Web 所用格式”。先在工具栏选切片工具沿着参考线框出一个矩形区域然后双击切片区域设置切片名称名称就是导出后的文件名。左侧工具栏选“存储为 Web 所用格式”或者直接按快捷键 Ctrl Alt Shift S在弹出面板里选择 PNG-24 或 JPEG勾选“转换为 sRGB”点存储。注意这里有一个非常容易踩的选项左下角的“透明度杂边”不要勾。一旦勾上半透明边缘会被填充成你在色板里选的颜色放在深色背景上就会出现一圈白边后面避坑章还会细说。第二种是“图层单独导出”。在图层上右键 → 导出为 PNG或者选中多个图层用“导出快速为 PNG”。这种方式适合导出单个图标、logo 这类边缘不规则的内容比切片工具更精确因为它会按图层实际像素范围裁剪不会把透明区域也切成一张大方图。这套素材里的箭头、星星、小图标我都是用这种方法导的。两个姿势的选择逻辑我给你一个判断标准整块背景、包括空白区域一起切用切片工具适合 banner 背景和课程封面。需要抠出元素本身的透明背景用图层导出适合 logo 和图标。导出格式按内容定有渐变、投影、半透明的用 PNG-24纯色块、没有透明区域的用 PNG-8 或 JPEGJPEG 质量设 80 到 90 就够不要拉满 100体积会大 30% 以上。如果设计稿按 2 倍尺寸输出比如原图宽度 2400px实际显示 1200px导出时可以缩放到显示尺寸。缩放后注意检查边缘发虚这是常见翻车点原因后面讲。2.3 素材目录把 css、images、fonts 分开放很多新手直接把所有图片堆在 html 同目录CSS 文件也放同一层。短项目没问题但这份素材包含多模块背景图、课程封面、图标文件一多就容易路径引用错。我这里用的目录结构是这样mkdir -p xuecheng/css xuecheng/images xuecheng/fonts touch xuecheng/index.htmlxuecheng ├── css │ └── index.css ├── fonts │ └── iconfont.woff2 ├── images │ ├── logo.png │ ├── banner_bg.jpg │ ├── course_01.jpg │ └── icon_arrow.png └── index.html每个目录只干一件事路径关系就很好算index.html 在根目录引用 css 和 images 都是css/index.css、images/logo.png这种同级关系CSS 文件在 css 目录里引用图片就要回退一层写成../images/logo.png。缺了这个../页面所有背景图都会变成 404这也是新手问得最多的“为什么图片不显示”的原因之一。index.html 里基本的引 bootstrap 结构可以这样写!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title学成在线案例首页/title link relstylesheet hrefcss/index.css /head body !-- 模块逐步填充 -- /body /html在真正写样式之前我还会把fonts目录里可能要用到的字体图标文件先准备好。这套素材里有些小图标可以直接用文字符号代替比如列表前的箭头用加样式模拟但如果追求和设计稿一致最好引入图标字体。字体文件的引入要写在 CSS 顶部用font-face声明路径同样注意../fonts/的问题。3. 用 CSS 让页面立起来reset、版心、布局顺序与悬浮交互切图完成只是把原料备好这一章从零开始写样式。代码我会按实际落地顺序给每段后面会解释为什么这么写以及参数怎么调。3.1 清空默认样式宽度归到版心浏览器对 HTML 标签自带默认样式比如 body 有 8px 外边距、ul 有左边 padding、a 标签默认带下划线。不清掉的话你写的每一个边距都要和默认值打架越写越乱。这个案例我用的 reset 比较简单实用/* 清除默认边距与样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #333; background: #fff; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { display: block; }这里box-sizing: border-box是一个关键设定。它让 padding 和 border 都算在设置宽度内比如一个 div 写width: 1200px; padding: 20px;实际内容区是 1160px整体仍然占 1200px不会被撑破。新手不写这一句经常出现“明明设了 1200 宽放两个盒子却换行”的诡异问题原因就是 padding 把实际宽度顶到了 1240px。通用选择器*和标签重置写完后先定义版心类.wrapper { width: 1200px; margin: 0 auto; }这个版心宽度 1200px 是直接量 PSD 得到的。你可以用 PS 的标尺从设计稿左边栏量到右边栏然后把测量值填进来。后续所有内容块都套.wrapper就能保证内容居中。如果设计稿有别的宽度比如 1240px改这一处全局就生效。3.2 顶部导航传统 float 方案与改进后的 flex 对比头部结构通常分三段左侧 logo、中间导航菜单、右侧登录入口。用传统 float 实现的代码是这样header classheader div classwrapper div classheader-left a href# classlogoimg srcimages/logo.png alt/a /div ul classnav-left lia href#首页/a/li lia href#课程/a/li lia href#职业规划/a/li /ul div classheader-right a href#登录/a a href# classregister注册/a /div /div /header.header { height: 60px; border-bottom: 1px solid #eee; background: #fff; } .header .wrapper { height: 60px; } .header-left { float: left; } .nav-left { float: left; margin-left: 30px; } .nav-left li { float: left; margin-right: 20px; line-height: 60px; } .header-right { float: right; line-height: 60px; }这套写法能跑但float有个隐患它让元素脱离文档流父容器高度经常塌陷后面避坑章会专门讲。如果你已经学过 flex我更推荐把导航改成弹性盒子.header .wrapper { display: flex; align-items: center; height: 60px; } .nav-left { display: flex; margin-left: 30px; } .nav-left li { margin-right: 24px; } .header-right { margin-left: auto; }margin-left: auto是 flex 布局里非常好用的一个技巧它会自动把右侧内容推到最右边省去浮动和float: right的维护成本。align-items: center让 logo 和文字在同一行垂直居中。两套方案的差异点float 兼容 IEflex 书写更简洁且后续适配移动端更方便。二选一即可不必混合使用。3.3 banner 背景与搜索框定位banner 区在静态页里通常是一张宽图加上一个居中的搜索入口。这里不推荐把整张 banner 放img标签因为如果要做响应式改版背景图方案更好控制。CSS 写法是.banner { height: 360px; background: url(../images/banner_bg.jpg) no-repeat center top; background-size: cover; }background-size: cover的作用是按比例缩放背景图直到完全覆盖 banner 区。这样设计稿宽度 1920px 在不同屏幕上都能铺满不会出现左右露白。center top表示背景居中对齐顶部对齐。如果 banner 里还有文字和搜索按钮通常再用一个相对定位的容器压在背景上.banner .search-box { position: relative; top: 120px; width: 460px; margin: 0 auto; } .search-box input { width: 380px; height: 40px; padding-left: 20px; border: 0; border-radius: 20px; outline: none; }这里的position: relative配合top: 120px只是快速让搜索框下移具体数值要根据 PSD 里搜索框离顶部距离来量。你不要凭感觉拍一个 120px用 PS 标尺量出实际距离再填后面调整时才知道从哪儿改。3.4 精品推荐区卡片网格与 hover 交互课程卡片是首页主体七八张卡片一般用网格排列。如果目标只是还原 PSD 固定宽度不用考虑换行的话可以频繁使用float或inline-block但为了后续能自适应我建议直接用 CSS Grid.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .course-card { background: #fff; border-radius: 8px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .course-card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }repeat(4, 1fr)表示每行四列每列平均分配剩余宽度。gap: 20px控制卡片间距这个值同样来自 PSD 里卡片之间的留白。hover 时卡片整体上移 4px加一个柔和的阴影是很常见但容易忽略的细节。设计稿里如果原卡片 hover 效果只是边框变色你按设计稿来即可transform是为了提升交互手感。卡片内部的图文结构注意一点封面图宽度要撑满卡片避免左右留白.course-card img { width: 100%; height: 160px; object-fit: cover; }object-fit: cover让图片按比例缩放并裁剪填满 160px 高度。如果不用这一句设计稿统一高度的封面图切出来尺寸不一样时就会变形或出现缺口。3.5 页脚与字体图标用 font-face 接上图标资源页脚部分一般是三栏信息加备案号布局上还是 flex 或 float 都行。这里重点说的是图标。PSD 里页脚和课程卡片里的小图标数量较多逐个切 PNG 可以但文件数量和请求数都会增加。常见做法是引入字体图标库在 CSS 顶部声明font-face { font-family: iconfont; src: url(../fonts/iconfont.woff2) format(woff2); } .iconfont { font-family: iconfont; font-size: 16px; font-style: normal; }HTML 里使用i classiconfont#xe601;/i#xe601;是字体图标对应的 Unicode 编码具体编号要查你下载的图标库文件。如果你手里的素材没有字体图标文件退一步的方案是把小图标合并成一张精灵图用background-position定位。比如三个按钮箭头在同一张图里.icon-arrow { background: url(../images/icons.png) no-repeat; background-position: -20px 0; width: 12px; height: 12px; }background-position取负值是把精灵图向右移动让目标图标对准元素显示区。具体数值在 PS 里用标尺量从精灵图左边界到目标图标左边界就是 x 偏移从上边界往下量就是 y 偏移。写错一个像素图标就会对准到旁边去这是纯眼见功夫后面避坑章有对应排查步骤。4. 静态页实现避坑五个高频翻车现场与对应修法做静态页最怕的不是不会写而是写完了不知道哪里错、为什么错。以下五条是我在实际还原这份素材时踩过的坑每一条都按“现象 → 原因 → 解决”列清楚。4.1 切出的图片在页面上边缘发虚带白边现象图片放到深色背景上时四周有一圈白色或灰白色的细边看起来像是没抠干净。原因导出时勾选了“透明度杂边”或源素材本身就是带白色背景的 JPG 被硬存成了 PNG。透明杂边会把半透明像素填充成你选的颜色导致透明区域边缘出现硬边框。解决重新导出在“存储为 Web 所用格式”面板里确认“透明度杂边”为无并且源图层必须是透明背景。如果原图底部是白色底色先在 PS 里用魔棒或通道抠掉再导出。检查半透明边缘是否干净最有效的方法是放进一个黑色背景的容器里预览。4.2 float 子元素导致父容器高度塌陷现象子元素全部float: left后父 div 背景颜色只显示一条线下面的元素顶上来叠在一起页面布局完全错乱。原因float 元素脱离文档流父容器计算高度时不会把浮动子元素算进去所以父容器高度变成 0视觉上“塌了”。解决给父容器加清除浮动。最稳的做法是添加 clearfix 工具类.clearfix::after { content: ; display: block; clear: both; }然后把类名加到需要清除浮动的父容器上比如div classnav-left clearfix。clear: both表示在伪元素位置不允许浮动元素残留从而把父容器高度重新撑起来。如果父容器本身有固定高度比如height: 60px也可以直接加overflow: hidden但不推荐在需要溢出显示子元素时使用。4.3 margin-top 没有把元素往下推反而把父元素顶了下去现象在子元素上设置margin-top: 30px子元素没动父元素整体往下移动了 30px页面出现一段多余的空白。原因这是“外边距折叠”父元素没有建立自己的格式上下文时子元素的外边距会传递给父元素。解决三选一给父元素加border-top或padding-top或者给父元素设置overflow: hidden。其中overflow: hidden会触发块级格式上下文把子元素的外边距限制在父元素内部是我最常用的修法副作用是如果子元素有下拉菜单需要溢出显示会被裁掉。另一种更可控的办法是改用padding-top给父元素加内边距完全避开外边距折叠。4.4 精灵图位置不对图标显示成隔壁的图案现象背景图存在但图标显示歪了显示的是旁边另一个图标的一部分或者空白一片。原因background-position两个坐标写错。写url引用的精灵图是全尺寸图元素只显示其中一块区域坐标对应的是“以元素左上角为原点精灵图向左上移动的距离”。写负数和不写符号是最容易错的地方。解决在 PS 里打开精灵图用矩形选框选中目标图标记录图标左上角相对整张图的坐标也就是信息面板里的 X 和 Y 值。CSS 里按负值填入background: url(../images/icons.png) no-repeat; background-position: -60px -30px;如果你是从图标库生成的雪碧图每个图标会有对应的类名和坐标比如.icon-home { background-position: -60px -30px; }直接复制即可。坐标对不上时先描点、再试增量每次只改一个轴不要同时调两个值。4.5 a 标签里包 img图片底部多出几像素空隙现象一个a标签里放了img图片下面总是出现一条 4px 左右的空白怎么调 margin、padding 都去不掉。原因img 是行内替换元素默认按基线对齐而基线比底线高底部就露出了间隙。解决给 img 设置display: block或者给它设置vertical-align: bottom。两者任选其一更推荐前者因为在卡片布局中你通常并不需要图片参与行内排版。.course-card a img { display: block; }这个间隙在白色背景上很难看出来但一旦背景换色就会很刺眼。如果页面里所有图片都放块级容器可以在 reset 阶段直接全局加上img { display: block; }一劳永逸。5. 从固定宽度走向自适应把这套素材改造成响应式页面的几个技巧以上几章的目标是把设计稿 1:1 还原成静态页但在实际项目里页面要跑在从手机到头显的各种屏幕上。拿“学成在线案例”这套素材改造时不需要推倒重写按下面几个点逐步改即可。5.1 断点不是凭空取的先量 PSD 的栏目断裂点我看到很多教程让人直接写 768px、1024px 两个断点实际上一个设计稿的布局什么时候该由一行变两行是由内容本身决定的。用 PS 标尺量一下课程卡片区的宽度四列卡片加三个间隙总宽 1200px单卡宽 280px。那么当视口小于等于 1180px 时四列开始放不下这就是第一个断点。第二个断点可以选在卡片缩到 240px 时此时三列变两列。套上媒体查询media (max-width: 1180px) { .course-grid { grid-template-columns: repeat(3, 1fr); } }这样改的好处是断点有依据而不是拍脑袋。5.2 版心从固定宽度改成 max-width padding.wrapper原来的写法是width: 1200px; margin: 0 auto;在小屏上它会超出视口。改成.wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; }这样在宽屏上仍然是 1200px 居中在窄屏上会收缩并带左右 20px 内边距不会贴边。这个改动一行代码就够适合作为所有“中心布局”统一改造的起点。5.3 卡片网格用 minmax 自动换列前面用的grid-template-columns: repeat(4, 1fr)在 900px 宽时依然强制四列卡片会变得很窄。可以改成.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }minmax(250px, 1fr)的意思是每列至少 250px、至多等分剩余空间auto-fill会在宽度不够时自动换到下一行无需写多个媒体查询。配合 5.1 的断点小屏上卡片会自动掉到两列或一列。5.4 图片不要拉伸容器固定图自适应原来餐卡封面的height: 160px在窄屏下会裁掉很多内容影响观感。把高度也交给自适应.course-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }aspect-ratio: 16 / 9让图片高度随宽度变化保持 16:9 比例object-fit: cover保证不拉伸变形。做完这四步用浏览器 F12 的设备模拟器拖一下宽度检查 360px、768px、1280px 三档是否正常。特别留意 banner 的搜索框有没有在窄屏上溢出视口如果溢出可以把它从position: relative改成width: 90%; margin: 0 auto;。这套素材我在复现时翻了至少三次车第一次是精灵图坐标第二次是 float 塌陷第三次是图片边缘白边。从那以后我每次拿到 PSD都会强制走一遍流程先理图层、定目录、再切图CSS 里默认带 clearfix 和图片块级化导图前检查一次透明通道全部做完才允许自己打开浏览器预览。这套习惯帮我省掉了大量反复预览的无效劳动希望帮到你。本文还有配套的精品资源点击获取