简介这份资源面向网页设计初学者与进阶开发者围绕黑马程序员「学成在线」案例提供从视觉稿到页面实现的完整练习素材可用于临摹布局、理解设计稿还原流程也可作为HTML与CSS综合训练的参考项目。压缩包共11个文件约17.71MB包含4个PSD设计稿首页、课程列表页、课程介绍页、职业规划页、5张PNG切图、1个HTML页面与1个CSS样式文件覆盖设计源文件、图片素材与前端代码三类内容便于对照学习图层组织、切图使用与样式编写。目前已有14060人学习下载说明该案例在同类教程中具有较高的参考价值。通过拆解PSD分层结构可理解页面模块划分与视觉规范结合HTML与CSS代码则能观察结构搭建、色彩搭配、字体与布局调整的具体实现方式适合作为课程配套练习或自主项目复现的素材。1. 从一张 PSD 到一套能跑的前端页面学成在线案例要解决什么拿到“学成在线”这个案例时很多人第一反应是打开 PSD 就开始切图结果切到一半发现栅格对不上、字体层级混乱、模块复用不了最后交上去的页面在 1440 宽屏下错位、在 1280 下又挤成一团。这套素材和代码要解决的恰恰是“设计稿到可交付页面”之间那段最容易翻车的路它给出一份结构清晰的 PSD 源文件配一套按模块拆分的 HTML/CSS 实现让做毕设、课设的人能照着还原也让需要交一份完整前端方案的人有可参考的工程骨架。适合谁正在做静态页面实训、需要交课程设计的学生以及想整理一套“设计稿—切图—布局—验收”标准流程的初级前端。关键词里的 html、css、pink 老师、黑马程序员、学成在线案例指向的就是这套以还原度为核心、以模块化为手段的训练路径。2. 需求拆解与页面结构规划先定栅格再动手切图2.1 从设计稿反推页面分区学成在线这类教育平台首页视觉上花哨结构上其实很规整。我一般先不看细节把 PSD 缩到 20% 看整体色块分布能立刻分出五个横向区块顶部导航条、头部搜索与登录区、轮播与推荐位、课程内容区多列卡片、底部信息区。这个“先分区、后细化”的顺序很关键因为分区决定了后面 HTML 的语义标签怎么选也决定了 CSS 里哪些样式该抽成公共类。具体到标签映射顶部导航用header包一个nav搜索区独立成div classsearch-bar轮播用section classbanner课程列表用section套ul的卡片结构底部用footer。这样写出来的 DOM 树和设计稿的视觉层级是一一对应的后期改某个区块不会牵一发动全身。很多同学上来就一堆div平铺写到第三个模块就分不清谁是谁血泪经验就是分区阶段多花十分钟编码阶段少返工两小时。2.2 栅格与版心宽度的确定设计稿通常按 1920 或 1440 画布出图但真正落地的版心内容区最大宽度要单独定。学成在线案例里我一般把版心定在 1200px居中显示两侧留白自适应。这样在 1280、1440、1920 三种常见屏宽下都不会出现内容贴边或过度拉伸。版心确定后再反推栅格1200 除以 12 列每列约 100px列间距 20px课程卡片按 4 列排布时每张卡宽度就是(1200 - 20*3) / 4 285px。这个计算不是玄学是必须写进方案里的硬参数。下面这段是版心和栅格的基础样式后面所有模块都建立在它之上/* 版心容器所有内容区共用保证横向对齐 */ .container { width: 1200px; margin: 0 auto; /* 水平居中 */ } /* 12 列栅格用 flex 实现列间距 20px */ .row { display: flex; flex-wrap: wrap; margin-left: -10px; /* 抵消首列左间距 */ margin-right: -10px; } .col-3 { width: 25%; padding: 0 10px; /* 单侧 10px合计列间距 20px */ box-sizing: border-box; }这里有个容易忽略的点box-sizing: border-box必须全局设置否则 padding 会把 25% 的宽度撑破四列变三列。参数上版心 1200 是经验值如果设计稿明确按 1440 出图且内容占满就改成 1440列间距 20 也可以按视觉密度调到 16 或 24但一旦定了就要全站统一不能这个模块 20 那个模块 30。2.3 模块清单与优先级排序把页面拆成可独立开发的模块是保证进度可控的前提。学成在线首页我通常拆成七个模块导航栏、搜索登录区、轮播图、精品推荐、课程分类卡、讲师推荐、页脚。每个模块对应一组 HTML 结构加一段独立 CSS开发时按“先骨架后皮肤”的顺序推进——先把七个模块的 DOM 和占位色块搭出来确认整体布局不错位再逐个填样式和图片。优先级上导航和搜索区最先做因为它们涉及固定定位和层级z-index最容易和其他模块打架轮播图第二涉及绝对定位和溢出隐藏课程卡片最后做因为它是重复结构适合用一套类名批量生成。这个排序不是拍脑袋是踩过坑之后的习惯先做定位复杂的后做重复度高的返工成本最低。3. 核心模块的 HTML/CSS 实现导航、轮播与课程卡片3.1 顶部导航的固定定位与层级处理导航栏要做成吸顶效果用position: fixed最直接但随之而来的是两个问题一是下方内容会被导航盖住需要给 body 或主内容区加padding-top二是导航内部的二级菜单如果也用绝对定位z-index 层级要理清。学成在线案例里导航高度通常 60px主内容区顶部留 60px 内边距即可。.header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); z-index: 100; /* 高于内容区低于弹窗 */ } .main { padding-top: 60px; /* 抵消固定导航占位 */ } .nav-item { position: relative; /* 为下拉菜单提供定位参照 */ } .nav-item .sub-menu { position: absolute; top: 60px; left: 0; display: none; z-index: 101; /* 下拉层高于导航本体 */ } .nav-item:hover .sub-menu { display: block; }参数说明z-index 的取值要有梯度导航 100、下拉 101、轮播上的指示点 10、弹窗类 999这样层级关系一目了然。box-shadow用 0.08 透明度是让导航和内容有轻微分离感又不显脏调太深会像加了条黑边。这里翻车的典型是忘了给.main加 padding-top结果页面一打开第一屏内容被导航吃掉一截答辩时被问“你这顶部怎么少一块”就很尴尬。3.2 轮播区的结构设计与溢出控制轮播图不用 JS 也能做出静态切换效果但学成在线案例作为还原训练重点在结构和样式。外层容器设overflow: hidden内层图片列表用 flex 横向排列通过transform: translateX()控制位移。指示点用绝对定位压在图片底部居中。section classbanner div classbanner-track img srcimages/banner-1.jpg alt课程推荐一 img srcimages/banner-2.jpg alt课程推荐二 img srcimages/banner-3.jpg alt课程推荐三 /div ul classbanner-dots li classactive/li li/li li/li /ul /section.banner { position: relative; width: 1200px; height: 400px; margin: 20px auto; overflow: hidden; /* 裁掉轨道溢出的图片 */ border-radius: 8px; } .banner-track { display: flex; width: 300%; /* 三张图每张占 1/3 */ height: 100%; transition: transform 0.4s ease; } .banner-track img { width: 33.333%; height: 100%; object-fit: cover; /* 保证图片不变形 */ } .banner-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .banner-dots li { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); } .banner-dots li.active { background: #fff; }关键参数轨道宽度 300% 对应三张图如果设计稿是四张就改 400%每张图宽度同步改成 25%。object-fit: cover是防止图片比例和容器不一致时被拉伸这个属性在课程卡片里同样要用。指示点的translateX(-50%)配合left: 50%是水平居中的标准写法比算具体像素稳。注意transition加在轨道上而不是图片上否则切换时是单张图动视觉上会错位。3.3 课程卡片的复用结构与悬停交互课程卡片是页面上重复最多的模块一套类名要能撑起十几张卡。结构上分图片区、标题、讲师信息、价格四层外层用li包a或div。悬停时卡片上浮加阴影是这类教育平台的常见交互。ul classcourse-list row li classcol-3 div classcourse-card div classcourse-cover img srcimages/course-1.jpg alt前端入门课程 /div h3 classcourse-titleHTMLCSS 页面布局实战/h3 p classcourse-teacher讲师某开发者/p p classcourse-price199/p /div /li !-- 其余卡片结构相同只换图片和文字 -- /ul.course-card { background: #fff; border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .course-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } .course-cover { width: 100%; height: 160px; overflow: hidden; } .course-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .course-card:hover .course-cover img { transform: scale(1.05); /* 图片轻微放大增强反馈 */ } .course-title { font-size: 16px; line-height: 1.5; margin: 12px 12px 8px; /* 标题最多两行超出省略 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }设计说明卡片悬停上浮 4px 是克制值超过 8px 会显得飘阴影用 0.12 透明度配 20px 模糊比纯黑阴影柔和。标题两行截断用-webkit-line-clamp虽然带前缀但主流浏览器都支持比用 JS 算高度省事。价格和讲师信息的字号要拉开层级标题 16px、辅助信息 13px 左右这个比例来自设计稿的视觉层级不是随便定的。卡片内边距统一 12px保证多张卡并排时文字起始位置对齐。4. 样式组织与资源管理让 CSS 不变成一锅粥4.1 公共样式与模块样式的分层页面模块一多CSS 最容易失控这个模块写了.title那个模块也写.title互相覆盖。我的做法是分三层文件base.css放重置和全局变量common.css放版心、按钮、清除浮动这类公共类index.css只放首页各模块的专属样式。引入顺序不能乱base 在前模块在后利用层叠规则让模块样式能覆盖公共样式。/* base.css重置与全局变量 */ :root { --primary-color: #00a4ff; /* 主色取自设计稿 */ --text-main: #333; --text-sub: #999; --gap: 20px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, sans-serif; color: var(--text-main); background: #f5f7fa; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; }用 CSS 变量存主色和间距是这套方案里最值得抄的一点。设计稿改一版主色只改变量那一行全站跟着变不用全局搜索替换。box-sizing和list-style的重置放在最前面避免后面每个模块重复写。字体栈里把微软雅黑和苹方都列上兼顾不同系统。4.2 图片资源的命名与目录约定PSD 切出来的图如果随手命名成图层1.png、切片2.jpg过两天自己都认不出。我一般按“模块-用途-序号”命名目录按模块分文件夹assets/ ├── images/ │ ├── common/ # logo、图标等全站共用 │ │ ├── logo.png │ │ └── icon-search.svg │ ├── banner/ # 轮播图 │ │ ├── banner-01.jpg │ │ └── banner-02.jpg │ └── course/ # 课程封面 │ ├── course-01.jpg │ └── course-02.jpg ├── css/ │ ├── base.css │ ├── common.css │ └── index.css └── index.html这个约定的价值在协作和交付时体现别人拿到你的压缩包不用问就知道图在哪、样式分几层。图片格式上照片类用 jpg 并控制质量在 80% 左右图标和 logo 用 svg 或 png轮播大图宽度按版心 1200 出高度按设计稿比例裁避免运行时再缩放导致模糊。4.3 清除浮动与盒模型的两个硬约束虽然 flex 已经能解决大部分布局但学成在线案例里仍有部分老式浮动布局需要处理清除浮动不能忘。同时盒模型必须全局 border-box这两个是硬约束违反了后面全是连锁问题。/* 清除浮动给浮动元素的父级加 clearfix */ .clearfix::after { content: ; display: block; clear: both; height: 0; visibility: hidden; }说明clearfix用伪元素而不是额外加空 div是为了不污染 HTML 结构。height: 0和visibility: hidden保证伪元素不占位。如果项目全程用 flex这段可以省但只要有浮动就必须有它。盒模型那条前面提过这里再强调一次任何设置了宽度又加了 padding 的元素没有 border-box 就会撑破容器这是静态页面错位的第一大来源。5. 避坑与排查还原度上不去的五个常见原因5.1 页面整体偏移几个像素现象页面内容和设计稿对比整体往右或往下偏了几像素怎么调都对不齐。原因通常是 body 默认 margin 没清或者某个容器多了一层 padding 叠加。解决确认 base.css 里* { margin: 0; padding: 0; }生效然后用浏览器开发者工具逐层检查容器的盒模型看是哪一层的 margin 或 padding 在累加。我一般会在版心容器上临时加outline: 1px solid red一眼看出边界在哪。5.2 图片在卡片里被拉伸变形现象课程封面图有的正常有的被压扁。原因图片原始比例和容器比例不一致又没设object-fit。解决给图片容器固定宽高图片本身设width: 100%; height: 100%; object-fit: cover;。如果设计稿要求完整显示不裁剪就改用object-fit: contain并接受留白。这个属性在轮播和卡片里都要统一加别漏。5.3 悬停效果闪烁或错位现象鼠标移到卡片上上浮动画还没结束就跳回去了。原因transform加在了会改变布局的元素上或者 hover 区域和动画元素不是同一个。解决把transition和transform都加在卡片本体上hover 选择器也指向本体不要指向内部图片。图片的放大动画单独加在 img 上两者互不干扰。另外transition的属性列表要写全只写all有时会把不需要的属性也带上产生意外动画。5.4 固定导航遮挡锚点内容现象点击页内锚点跳转后目标标题被顶部导航盖住。原因固定定位的导航脱离了文档流锚点滚动到视口顶部时正好被盖。解决给锚点目标元素加scroll-margin-top: 60px;值等于导航高度。这个属性比用 JS 算偏移量干净得多现代浏览器都支持。如果项目要兼容很老的浏览器才退回用 padding 补偿的方案。5.5 字体和行高导致文字溢出容器现象标题文字超出卡片边界或者按钮文字垂直不居中。原因行高设成了固定像素字号一变就溢出或者按钮用了 line-height 等于高度但字体基线不同。解决正文行高用倍数1.5 到 1.8标题用 1.4 左右按钮垂直居中优先用 flex 的align-items: center别依赖 line-height 硬撑。文字溢出容器时先查white-space和overflow的组合再看是不是宽度被 padding 挤没了。6. 验收与答辩用一份检查清单把还原度说清楚验收这套页面不能只说“我觉得挺像的”要拿得出可核对的项。我一般准备一张对照表左边是设计稿的关键参数右边是实现值逐项打勾。答辩时把这张表往那一放比空口讲“我做了首页”有说服力得多。检查项设计稿基准实现要求核对方式版心宽度1200px内容区居中两侧自适应开发者工具量容器宽度导航高度60px固定吸顶不遮挡内容滚动页面看是否盖住首屏课程卡片列数4 列1200 宽下每行 4 张缩放窗口看是否换行错乱图片比例按封面裁切不变形、不拉伸目测加 object-fit 检查主色值设计稿取色全站统一变量管理搜索颜色值是否散落悬停反馈上浮加阴影动画流畅无闪烁鼠标反复移入移出答辩时被问得最多的三个问题提前准备好答案为什么版心定 1200 而不是 1440——因为要兼顾 1280 屏宽不出现横向滚动为什么用 flex 还用清除浮动——因为部分老结构沿用浮动清除浮动是兜底CSS 怎么组织——三层文件加变量改主色只动一处。回答时把“我为什么这么选”讲出来比背属性定义得分高。还有一个具体技巧答辩演示前把浏览器缩放到 80%让整个首屏能一屏展示然后从导航开始自上而下滚动一遍边滚边指出每个模块的结构和交互。这个动线是评委看页面的自然顺序跟着它讲不会乱。滚动时留意有没有图片没加载出来的占位提前在本地起个静态服务确认资源路径全对别在演示时出现裂图。从那以后我每次交静态页面方案都强制自己先跑一遍这张对照表再按演示动线走一遍确认没有临时拼凑的样式和失效的图片路径才敢提交。希望这套结构和清单能帮到你把 PSD 稳稳当当地变成一份能交付、能讲清楚的页面方案。本文还有配套的精品资源点击获取