简介这份资源面向网页设计初学者与进阶开发者围绕黑马程序员「学成在线」案例提供从视觉稿到页面实现的完整练习素材可用于对照学习HTML结构搭建与CSS样式还原尤其适合想打通设计与前端编码衔接环节的学习者。压缩包共11个文件、约17.71MB包含4个PSD设计稿、5张PNG切图、1个HTML页面与1个CSS样式表PSD覆盖首页、课程列表页、课程介绍页与职业规划等页面便于逐层拆解布局与配色思路HTML与CSS则对应呈现结构与样式规则。目前已有14060人学习下载说明该案例在同类教程中认可度较高。通过比对设计稿与代码读者可以理解色彩搭配、字体选择与版式调整如何落地并借助分层PSD与切图素材反复练习页面复现逐步掌握响应式布局与界面细节处理的方法。1. 学成在线静态页拆解一份能直接跑通的 HTMLCSS 教学案例打开压缩包第一眼看到的是index.html和一堆按模块切好的 PSD 源文件而不是那种“只有一张设计图、代码全靠自己猜”的素材包。这个项目的定位很明确它是一套在线教育平台首页的静态页面复刻案例用纯 HTML CSS 把导航、轮播、课程卡片、讲师推荐、页脚这些典型区块一层层搭出来配套 PSD 让你能对着设计稿量尺寸、取色值、切图标。适合谁刚学完盒模型和浮动、想找一个完整页面练手的人也适合带课的老师拿它当课堂案例因为结构干净、命名规整、没有框架干扰。关键词里的 html、css、pink 老师、黑马程序员、学成在线案例说的就是这类“跟着视频敲一遍、再自己改一遍”的练手项目。它不解决业务问题但能让你第一次完整经历“设计稿 → 结构拆分 → 样式还原”的链路这个链路走顺了后面上框架才不会虚。2. 项目结构与技术选型为什么它坚持不用框架2.1 目录长什么样每个文件夹负责什么拿到源码先别急着打开浏览器先把目录扫一遍心里有个地图。这类教学案例的目录通常长这样我按实际拆包时最常见的组织方式还原学成在线/ ├── index.html # 首页主结构 ├── css/ │ ├── base.css # 重置样式、公共变量、清除浮动 │ ├── index.css # 首页各模块样式 │ └── common.css # 头部、底部等复用区块 ├── images/ # 切图产物logo、图标、banner ├── upload/ # 课程封面、讲师头像等位图 ├── psd/ # 设计源文件按模块分 PSD │ ├── 首页.psd │ ├── 课程模块.psd │ └── 讲师模块.psd └── fonts/ # 图标字体如果有base.css是地基负责把浏览器默认的 margin、padding 清掉统一box-sizing定义好清除浮动的工具类common.css放头部导航和页脚这种每个页面都有的部分index.css才是首页独有的样式。这种拆法的好处是改一个模块不用在几千行里翻找坏处是新手容易漏引某个 css 文件导致样式“莫名其妙不生效”——后面避坑章节会专门说这个。psd/目录是这份资源区别于普通代码包的地方它让你能回到设计源头而不是对着截图瞎猜间距。2.2 技术选型纯静态三件套刻意不引入构建工具这个项目只用 HTML5 CSS3没有 Vue、没有 React、没有 Sass 编译也没有 webpack。这不是技术落后而是教学场景下的刻意选择。你想想如果一上来就npm install新手连“为什么样式没生效”都还没搞明白就被构建报错劝退了。纯静态的好处是双击index.html就能看效果改一行 CSS 刷新就能验证反馈链路最短。布局上它用的是经典的浮动 定位方案而不是 Flex 或 Grid。原因同样现实这套案例对应的是 CSS 基础阶段浮动布局是绕不过去的基本功清除浮动、BFC、外边距塌陷这些“玄学”问题只有在浮动布局里才会真实遇到。等你把这份代码敲完再去看 Flex会发现很多当年踩的坑直接被规范掉了理解反而更深。提示如果你已经熟悉 Flex完全可以拿这份项目做“改造练习”——把浮动布局逐个替换成 Flex对比两种写法的差异这比单纯抄一遍收获大得多。2.3 页面模块的拆分逻辑首页从上到下可以拆成五个大块头部导航logo 导航链接 搜索框 登录注册、轮播区banner 图 左右箭头 小圆点、精品课程推荐标题 课程卡片网格、讲师推荐讲师头像 简介、页脚友情链接 版权信息。每个大块在 HTML 里对应一个语义化标签比如header、section、footer内部再用div细分。拆分的核心原则是“一个模块一个容器”容器负责定宽居中内部元素负责排列。比如课程卡片区外层.course-list定宽并清除浮动里面每个.course-item左浮动、设好宽度和间距。这样改卡片数量时只动 HTML不用碰布局代码。我一般会建议在动手写 CSS 之前先在纸上把每个模块的盒子画出来标上宽高和间距再开始敲——这个习惯能省掉大量“写完发现对不上设计稿”的返工。3. 核心模块代码逐段拆从导航到课程卡片3.1 公共重置与清除浮动base.css 里的地基先看base.css这是所有样式生效的前提。下面这段是我从这类项目里提炼的典型写法保留了关键部分/* 清除默认内外边距统一盒模型 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 去掉列表默认小圆点 */ ul, ol { list-style: none; } /* 去掉链接下划线颜色继承父级 */ a { text-decoration: none; color: #333; } /* 清除浮动工具类给父容器加 clearfix */ .clearfix::after { content: ; display: block; clear: both; height: 0; visibility: hidden; } /* 版心定宽居中全站复用 */ .w { width: 1200px; margin: 0 auto; }逐段说。box-sizing: border-box让 padding 和 border 算进宽度里这样你给卡片设width: 280px再加内边距总宽还是 280不会撑破布局——这是新手最容易翻车的地方之一不加这一行后面所有宽度计算都得重来。.clearfix用伪元素清除浮动父容器加了它内部浮动的子元素才能把父容器“撑开”否则父容器高度为 0下面的模块会叠上来。.w是版心类1200px 是这类 PC 端页面的常见定宽margin: 0 auto实现水平居中全站每个模块的外层容器都套这个类保证左右对齐一致。注意*选择器重置所有元素在大型项目里会有性能顾虑但教学案例页面规模小这样写最直观。真实项目里更常见的是用 normalize.css 或按需重置。3.2 头部导航flex 之前的经典浮动布局头部导航是练浮动的好素材。结构上左边 logo、中间导航链接、右边搜索和登录典型的三段式。代码大致如下header classheader w clearfix div classlogo fl a href#img srcimages/logo.png alt学成在线/a /div nav classnav fl ul classclearfix lia href#首页/a/li lia href#课程/a/li lia href#职业规划/a/li /ul /nav div classsearch fr input typetext placeholder输入关键词 button搜索/button /div /header.header { height: 80px; line-height: 80px; /* 单行文字垂直居中 */ } .fl { float: left; } .fr { float: right; } .nav li { float: left; margin: 0 20px; } .nav li a { display: block; height: 80px; padding: 0 10px; } .nav li a:hover { border-bottom: 2px solid #00a4ff; /* 悬停底部高亮 */ }逻辑说明.fl和.fr是两个工具类分别左浮动和右浮动把 logo、导航、搜索框排成一行。line-height: 80px等于容器高度让单行文字垂直居中这是 PC 端导航最省事的做法。导航项li左浮动a设成display: block并撑满高度这样鼠标悬停的点击区域是整个导航块而不是只有文字那一小条——体验细节但很多新手会漏。悬停用border-bottom做高亮注意这会让元素高度多出 2px如果导航项本身有背景色可能出现轻微跳动稳妥做法是预留padding-bottom或用box-shadow模拟下划线。参数上margin: 0 20px控制导航项间距padding: 0 10px控制文字与点击区边缘的距离这两个值对着 PSD 量出来改就行。搜索框部分用float: right靠右内部input和button并排注意给input设outline: none去掉聚焦时的默认蓝框再用border自定义边框否则浏览器默认样式会破坏设计稿的观感。3.3 课程卡片网格浮动布局里最容易错位的部分课程推荐区是整页最考验布局功底的地方。设计稿通常是一行四张卡片卡片之间有固定间距。用浮动实现的关键是宽度和间距的精确计算.course-list { /* 父容器已加 clearfix */ } .course-item { float: left; width: 280px; height: 320px; margin-right: 26px; /* 卡片间距 */ background: #fff; transition: box-shadow 0.3s; } /* 每行最后一个去掉右边距避免换行 */ .course-item:nth-child(4n) { margin-right: 0; } .course-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .course-item img { width: 100%; height: 160px; object-fit: cover; /* 封面图裁切不变形 */ }算一下版心 1200px四张卡片间距 26px那么4 × 280 3 × 26 1120 78 1198差 2px 是留给浮动的容错实际项目里要么把卡片宽度调到 281要么把间距调到 25保证总和不超过 1200。这个计算必须提前做否则第四张卡片会被挤到下一行出现“三张一行、一张孤零零”的错位——这是浮动布局最经典的血泪经验。nth-child(4n)去掉每行最后一个的右边距是防止间距累积导致换行。object-fit: cover让课程封面图按比例裁切填满容器不会因为原图比例不一致而拉伸变形。悬停加阴影用transition做过渡成本低但观感提升明显。卡片内部再分上下两块上半图片下半标题、讲师、价格用padding和line-height控制文字节奏价格用醒目的颜色和字号突出。3.4 轮播区与定位absolute 配合 relative 的父子关系轮播区是定位练习的典型场景。外层容器position: relative左右箭头和小圆点position: absolute相对它定位.banner { position: relative; height: 420px; overflow: hidden; } .banner img { width: 100%; height: 100%; object-fit: cover; } .banner .arrow-l, .banner .arrow-r { position: absolute; top: 50%; margin-top: -30px; /* 自身高度一半实现垂直居中 */ width: 40px; height: 60px; background: rgba(0, 0, 0, 0.3); color: #fff; text-align: center; line-height: 60px; cursor: pointer; } .arrow-l { left: 0; } .arrow-r { right: 0; } .banner .dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); /* 水平居中 */ }关键点有两个。一是箭头的垂直居中top: 50%把元素顶部推到容器中线再用负的margin-top等于自身高度一半往上拉这是绝对定位元素垂直居中的经典手法小圆点则用left: 50%加translateX(-50%)水平居中两种手法都值得记住。二是overflow: hidden裁掉超出容器的部分防止图片或箭头溢出破坏布局。提示这份案例的轮播通常只有静态结构和样式没有 JS 自动切换逻辑。想加交互可以在index.js里用setInterval切换图片的src或transform这是很好的练手延伸。4. 跑起来与还原度校验本地打开到逐像素对稿4.1 三步把页面跑起来这个项目不需要任何环境步骤简单到可以背下来解压压缩包到任意英文路径目录路径带中文有时会导致图片加载异常虽然现代浏览器大多支持但养成英文路径习惯没坏处。双击index.html默认浏览器打开即可看到页面。按F12打开开发者工具切到 Console 面板确认没有红色报错切到 Network 面板刷新看图片和 css 是否全部 200 加载成功。如果页面样式全乱、只有裸 HTML九成是 css 路径写错或文件没放对位置。检查index.html里link relstylesheet hrefcss/index.css的相对路径确认css文件夹和index.html同级。图片不显示同理看src路径和images/目录是否对得上。这一步排查完页面应该和设计稿大体一致了。4.2 对着 PSD 校验尺寸和色值还原度怎么保证靠 PSD。用任意支持 PSD 的工具打开psd/首页.psd用吸管取色、用标尺量间距然后回到代码里核对。我一般按这个顺序对先对版心宽度和模块高度再对模块之间的垂直间距最后对字号、行高、颜色。颜色值建议统一提到base.css顶部用 CSS 变量管理:root { --main-color: #00a4ff; /* 主色从 PSD 吸取 */ --text-color: #333; --gray-color: #999; --bg-gray: #f3f5f7; }这样改主题色只动一处不用全文件搜索替换。字号方面PC 端正文常见 14px标题 1824px行高一般是字号的 1.5 倍左右具体以 PSD 标注为准。对稿时别追求一次到位先把大块位置摆对再抠细节否则容易在某个 2px 的间距上耗半天。4.3 用开发者工具做“像素级”微调浏览器开发者工具是这个项目最好的调试伙伴。选中某个元素右侧 Styles 面板能实时改数值改到满意再把值抄回代码。想量两个元素之间的距离用 Elements 面板选中元素鼠标悬停时页面会高亮盒模型配合标尺能看出 margin 和 padding 的实际占位。遇到“明明设了宽度却对不上”的情况先看盒模型图里 content、padding、border 各占多少八成是box-sizing没生效或某个 padding 忘了算。还有一个实用技巧在 Console 里执行document.querySelectorAll(.course-item).length快速确认卡片数量是否符合预期用getComputedStyle查某个元素最终生效的样式排查“样式被覆盖”的问题特别快。5. 避坑与常见问题那些年静态页踩过的坑5.1 样式不生效先查引入顺序和选择器权重现象改了index.css里的样式刷新页面毫无变化。原因三种可能——link路径写错导致文件根本没加载base.css在index.css之后引入重置样式把自定义样式覆盖了选择器权重不够被更具体的选择器压住。解决Network 面板确认 css 文件 200 加载引入顺序固定为base.css → common.css → index.css后引入的优先级更高用开发者工具看 Styles 面板里被划掉的样式就知道是谁覆盖了谁必要时提高选择器 specificity但别滥用!important。5.2 浮动导致父容器高度塌陷现象课程卡片区下面的模块叠到了卡片上面或者页脚跑到了页面中间。原因子元素全部浮动后脱离文档流父容器没有内容撑开高度变成 0。解决给父容器加clearfix类前面base.css里定义过或者给父容器设overflow: hidden触发 BFC。前者更可控后者在需要溢出显示的场景比如下拉菜单会出问题所以优先用 clearfix。5.3 图片路径大小写与中文名翻车现象本地 Windows 上图片正常换台机器或部署到服务器后图片全裂。原因Windows 文件系统不区分大小写Logo.png写成logo.png也能找到Linux 服务器区分大小写直接 404。中文文件名在某些服务器编码下也会出问题。解决所有文件名统一小写、用英文和短横线比如course-cover-01.jpgHTML 里的src严格对应实际文件名。这个习惯越早养成越好能省掉大量部署时的排查时间。5.4 盒模型算错导致一行放不下四张卡片现象设计稿一行四张卡片实际渲染成三张一行。原因卡片宽度加间距的总和超过版心宽度或者box-sizing没设成border-boxpadding 和 border 额外撑宽了元素。解决先确认* { box-sizing: border-box; }生效再按卡片宽 × 数量 间距 × (数量 - 1) ≤ 版心宽重新算一遍留 12px 余量最后检查是否有隐藏的 margin 或 border 没算进去。5.5 行内元素设宽高无效现象给a或span设了width、height完全没反应。原因行内元素inline不接受宽高设置这是 CSS 规范决定的。解决改成display: block或display: inline-block。导航链接、按钮这类需要点击区域的元素通常设成block并撑满父容器高度点击体验更好。6. 二次开发把教学案例改成自己的作品集页面这份代码最大的价值不是“还原得多像”而是它给了你一个干净的起点去改。我一般会从三个方向动手每个方向都能练到不同的东西。方向一换皮做个人作品集。保留整体骨架把课程卡片换成项目卡片字段从“课程名 / 讲师 / 价格”改成“项目名 / 技术栈 / 链接”。改的时候注意 HTML 结构和 CSS 类名同步调整别只改文字不改类名否则样式会错位。配色用前面定义的 CSS 变量统一换十分钟就能出一版新视觉。方向二浮动改 Flex对比两种布局。挑课程卡片区下手把.course-item的float: left和margin-right换成父容器的display: flex; gap: 26px; flex-wrap: wrap;删掉nth-child(4n)的边距处理。改完你会发现代码少了一截也不用再担心清除浮动。这个对比做完你对“为什么现代布局推荐 Flex”会有体感而不是背结论。方向三加交互从静态走向动态。轮播加自动切换和手动点击课程卡片加悬停详情浮层导航加吸顶效果。以吸顶为例用几行 JS 监听滚动// 导航吸顶滚动超过头部高度时固定 const header document.querySelector(.header); const headerTop header.offsetTop; window.addEventListener(scroll, () { if (window.scrollY headerTop) { header.classList.add(fixed); } else { header.classList.remove(fixed); } });.header.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }逻辑很直白记录导航初始距顶部的距离滚动超过它就加fixed类position: fixed让导航脱离文档流固定在顶部z-index保证它盖在其他内容之上。注意吸顶后导航脱离文档流下面的内容会往上跳稳妥做法是给占位元素补一个等高的padding-top或者用position: sticky替代——后者一行 CSS 就能实现兼容性现在也够用了值得作为改造练习对比一下。验证改造是否成功别只看“看起来对”。我的习惯是每次改完都走一遍刷新看 Console 有无报错、Network 有无 404、缩放浏览器窗口看布局是否错乱、用开发者工具切到移动端视图看有没有横向滚动条。这套检查流程走顺了交付出去的页面才敢说“能跑”。从那以后我每次拿到这类静态案例都强制自己先跑通、再对稿、最后至少改一个模块而不是敲完就扔——因为真正记住的从来不是抄过的那一遍而是改出问题又修好的那几次。希望帮到你。本文还有配套的精品资源点击获取
