简介一份集结PSD设计稿与HTML/CSS实现代码的前端入门素材包源自黑马程序员与学成在线课程案例专为Web开发初学者和期望提升设计稿还原能力的学习者打造压缩包内PSD文件覆盖首页、课程列表页、课程介绍页、职业规划页等典型页面场景配合页面代码能够清晰了解从视觉设计到网页呈现的完整链路。RAR压缩包共11个文件约17.71MB内含4个PSD源文件、5个PNG图片素材、1个HTML页面与1个CSS样式文件兼顾设计源文件浏览、页面结构搭建和样式实现三个层次目前已有14050人学习下载。对照PSD与代码文件可逐层拆解首页Banner、搜索按钮、用户图标等核心元素的实现方式掌握浮动布局、尺寸标注、字体色调搭配及切片输出等实用技能。PSD文件保留完整图层结构便于理解设计思路HTML与CSS代码则提供了直接可用的还原范本适合配合pink老师课程边学边练帮助学习者打通设计与前端开发之间的关键环节。1. 学成在线PSD素材和代码前端新手的第一份整页切图作业学HTML CSS的人大概都有这种体验标签和属性背得滚瓜烂熟一拿到真实的设计稿就不知道手往哪放。pink老师课里的“学成在线”案例就是专门治这个毛病的。这是一份完整的PSD素材加配套代码目标是一个在线教育平台的整页页面——顶部导航、轮播banner、课程推荐、卡片列表、页脚全都有难度恰好卡在“每个模块都认识但拼成整页就犯怵”的位置。它不是什么大项目却是前端初学者最值得照着拆的第一份真实页面结构典型、模块边界清楚、代码能直接跑。适合刚学完HTML CSS基础、想把语法变成作品的人也适合那些练过按钮和卡片demo、想看看真实首页长什么样的人。如果你正处在“学完了但写不出整页”的阶段这份素材值得下载下来从头到尾亲手敲一遍。2. 打开PSD先拆图层量尺寸、取色、导出图片的三件套2.1 先“素颜”看一遍原稿拿到PSD别急着写代码我一般习惯用十分钟做一件事把图层面板打开把每个图层组重新过一遍。学成在线这个PSD里分组通常按页面区块命名——头部一组、banner一组、课程区块一组、页脚一组结构已经算友好。但很多网上下载的素材是直接从网页切下来的图层名可能是英文也可能带着半透明遮罩层混在里面不仔细看会以为那个遮罩就是背景色。第一件事是把所有图层可见性打开看一眼设计稿完整的样子再逐组开关弄清楚每个区块的真实边界。这里有个小技巧用移动工具在画布上点某个元素图层面板会自动高亮它所在的图层能很快确认某个颜色块到底属于哪一组。这一轮“素颜”看完你对整个页面的层次心里就有数了后面量尺寸不会量错对象。2.2 量尺寸矩形选框加信息面板量尺寸是切图的基本功。我一般用矩形选框工具M键框住目标模块再看信息面板F8里的W和H值。学成在线的头部导航可以用这个办法量出logo区宽度、搜索框宽度、导航之间的间距。但有个前提PSD必须处在100%缩放状态下量如果画布被缩小显示信息面板里的读数是不准的。先按Ctrl1让画布回到100%再开始框选。提示量尺寸之前先确认这份PSD是1倍图还是2倍图。学成在线这版通常是1倍图量出来多少px就写多少px如果是2倍图所有读数要除以2再写进CSS否则页面会整体宽出一倍。量的时候我习惯把参考线拉出来从标尺CtrlR拖出参考线贴着每个模块的边缘放好。这样量完尺寸之后参考线还在原地写CSS时对着参考线位置就能回忆起每个模块的边界不用反复切窗口。2.3 取色吸管工具与统一色板取色用吸管工具I键但我不会直接吸一下就写进代码。Photoshop里的吸管有个参数叫“取样大小”默认是“取样点”也就是只读取鼠标落点那一个像素的颜色。这个模式容易取到图片边缘的杂色或抗锯齿像素。我一般先把取样大小改成“3x3平均”取出来的颜色更接近肉眼看到的模块主色。学成在线的配色不复杂主色是蓝色辅助色是橙色背景是浅灰。把设计稿里出现的颜色都吸一遍记到一个临时文件里写CSS的时候直接复制十六进制值不用来回切窗口。这个色板文件我通常用一个text文件存主色 #00a4ff 辅助色 #ff7c2e 背景 #f3f5f7 文字主 #333333 文字次 #666666 价格 #ff7c2e这里每个颜色对应一个具体用途。主色用来给导航高亮、按钮填充、链接强调背景色是页面大底文字主次分别对应标题和正文。把这几个颜色记牢写CSS时基本不用再翻PSD。2.4 图片素材导出格式和尺寸一起定学成在线页面里的图片素材分两类一类是装饰性图标比如logo、搜索按钮、箭头一类是内容配图比如课程卡片上的封面图。导出方法很简单在图层上右键选“导出为”但在格式上要分开处理。图标类导出成PNG而且要确认带透明通道。Photoshop的“导出为”面板里有个格式下拉框选PNG即可它会保留图层原有的透明区域。内容配图导出成JPG质量选80到90就够不用拉满100文件体积会小很多。这里有个关键点导出时缩放比例必须是100%很多人在导出面板里看到“缩放”输入框随手改成了50%导出的小图标放进页面里发虚还以为是素材本身的问题。文件命名建议 logo.png banner-01.jpg icon-search.png course-01.jpg icon-arrow.png course-02.jpg命名规范很重要。我见过有人把图片命名为“未标题-1”“未标题-2”写到CSS里自己都分不清哪个是哪个。建议按“模块-序号”的规则命名字母全小写用连字符连接CSS里引用时一眼就能定位。2.5 切图后的文件目录规划图片切完了顺手把目录建好。我一般会在项目文件夹下建两个子目录css和imagesHTML文件放在根目录。PSD素材本身放在项目外的素材文件夹里不进项目目录这样发给别人或者打包时不会把几百兆的PSD一起带上。images目录里再按需分几个子目录也可以但学成在线这种规模的项目没必要。图片全放在同一层命名里带上模块前缀比如banner-01.jpg和course-01.jpg文件多了也能分清。目录规划这件事看起来不起眼等页面里引了二三十张图的时候你就会感谢当初这个决定。3. 搭HTML骨架从设计稿到语义化标签的四块结构3.1 写代码前先画一张盒模型草图在编辑器里写下第一个字符之前先把页面拆成四块顶部导航区、banner区、精品课程区、页脚区。这一步不需要画得多好看拿张纸或者打开一个空白文档用矩形框把每个区块画出来再在框里标注内部的小盒子。学成在线的页面是标准的内容型首页结构从上到下依次排开。顶部导航里从左到右是logo、导航链接、搜索框、登录入口banner是一张通栏大图加左右箭头课程区是标题行加一行卡片页脚是深色背景的链接列表。这张草图就是你后面写HTML的地图哪个盒子套哪个盒子、哪些是并列关系画完草图就清楚了。3.2 头部导航logo、导航、搜索框、登录头部导航是整页第一个模块也是结构最典型的一个。先写HTMLheader classheader div classcontainer div classlogo h1a href#学成在线/a/h1 /div nav classnav ul lia href#首页/a/li lia href#课程/a/li lia href#职业规划/a/li /ul /nav div classsearch input typetext placeholder输入关键词 button typebutton搜索/button /div div classuser a href#登录/a /div /div /header这里有几个细节值得说。logo用h1包a是SEO习惯一个页面只有一个h1留给站点标识最合适。导航用了nav加ul这是最标准的导航结构浏览器和辅助工具都能识别。搜索框我用div包input和button没有强行用form因为这个案例里搜索不提交数据视觉还原优先。container这个类后面会在CSS里统一设置宽度和居中所以这里没有写任何样式属性。3.3 banner区轮播图加左右箭头banner区的结构和头部导航完全不同这里用section作为外层容器里面放图片列表和箭头按钮section classbanner div classbanner-img a href#img srcimages/banner-01.jpg alt学成在线 banner/a /div a href# classarrow arrow-leftlt;/a a href# classarrow arrow-rightgt;/a div classdots span classdot active/span span classdot/span span classdot/span /div /section图片列表这里我只放了一张因为设计稿里主要展示的就是第一张banner轮播能力后续用JS扩展即可。左右箭头用a标签而不是button是因为它们在语义上也是“跳转”动作虽然实际没链接。底部的小圆点用span每个圆点代表一页当前页加active类CSS里用这个类控高亮色。3.4 课程推荐位与卡片列表课程区是整个页面内容最多的部分结构上也最能练手。标题行和卡片列表分开写卡片本身是重复结构先写一张section classcourse div classcourse-head h2精品推荐/h2 a href#查看全部/a /div ul classcourse-list li a href# img srcimages/course-01.jpg alt课程封面 h3零基础入门HTML CSS/h3 p前端开发 · 1234人在学/p span classprice¥99.00/span /a /li /ul /section这里用ul加li而不是直接堆div因为课程卡片是列表数据用列表语义最合适。每张卡片里img、h3、p、span各司其职图片是视觉焦点h3是课程标题p放课程信息和学习人数span放价格。后续如果要加更多卡片复制li这一行替换图片和文字即可。3.5 标签选型的两个判断标准很多初学着在section和div之间纠结我的标准很简单先看内容有没有独立语义。课程卡片这种能单独拎出来看的内容用article或li页面里按区块划分区域的用section纯粹为了包装布局、没有语义的用div。学成在线的头部导航外层用headerbanner用section课程列表用section加ul页脚用footer每一层的选择都有依据。不要为了语义化把每个角落都堆上section和article。语义化标签的意义在于让页面结构可读而不是标签用得越多越好。拿不准的时候用div等结构写完了回头看哪个区块确实需要语义再替换这样不会在写骨架阶段卡壳。4. CSS还原设计稿flex、定位与网格布局的实战参数4.1 从全局重置到公共类HTML写完之后进入CSS第一步是重置浏览器默认样式。每个浏览器对body的margin、ul的padding都有默认值不重置的话写出来的页面在不同浏览器里会有几像素的差异肉眼不一定看得出来但叠加检查时会让人抓狂。* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, Arial, sans-serif; font-size: 14px; color: #333333; background-color: #f3f5f7; } .container { width: 1200px; margin: 0 auto; }box-sizing: border-box是全局设置让所有盒子的宽高都包含边框和内边距这样量出来的尺寸写进去不会撑破布局。container设置1200px宽度并水平居中学成在线的版心宽度就是1200px从PSD的参考线能直接量出来。body的背景色用的是第2章色板里的#f3f5f7如果背景色不对整个页面和白底设计稿会有明显色差。4.2 头部导航的flex布局头部导航用flex布局是最省事的方案。导航条左边是logo中间是导航链接右边是搜索框和登录三个区域水平排列用justify-content: space-between让它们自动分散到两端。.header { height: 70px; background-color: #ffffff; border-bottom: 1px solid #e8e8e8; } .header .container { display: flex; align-items: center; height: 70px; } .logo h1 { font-size: 24px; color: #00a4ff; } .nav { margin-left: 60px; } .nav ul { display: flex; list-style: none; } .nav li a { display: block; padding: 0 20px; line-height: 70px; color: #333333; text-decoration: none; } .nav li a:hover { color: #00a4ff; } .search { margin-left: auto; display: flex; }align-items: center让logo、导航、搜索框在垂直方向居中不用手动算上下间距。搜索框的margin-left: auto很关键它把搜索框推到最右边和logo、导航拉开距离效果等同justify-content: space-between但作用在单个元素上。导航链接的行高设为和header同高70px文字就能精确垂直居中这是做导航的经典写法。4.3 banner的定位层次banner区用定位实现左右箭头的垂直居中。父容器设position: relative箭头设absolute再用top: 50%加translateY(-50%)让箭头无论banner多高都能垂直居中。.banner { position: relative; height: 420px; overflow: hidden; } .banner-img img { width: 100%; height: 420px; display: block; } .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.4); color: #ffffff; text-align: center; line-height: 40px; text-decoration: none; } .arrow-left { left: 20px; } .arrow-right { right: 20px; } .dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .dot { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); } .dot.active { background-color: #00a4ff; }top: 50%加translateY(-50%)的组合比手动写top: 190px这种硬编码靠谱得多因为banner高度如果调整箭头自动跟着居中。rgba(0, 0, 0, 0.4)半透明背景让箭头浮在图片上也能看清。圆点居中也用了同样的思路left: 50%加translateX(-50%)实现水平居中gap: 10px控制圆点间距不需要给每个圆点单独写margin。4.4 课程卡片的间距计算课程卡片列表是这个页面里最能体现“像素级还原”的部分。卡片的宽度和间距直接决定一行能放几张以及整个卡片区是否和PSD对齐。.course { background-color: #ffffff; margin-top: 20px; padding: 30px 20px; } .course-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .course-head h2 { font-size: 22px; color: #333333; } .course-head a { color: #666666; text-decoration: none; } .course-list { display: flex; flex-wrap: wrap; gap: 40px; list-style: none; } .course-list li { width: 270px; background-color: #ffffff; border: 1px solid #e8e8e8; transition: box-shadow 0.3s; } .course-list li:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .course-list li img { width: 100%; height: 150px; display: block; } .course-list li h3 { font-size: 16px; padding: 10px 12px; color: #333333; } .course-list li p { font-size: 12px; color: #666666; padding: 0 12px 10px; } .price { display: block; padding: 0 12px 12px; color: #ff7c2e; font-weight: bold; }卡片的宽度是270px这是从PSD里量出来的。一行放4张的话4乘以270是1080px容器宽度1200px减去两边padding还有1160px可用剩余空间除以间隙得出每个间隙大约40px正好用gap: 40px实现。这个数值不是拍脑袋定的是拿PSD量完宽度再倒推出来的间距。flex-wrap: wrap让卡片排满一行后自动换到下一行不用手动管换行。4.5 写完后第一轮自检CSS全部写完打开浏览器本地预览第一轮自检我通常看三个地方。第一个是窗口宽度调整到1200px和更宽时页面有没有横向滚动条——有的话说明某个模块的宽度超出了容器去检查是不是有元素忘了加box-sizing: border-box。第二个是给每个区块临时加上不同的背景色看各模块的边界是否和设计稿重合这个技巧能快速发现某个模块多出了几像素的内边距。第三个是hover效果设计稿里导航链接、课程卡片、查看全部这些可点击元素都有对应的交互状态逐个点一遍确认没有死链和样式异常。5. 像素级还原避坑五个必踩的坑与排查清单5.1 量出来的尺寸写上去总是差1到2像素现象按照PSD里量出的宽度写CSS后整个模块比设计稿宽了一点或者某个盒子明显偏移。原因量尺寸的时候画布缩放比例不是100%或者PSD本身有隐藏的半透明图层参与了渲染导致实际视觉和量出来的数值不符。还有一种常见情况是设计稿里的模块本身带边框和投影你只量了内容区写CSS时没算上边框宽度。解决重新按Ctrl1回到100%缩放再量。量的时候沿着模块的最外边界框选把边框和投影都包含进去。如果模块有投影投影不计入盒子宽度但边框要算所以全局开box-sizing: border-box能省掉很多这种追加计算。5.2 导出的图片放进页面发虚、边缘有白边现象图标在PSD里看着挺清晰放进网页后边缘模糊或者在深色背景上有一圈白边。原因导出时把图片尺寸缩小了或者存成了JPG格式透明区域的像素被白色填充。Photoshop里JPG格式不支持透明通道透明区域会被填成白色放在深色背景上就露馅。解决图标类素材统一用PNG导出确认图层面板里没有隐藏的白色背景层。导出时把缩放比例设回100%。如果一张图既有透明区域又要压缩体积用PNG-24格式它对透明通道的支持最完整。5.3 文字位置怎么都调不到和PSD一致现象文字的横向位置对了纵向总是偏高或偏低几像素改margin和padding都试了还是对不上。原因CSS里line-height的默认值是normal浏览器会自己算一个值通常不是整数和PSD里固定的行高数值对不上。设计稿中文字的行高往往是一个具体数值CSS里没显式设置就等于放弃了控制权。解决给所有文字元素先设line-height: 1再去调padding或margin。这样文字的纵向位置完全由自己控制不受浏览器默认行高干扰。如果PSD里明确标了行高数值用line-height: 20px这种写法直接复制但要注意文字字号变化时行高也要跟着调。5.4 页脚区域整体往上飘贴不到页面底部现象页脚明明写在HTML最后浏览器里看却跑到了中间位置或者被上面的内容盖住。原因页面里用了浮动布局常见的做法是课程卡片左浮动父容器没有清除浮动高度变成0后面的页脚就顶了上来。这是浮动布局的老问题。解决在父容器上加一个clearfix这是最稳妥的清除浮动方式.clearfix::after { content: ; display: block; clear: both; }把clearfix类加到所有包含浮动子元素的父容器上。如果用的是flex或grid布局不需要clearfix但学成在线这种老式切图练习里浮动依然是最常见的踩坑点。5.5 本地打开正常发给别人图片全裂了现象自己电脑上打开页面一切正常把文件压缩发到别的电脑或服务器上所有图片都不显示。原因图片路径写了本地绝对路径比如C:\Users\xxx\images\course-01.jpg这种换一台电脑路径就失效了。HTML文件本身能打开是因为它和图片在同一台设备的同一路径下换环境立刻出问题。解决统一用相对路径。HTML文件在项目根目录图片在images目录下就写images/course-01.jpg不带盘符、不带file://协议。css文件里引用的背景图也同理路径相对css文件所在位置算。养成这个习惯后整个项目文件夹随便拷贝到哪台电脑、哪个服务器都能正常显示。6. 最后一道验收把页面截图叠回PSD做像素级对比6.1 拿到整页截图页面写完、自检通过还不能算完。我最后一道工序是截图叠原稿。打开浏览器开发者工具先把窗口宽度设成1200px这个宽度和PSD版心一致保证截图比例和设计稿对齐。按CommandShiftP调出命令面板输入Capture full size screenshotChrome会把整个页面包括滚动区域以下的部分截成一张长图。截图存成PNG拖进Photoshop和学成在线原稿放在同一个画布里。如果浏览器截图高度和PSD画布高度不一致选中截图图层按CtrlT调整大小只调节高度宽度锁定1200px不变。6.2 叠加对比的两种模式第一种模式把截图图层的混合模式改成“正常”不透明度降到50%上下移动截图直到能看出大体轮廓重叠。这个模式适合粗略找整体偏移。第二种模式更狠混合模式改成“差值”。完全重合的像素会变成黑色有差异的地方会发亮。这时候整个页面哪里偏了、哪里颜色不对、哪里元素缺失全部一目了然。我第一次用差值模式看自己做的页面时非常惊讶肉眼看起来完全一样的页面叠上去以后边缘全是亮的。按模块逐个检查对照这个清单检查项通过标准头部导航logo位置、导航间距、搜索框宽度一致banner图片区域完整覆盖箭头位置正确课程卡片卡片宽度、间距、图片高度一致文字和颜色标题字号、正文颜色、价格颜色与色板一致页脚高度、背景色、链接排列一致有偏差的模块记下来回编辑器改CSS改完刷新页面再截一次图重新叠加直到差值模式下绝大部分区域变黑。6.3 验证之后的扩展练习叠加验收通过后这个案例就满足了“照着还原”的目标。我建议再往前走两步把.container的固定width: 1200px改成max-width: 1200px页面在窄屏下能自动收缩不再出现横向滚动条把课程卡片改成使用grid布局加repeat(auto-fill, minmax(270px, 1fr))让它能自适应不同屏幕宽度。这两个改动做完学成在线就从“定宽页面”升级成了“响应式页面”比再做十个静态页面学到的更多。从那以后我每次做完页面都强制走一遍截图叠加的验收流程哪怕时间紧也要截一张图叠一下。这个习惯帮我抓住了很多肉眼看不出来的几像素偏移也让我对“像素级还原”这件事有了具体的评判标准而不是凭感觉说“差不多”。希望帮到你。本文还有配套的精品资源点击获取