简介这是一套源自黑马程序员“学成在线”课程案例的网页设计练习包定位为前端入门与视觉还原训练的实战素材适合刚接触HTML和CSS的初学者也适合希望提升页面精细还原能力的设计师或开发者。压缩包共11个文件整体约17.71MB包括4个PSD设计稿、5张png切图素材以及配套的HTML与CSS代码。PSD文件覆盖首页、课程介绍页、职业规划页等典型版式可逐层拆解设计思路png素材对应页面中的图标、Logo和Banner元素HTML与CSS则清晰呈现了从设计稿到静态页面的实现过程。目前已有14059人学习下载具有较好的入门参考价值。通过对照设计文件和代码读者能学会如何组织图层、切图命名、设定颜色与字体、调整间距与布局理解前端开发中视觉还原的完整链路从而在自己的练习中更高效地完成页面制作。1. 为什么拿“学成在线”当第一个完整页面一次把PSD变成网页的完整训练很多同学学完 HTML 标签和 CSS 属性之后打开编辑器反而不知道第一行该写什么。语法都会但一碰到整页设计稿就卡住这是从「知识点」过渡到「完整项目」之间最常见的一道坎。这套「学成在线 PSD 素材及代码」解决的正是这个问题它给的不是零散的小练习而是一份完整的教学级设计稿连同页面结构、版心布局、浮动定位、雪碧图、清除浮动这些实战写法一起带你把一个真实的首页从 PSD 还原成静态网页。适合正在做课程设计或毕业设计、需要一个整站案例练手的学生也适合刚入行、想在作品集里放一个完整静态页面的新人。它的价值不在于「代码能跑」而在于「照着设计稿把页面还原出来」的完整流程——这一步走通后面学框架、写组件都会顺很多。2. 拿到 PSD 后先别写代码设计稿分析、切图与 CSS 选型2.1 先读设计稿再动编辑器从 PSD 里提取尺寸、颜色与字体拿到「学成在线」的 PSD 素材第一步不是打开代码编辑器而是先花二十分钟把设计稿读明白。我一般会先在 Photoshop 里打开图层面板看看整个画布的尺寸——这类教学案例的设计稿通常做的是 1600px 左右的宽画布而页面的主要内容区域会被约束在一个固定宽度的「版心」里。以这套素材常见的参数为例版心宽度是 1200px居中显示导航栏高度约 42px 到 60px 之间banner 区域通常是整宽背景、内部内容对齐版心课程卡片列表则是四列网格。这些尺寸不靠肉眼猜而是用 PSD 里的标尺工具和信息面板量出来。量完尺寸还要取色主色、辅色、文字色、边框色分别记录成一份色板写 CSS 的时候直接引用变量或注释里的色值避免写到一半反复切回去吸色。字体方面注意设计稿里中文字体与数字字体的区分正文一般用系统默认字体栈标题可能单独指定字号和字重。把这一页信息整理成下面这种参数表后面写代码会清晰很多项目参数值用途版心宽度1200px所有主要模块的水平基准导航高度42pxheader 区域主高度课程卡片宽度228px网格布局中的卡片基准课程卡片间距30px四列布局的间隙计算主色以 PSD 吸色结果为准按钮、导航 hover、链接强调2.2 布局选型为什么这个案例最适合用浮动加清除浮动「学成在线」这种教学案例在布局选型上有一个比较固定的答案内容区域用float浮动布局配合clearfix清除浮动。很多初学者会问现在都用 flex 了为什么还要用浮动这个问题的答案恰恰是这套素材的核心训练目标。用 flex 布局子元素会自动排成一行间距浏览器帮你算而用浮动你必须自己面对盒子的宽高、margin 的叠加、父容器的高度塌陷。这些看起来是麻烦实际上是在帮你建立盒子模型和标准流、浮动流的直觉。如果你做的是自己的课设项目用 flex 完全没问题但如果是拿这套素材来练基本功或者做答辩演示我建议至少主体结构用浮动来实现。原因很实际答辩时老师问「为什么这个卡片会换行」「为什么父元素高度没了」你能讲清楚原理比回答「flex 自带这个效果」要有说服力得多。我的习惯是导航栏和课程列表这类需要「横向排列」的结构用浮动整体页面骨架用标准流从上往下排竖直方向上的内容堆积不涉及浮动问题。2.3 文件结构与命名规范一个页面也要按项目来组织很多同学写第一个完整页面时把所有代码堆在一个index.html里样式全写在style标签中。这套素材配套的代码一般会给出一个更规范的目录结构建议直接照搬并理解它的用意project/ ├── index.html ├── css/ │ └── index.css └── images/ ├── logo.png ├── banner.png ├── icon-xxx.png └── course-cover-xx.jpgHTML 和 CSS 分文件是必须的这关系到后面维护和答辩讲结构。命名上遵循「语义化 模块化」外层盒子用.header、.banner、.course-list、.footer内部的重复元素用.course-item、.nav-item这类名字。图片命名也尽量带前缀icon-开头放小图标course-开头放课程封面这样在 CSS 里写路径时不容易搞混。不要用.div1、.box2这种名字等你写到第三个模块就会后悔。2.4 切图操作哪些图要切、怎么导出不模糊PSD 里的图层不会自己变成网页能用的图片切图这一步很关键。需要切的一般有三类一是 logo 和功能图标这类是 PNG 格式背景透明二是 banner 大图通常是 JPG 格式因为它是照片或渐变色块不用透明通道三是课程封面的缩略小图按设计稿里显示的大小切出来即可。我的做法是先在 PSD 里把图层转为智能对象再用「导出为」功能按 2 倍尺寸导出这样在 Retina 屏幕上不会发虚。切完图放进images目录后回到 PS 里双击原图层确认尺寸再写进 CSS 的width和height。这里补充一个常见坑部分素材包里的 PSD 是分层的但设计稿里有「隐藏图层」或「参考线图层」。切图前先关掉参考线图层只看实际展示的内容层否则导出时会带出一条横线或边框。检查方式是切完图后在文件夹里预览一遍凡是看到多余元素的就重新导出。3. 总体架构设计header、banner、课程列表与 footer 的模块化实现3.1 页面层级规划先画盒子再写标签在写第一行代码之前先把整个页面画成盒子嵌套图。「学成在线」首页的结构从外到内大致是这样最外层是一个整宽的背景容器里面放版心div版心里再按模块拆分。header、banner、课程列表、footer 这四块是横向区块区块内部再用浮动去排列子元素。这个层级用文字描述就是body .header .wrapper .logo .nav .login课程列表是body .course-list .wrapper ul li。HTML 骨架建议先搭出来不急着写样式。先把空标签放到页面里命名好 class然后写一点临时的边框样式确认每个盒子的边界范围与自己预想一致。这个动作叫「画盒子」能过滤掉大约一半的布局错位问题。body !-- 头部区域 -- div classheader div classwrapper div classlogo h1a href#学成在线/a/h1 /div ul classnav lia href#首页/a/li lia href#课程/a/li lia href#职业规划/a/li /ul div classlogin a href#登录/a /div /div /div !-- 课程列表区域 -- div classcourse-list div classwrapper h2 classtitle热门课程/h2 ul classcourse-items li classcourse-item a href# img srcimages/course-01.jpg alt前端开发课程 span classcourse-name前端开发入门与实战/span /a /li !-- 更多课程项按同样结构重复 -- /ul /div /div /body这段结构里有一个值得注意的设计logo 用h1 a而不是裸的img是因为从语义化角度看页面主要的标识应该是最重要的标题同时给h1里的链接设置背景图或直接放图片后续做 SEO 和屏幕阅读器适配都更友好。课程列表用ul li而不是重复写div是因为「一组相同结构的条目」在语义上就是列表浮动布局时也更容易统一处理间距。3.2 header 模块版心、logo、导航与登录区的实现header 是整页里最典型的一段结构它演示了「同一行里三个不同宽度的盒子怎么用浮动摆平」。版心.wrapper宽度 1200px里面的 logo 向左浮动导航栏向左浮动登录区向右浮动。导航项之间用margin-right拉开距离登录区用float: right推到右边。.wrapper { width: 1200px; margin: 0 auto; } .header { height: 42px; background: #fff; border-bottom: 1px solid #eee; } .logo { float: left; width: 200px; height: 42px; } .logo a { display: block; width: 100%; height: 100%; background: url(../images/logo.png) no-repeat center/contain; text-indent: -9999px; /* 隐藏文字但保留给搜索引擎 */ } .nav { float: left; margin-left: 40px; } .nav li { float: left; line-height: 42px; margin-right: 24px; } .nav li a { padding: 0 8px; color: #333; } .nav li a:hover { color: #f60; border-bottom: 2px solid #f60; }这段 CSS 里最容易被忽略的是text-indent: -9999px。logo 的文字「学成在线」仍然在 HTML 里只是用缩进把它推出可视区域再用背景图显示 logo。这是一个非常经典的处理方式答辩时被问到「图片和文字如何兼顾」这就是答案。导航 hover 用border-bottom做下划线效果而不是给a加背景色原因是下划线不改变导航项宽度不会导致 hover 时文字突然跳动。3.3 课程卡片列表ul li 网格与间距的计算逻辑课程列表是整页里最容易出问题的地方因为它同时涉及浮动的排列、间距的计算和图片的尺寸。设计稿里四列卡片的宽度和间距需要用心算一遍不能靠感觉。以一个常见参数为例版心宽 1200px四列卡片每列预留 3 个间隙假设卡片宽 270px、间隔 30px总宽度是 270 × 4 30 × 3 1170px剩余 30px 可以平均分配在两侧或者作为列表的左边距。这样算出来的布局才是精确的。.course-item { float: left; width: 270px; margin: 0 15px 20px; list-style: none; } .course-item img { display: block; width: 270px; height: 150px; border-radius: 6px; } .course-name { display: block; margin-top: 10px; font-size: 14px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }这里有两个细节值得展开。第一是margin: 0 15px 20px这种写法的妙处左右各 15px四个卡片加起来的左右间隔就是 30px正好符合设计稿的间距而且第一个和最后一个卡片也会自动和边界留出 15px不会顶到容器边缘。第二是white-space: nowrap; overflow: hidden; text-overflow: ellipsis;三件套课程名超出一行时自动显示省略号避免文字把卡片撑出不同的高度。卡片用ul包裹后还要注意ul的默认样式——它有默认的padding-left和list-style必须清零。做完这一步记得在ul的父容器上加清除浮动的类名否则父容器高度会变成 0后面的 footer 会直接贴上来。3.4 footer 模块版权信息与多栏结构的收尾footer 模块通常视觉上比较简单但实现时有一个容易忽略的问题它内部的栏目也是多列布局而且底部边框、背景色要与上方模块区分清楚。这里延续浮动布局的思路用同一套模式收尾即可。div classfooter div classwrapper div classfooter-links dl dt关于我们/dt dda href#公司介绍/a/dd dda href#加入我们/a/dd /dl !-- 更多 dl 栏目 -- /div div classcopyright p© 学成在线 版权所有/p /div /div /divfooter 的内容结构用dl dt dd而不是ul li原因是这里是一个「标题 若干条目」的语义结构dl在语义上更贴近。CSS 方面footer设置为深色背景内部链接颜色调浅栏目之间用float: left并排最后一个栏目或版权区用clear: both确保不会受到前面浮动的影响。到这里整个页面的四大模块已经搭完接下来需要处理的是实现过程中最容易翻车的一些细节。4. 关键实现细节与常见问题排查4.1 高度塌陷父容器为什么变成了 0 高度现象课程列表的父容器ul或最外层.course-list高度变成 0背景色消失footer 直接顶到卡片下面。原因子元素全部浮动后脱离了标准流父容器里没有可参与计算高度的子元素于是高度塌陷为零。解决在父容器上追加一个清除浮动的类名经典写法是 clearfix.clearfix::after { content: ; display: table; clear: both; }给.course-list、.header这类包含浮动子元素的容器都加上clearfix类。这不是玄学而是浮动布局的配套动作凡是用了float的容器基本都要考虑父元素清除浮动。4.2 导航换行或对不齐宽度超出版心现象导航栏的 li 元素在某个宽度下突然折行或者最后一个导航项和登录区挤在一起。原因导航项总宽度加 margin 超出了版心剩余宽度比如 logo 占 200px、margin-left 40px导航项每个 80px三个就是 240px再加上登录区 100px总宽接近 580px本不该超——但如果某个 li 里的 a 设置了左右 padding实际占宽就会超出预估。解决用浏览器开发者工具检查每个 li 的实际宽度把所有padding、margin加进去重新算总和。记住一个原则浮动布局里横向空间永远是「加法」关系任何一个盒子的实际宽度都必须精确计算。4.3 背景图不显示或位置跑偏现象logo 背景图不出图或者 banner 的背景图出现在错误位置。原因大概率是路径错误或者是背景定位写错。CSS 文件在css文件夹里引用images下的图片要写../images/xxx.png这是相对路径的经典错误。另一个常见问题是背景图做雪碧图定位时background-position的数值算错了方向。解决先用开发者工具的网络面板看图片请求是否 404如果 404先检查路径再检查文件名大小写。雪碧图定位建议使用负数坐标并且先切一个 1×1 的测试图验证坐标方向再套用真实图标。4.4 切出来的图模糊或尺寸不符现象页面上的图片看起来比设计稿模糊尤其是 logo 和小图标。原因切图时直接按设计稿里的 1 倍尺寸导出在高分屏下被浏览器拉伸到 2 倍自然发虚。解决切图时按 2 倍尺寸导出然后在 CSS 里把图片显示尺寸设置为设计稿的一半。比如设计稿里 logo 宽 100px导出 200px 宽的图CSS 里写width: 100px。这样在小屏上也足够清晰。如果素材包里已经切好了图直接看图片实际尺寸和 CSS 设定尺寸的倍数关系通常能发现问题。4.5 版心不一致部分模块左右漂移现象header 里的内容和课程列表的左边距不对齐肉眼能看出页面「歪了」。原因某个模块的.wrapper写错了宽度或者写成了width: 100%再或者多加了一个padding导致实际内容宽度超出 1200px。解决检查每个模块的 wrapper 是否统一为width: 1200px; margin: 0 auto;另外确认没有给 wrapper 额外设置padding因为 padding 会加宽盒子的实际渲染宽度。这里有个随时能用的检查技巧在浏览器控制台选中所有.wrapper元素逐个看它们的盒模型大小凡是宽度不是 1200px 的就是被 padding 或 border 撑开了。5. 验收与答辩把「做完了」变成「达标了」5.1 三屏对照验收法我每次写完静态页面都会做一个最朴素的验收动作把 PSD 导出成一张整页长图放在屏幕左侧浏览器打开index.html放在右侧然后从上到下逐段对照。对照时不只看布局还要看间距的细节比如导航文字是否垂直居中、课程卡片标题是否都在同一水平线、footer 的版权文字是否和设计稿一致。可以自制一份验收清单逐项打勾检查项是否通过页面宽度在不同窗口下是否保持版心居中是/否导航栏文字与图标垂直居中是/否课程卡片间距与设计稿一致是/否鼠标悬停时导航下划线出现且不动是/否footer 背景完整覆盖底部区域是/否图片无拉伸变形、无模糊发虚是/否5.2 答辩高频追问与回答要点答辩时老师最喜欢问的几类问题答案其实都在前面的实现细节里。问「为什么用浮动而不用 flex」回答时要强调浮动会让你手动计算盒子的宽高和间距从而更深入理解盒子模型同时指出你已经在父容器上做了 clearfix 处理问「课程卡片的间距怎么算出来的」直接把 270 × 4 30 × 3 1170 这个公式列出来比任何解释都有说服力问「图片为什么用背景图而不是 img」说清楚背景图适合 logo 这种需要精确定位且要隐藏文字的装饰性图片而课程封面这种内容性图片用 img 标签更合适。遇到答不上的问题不要硬编明确说「我目前是用这种方式实现的如果您说的方案在某种场景下更合适我可以继续优化」。这个态度本身就加分。从那以后我每次写完页面都会强制自己把 PSD 放到屏幕左侧、浏览器放到右侧一屏一屏对照过再提交。这个习惯不是玄学而是能救你于答辩现场的动作大多数「看起来怪怪的」问题都是在这个环节被发现并修掉的。希望帮到你。本文还有配套的精品资源点击获取
