学成在线PSD切图实战：从设计稿到HTML/CSS浮动布局全流程-北京尧图网络

简介这是一份面向网页设计初学者与前端开发入门者的综合练习资源整合了学成在线项目的PSD设计稿与配套HTML/CSS代码帮助学习者完整走通从视觉稿到静态页面的实现流程案例中还可看到偏柔和、时尚的配色设计思路。压缩包共11个文件包含4个PSD源文件首页、课程列表页、课程介绍页、职业规划页、5张切图素材banner、logo、搜索图标、用户头像等以及1个HTML页面和1个CSS样式表包体约17.71MB。通过逐一打开PSD文件查看图层构成再对照HTML与CSS分析页面如何落地可深入理解UI设计稿的切图规范、布局思路、色彩搭配和字体选择掌握Flex布局、字体图标引入、栏目间距与圆角按钮等常用技巧。资源源自黑马程序员相关课程体系质量较有保障适合学完HTML/CSS基础后进阶实战的读者。已有14059人学习下载。1. 学成在线一个前端新手必练的PSD切图实战如果你学过HTML和CSS基础但一到「拿到设计稿自己写页面」就无从下手那这套某前端训练营出品的「学成在线」PSD素材及代码就是为你准备的。它是一整套完整的静态教育网站页面——包含PSD设计源文件、切好的图片素材、以及一位老师人称pink老师手写的完整HTML/CSS代码。拿它当练习你能看到企业里真实页面从设计稿到代码落地的全部过程。它适合两类人一类是刚学完浮动、盒模型、定位想找个完整项目练手的新手另一类是准备前端面试想快速复习整页切图布局的求职者。这不是一个「看一遍就完」的教程资源而是一个需要你照着PSD自己敲一遍、再对照老师代码查漏补缺的实战项目。套用训练营里流传最广的一句话把「学成在线」这个页面敲三遍你对浮动的理解会超过看一百遍文档。这话不夸张——整个页面的核心布局全是浮动撑起来的嵌套、清除、高度塌陷能踩的坑它全都有。2. 资源包解剖从PSD源文件到最终Demo2.1 拿到压缩包先看什么这套资源解压后目录结构大致如下学成在线PSD素材及代码/ ├── psd/ # 设计源文件 │ ├── 学成在线首页.psd │ └── 学成在线-标签页.psd ├── images/ # 从PSD切出的图片素材 │ ├── logo.png │ ├── banner.png │ ├── 课程封面/*.png │ └── 二维码.png ├── css/ │ ├── style.css # 老师手写的完整样式 │ └── base.css # 基础重置样式 ├── index.html # 最终成品页面 └── 笔记.md # 课程笔记先别急着打开index.html看代码。你拿到这套资源的第一件事应该是用Photoshop打开PSD源文件把「图层」面板展开隐藏部分文案图层看看设计师是怎么组织内容的。这一步决定了你后面切图是否顺手。很多新手拿到PSD就直接上手写代码写到一半发现「这个图标我怎么截不出来」「背景图尺寸对不上」再回头去看PSD效率反而更高。我一般会建议先花半小时把PSD从头到尾点一遍记住哪些图层是文本、哪些是图片、哪些是背景然后在心里标注几个关键模块的尺寸。2.2 切图其实只需要四个工具切图这步卡住过很多人实际用到的工具翻来覆去就四个工具用途操作要点矩形选框M截取矩形图标、按钮配合参考线对齐边缘魔棒W抠纯色背景的图标容差调到30左右切片工具C批量切整块区域先标好参考线再切片存储为Web格式CtrlShiftAltS导出压缩图片透明图选PNG-24具体到学成在线课程封面这类照片导JPG就行logo、图标这类需要透明底的必须导PNG。导出时格式选错了后面CSS里会出现白底方块这是新手切图翻车的头号原因。我在拆这套资源时注意到一个细节老师提供的images文件夹里课程封面图是统一命名的比如course-01.png、course-02.png。这其实是在暗示你——图片是循环列表结构写HTML时用li列表包图片比一个div一个img硬写要合理得多。光看代码可能注意不到这层设计意图但对比PSD再对照最终页面结构你就能get到。2.3 HTML骨架先定全局学成在线是经典的「上-中-下」结构但头部导航有讲究。打开PSD看顶部你会发现导航栏左侧是logo中间是导航词右侧是一个搜索框加「登录」按钮。按这个布局导航区整体是一个header容器内部用浮动把三块内容排成一行。页面主体从上到下依次是banner轮播区、精品课程推荐区、前端开发课程专区、版权信息区。每块之间用section语义标签隔开最后footer收尾。这里有一个值得新手学习的习惯写HTML骨架时不要想着「一次到位」先把所有大块的div或section搭出来给每个模块起好class名再去填里面的小结构。我拆这套代码时注意到老师的class命名习惯——比如banner、course、footer用的都是语义化英文单词没有box1、box2这种。这是一个容易被忽略的细节但对后续写CSS和二次开发来说可读性差异巨大。3. 核心布局拆解一个典型的浮动切图实战流程3.1 全局样式与清除默认学成在线的CSS分两个文件其中base.css是所有页面公用的基础重置。做整页切图时很多新手直接从.header {}开写写到一半发现浏览器默认的body边距让所有模块错位再回头补重置样式代码就乱了。老师的做法很规范base.css里包含这些关键代码* { margin: 0; padding: 0; } body { background-color: #f3f5f7; font: 14px/1.5 Microsoft YaHei, Arial, sans-serif; color: #333; } ul { list-style: none; } a { text-decoration: none; color: #333; } .w { width: 1200px; margin: 0 auto; }逻辑说明*通配符重置所有元素的默认边距这是切图项目最常见的做法避免不同浏览器默认样式差异导致布局错位。body里设置字体和背景色其中font是缩写形式14px是字号1.5是行高后面是字体栈。.w是一个公共类表示版心宽度1200px并水平居中整个页面上所有内容区都会用到它——相当于一个「容器」约定。参数说明1200px这个宽度不是随便定的。打开PSD看画布宽度学成在线的内容区设计稿就是1200px宽所以代码里统一用.w来约束内容宽度。如果以后你想改成自适应只需要把1200px换成max-width加百分比即可。3.2 导航栏浮动与行高的技巧导航栏是学成在线里第一个有技术含量的模块。它看起来简单——左logo、中导航、右搜索——但如果用标准文档流布局三个元素会竖向堆叠必须用浮动让它们横向排列。老师的关键代码如下.header { height: 60px; background-color: #fff; border-bottom: 2px solid #ff7200; } .header .logo img { float: left; width: 120px; height: 40px; margin-top: 10px; } .header .nav { float: left; margin-left: 60px; } .header .nav ul li { float: left; line-height: 60px; } .header .nav ul li a { display: block; padding: 0 15px; height: 58px; line-height: 58px; } .header .nav ul li a:hover { border-bottom: 2px solid #ff7200; color: #ff7200; }逻辑说明整个导航栏的垂直居中是用line-height实现的而不是padding或margin。header高度设60px导航链接的line-height也设60px文字自然就垂直居中了。鼠标悬停时border-bottom和line-height配合让橙色下划线出现在文字下方而不是文字上方——因为如果把line-height设成60px再设height: 60px border-bottom底边线会被挤下去2px产生视觉跳动。参数说明margin-left: 60px是logo和导航之间的间距这个值是从PSD里量出来的。写代码时不要凭感觉编数字养成用Photoshop标尺工具量间距的习惯这是从「练习」走向「专业」的分水岭。3.3 banner与背景定位精灵图实战banner区是学成在线里图片技术含量最高的地方。设计稿里banner是一张大图横贯页面宽度超出1200px版心。新手写到这里容易犯一个错误——直接把图铺满。正确的做法是.banner { height: 420px; background: url(../images/banner.png) no-repeat center top; }逻辑说明背景图平铺整个banner容器高度从PSD里量出来是420px。center top表示背景图水平居中、垂直靠顶。容器宽默认是100%所以超出1200px的部分会被裁掉——这恰好匹配设计稿里banner左右延伸到屏幕边缘的效果。背景图不缩放、不重复只显示一次。参数说明关键词no-repeat决定了背景图不会平铺center是水平居中任何屏幕宽度下banner主体部分都居中显示这是企业站最常见的banner写法。如果设计稿里的banner图本身就包含左右渐变的延伸效果这种写法会非常自然。接着是banner左下角的课程分类导航用到了精灵图。什么是精灵图就是设计师把多个小图标合并到一张大图里前端通过background-position来定位显示哪个图标。学成在线的课程分类边栏左侧有个小箭头图标就是精灵图的一部分.subnav li a::after { content: ; position: absolute; right: 15px; top: 50%; width: 8px; height: 14px; background: url(../images/icon.png) no-repeat -8px -2px; transform: translateY(-50%); }逻辑说明用CSS伪元素::after生成箭头图标position: absolute把它定位到每个列表项的右侧垂直居中位置。关键点在background的值-8px -2px是箭头在精灵图里的偏移坐标。这两个值来自PSD里的测量——打开Photoshop用切片工具选中箭头区域在信息面板里就能读到精确坐标。参数说明transform: translateY(-50%)在top: 50%的基础上再向上偏移自身高度的一半实现真正的垂直居中。如果不加这行箭头会偏下几个像素看起来不居中这是很多新手写完精灵图定位后视觉上差一口气的原因。多写这一行从「能用」变成「好看」。3.4 课程卡片清除浮动的正确姿势课程推荐区是整个学成在线页面里浮动布局最密集的部分也是最容易出现「高度塌陷」的地方。先看HTML结构div classcourse div classcourse-hd h4精品推荐/h4 a href#查看全部/a /div div classcourse-bd ul li img srcimages/course-01.png alt h5PHP基础语法/h5 p高级Java开发工程师/p span¥1999/span /li !-- 更多li -- /ul /div /div对应CSS里最关键的是父容器如何包裹子元素。因为所有li都是浮动的浮动元素脱离了文档流父容器ul的高度会变成0——这就是经典的「高度塌陷」。老师的做法是.course-bd ul::after { content: ; display: block; height: 0; visibility: hidden; clear: both; } .course-bd ul { zoom: 1; }逻辑说明::after伪元素在ul末尾生成一个看不见的块级元素clear: both清除左右两侧的浮动影响强制父容器重新计算高度把浮动子元素「撑」起来。zoom: 1是为了兼容旧版浏览器触发BFC块级格式化上下文的写法——在IE6时代是刚需现在可以不用但老代码里保留了它也体现了兼容性思路。参数说明这组代码里真正起作用的是clear: bothheight: 0和visibility: hidden则是为了让伪元素不占空间、不影响页面视觉。如果你忘了加清除浮动页面里课程卡片底部的间距会全部错乱后续模块会往上钻——这个翻车场景在训练营里几乎每天都能看到。3.5 底部footer与版权区最后是footer它负责收尾整个页面。学成在线的footer结构是三栏左侧版权信息中间友情链接列表右侧备案号。布局继续用浮动但有一个细节值得抄底部的dl定义列表用来组织「关于我们 / 帮助中心」这类多组链接比ul嵌套li更语义化。.footer { padding-top: 30px; background-color: #fff; } .footer .links dl { float: left; width: 200px; margin-right: 30px; } .footer .links dt { font-size: 16px; margin-bottom: 10px; }逻辑说明dl是「定义列表」dt是标题dd是具体条目。在多组链接并列时用dl比ul嵌套更清晰因为每组链接有自己的标题层。这里每个dl固定宽200px、右间距30px四组就是920px加上左边版权区的宽度正好不超出版心1200px——写布局时精确计算横向总和这个习惯能帮你避免大半的「多一像素换行」问题。4. 避坑指南切图实战高频翻车现场4.1 图片底部有一条白色空隙这个坑几乎每个写切图的新手都会踩。现象是图片下方莫名其妙出现几个像素的间距怎么都去不掉。原因是img是行内元素遵循文字基线对齐规则而基线与底线之间天然存在空隙。解决的办法有三种给img设置display: block或者设vertical-align: middle或者父容器设font-size: 0。我个人的习惯是写布局时给img统一加display: block一劳永逸。4.2 浮动后子元素高度塌陷现象浮动元素后面的盒子钻上来了版心区域底部间距挤没了。原因是浮动元素不占文档流高度父容器算不出实际高度。解决办法就是上面说的clearfix伪元素。这里有个关键清除浮动的代码必须加在浮动元素的父容器上不是加在浮动元素本身也不是加在后面的兄弟元素上。很多新手加错了位置问题依旧以为自己「按教程写了但没用」。4.3 导航文字和logo不对齐现象logo和导航文字水平方向看起来差了几个像素怎么微调都不舒服。原因行高设置不一致。logo的margin-top是按图片高度算的导航文字的line-height是按行高算的两套基准。解决办法先保证导航line-height和父容器header的height值一致再调margin微调logo位置两者用同一套数值体系去计算就不会歪。4.4 精灵图背景偏移写反了写background-position时正数向右向下负数向左向上。很多新手把箭头定位写成8px 2px结果是反方向偏移背景图显示的不是想要的图标。解决办法打开PSD用矩形选框框住目标图标读信息面板里的X、Y坐标然后用负号填进CSS。别凭感觉写别用试的用量的。5. 二次开发把学成在线改成你自己的作品5.1 换色与换图五分钟做出「新」页面拿到这套代码最快能改出个人风格的是配色和图片。登录页有个橙色的主色#ff7200你可以全局替换成自己品牌的主色——例如蓝色#00a4ff。不要用编辑器逐行找直接用IDE的全局替换把#ff7200全部换成你的新色值。这样logo悬停效果、导航下划线、价格标签、按钮全部同步变色一秒换装。图片替换更简单打开images文件夹把你自己的图片按原有命名覆盖进去保持同名同格式刷新页面即可。要注意新图片的宽高比要和原图一致否则会出现图片拉伸变形的尴尬。比如课程封面是230px宽、140px高你的替换图也应该是这个比例。5.2 从「静态」到「动态」JSON渲染课程列表学成在线的课程列表是纯静态HTML写死的——每个li都是一段硬编码。把它改成数据驱动是大多数「二次开发」的第一步也是面试里常考的题。改造思路是把HTML结构抽成一个模板把课程数据放到数组里用JavaScript循环生成li。这样以后更新课程只需要改数据不用碰结构。大致逻辑是const courseData [ { img: course-01.png, title: PHP基础语法, desc: 高级Java开发工程师, price: ¥1999 }, { img: course-02.png, title: 前端开发入门, desc: 高级前端工程师, price: ¥2999 } ]; const courseList document.querySelector(.course-bd ul); courseData.forEach(item { courseList.innerHTML li img srcimages/${item.img} alt h5${item.title}/h5 p${item.desc}/p span${item.price}/span /li ; });这段代码把原本写死的li变成了数据循环渲染。参数说明forEach遍历数组模板字符串拼出HTMLinnerHTML 每次追加一个li。这样改完之后你再要加课程只需要往courseData里推一个对象页面自动多一张卡片。5.3 让页面对话PC端和平板端学成在线的版心是1200px在窄屏比如平板的768px下会出现横向滚动条。一个合格的前端不能只交付「桌面端能看」的页面。我一般会在style.css末尾加一组媒体查询media (max-width: 1200px) { .w { width: 100%; padding: 0 20px; } .course-bd ul li { width: 48%; margin-bottom: 20px; } } media (max-width: 768px) { .header .nav { display: none; } .course-bd ul li { width: 100%; } .footer .links dl { width: 100%; margin-right: 0; margin-bottom: 20px; } }逻辑说明第一段媒体查询针对「屏幕宽度小于1200px」的设备此时让版心占满整个宽度并留20px内边距避免内容贴边同时课程卡片从一行4个变成一行2个。第二段针对手机屏隐藏掉导航链接移动端导航通常交给菜单按钮课程卡片一行1个footer分组链接全部竖向排列。这个写法完全基于原页面的浮动结构只加少量样式改动就能适配三档宽度。5.4 验证你的改动看不见的回归检查改完代码之后不要用「肉眼看看对不对」来验收。最实用的验证方式是用浏览器开发者工具切换设备模拟器依次检查三个宽度1440px宽屏、1024px主流笔记本、375px手机竖屏重点看三处——导航是否错位、课程卡片是否溢出、footer链接是否重叠。我每次改完都要走一遍这个三宽度检查因为它能覆盖绝大多数布局回归问题。特别是clear相关的改动宽度一大就暴露。从那以后我养成了一个习惯不管项目改多小的地方打开页面先按F12切一次手机模拟器再切回来你会发现很多「它对啊」的错觉都是这十秒钟戳破的。希望这套学成在线的素材和代码也能成为你的练手起点——把它吃透你能写出来的就不止这一个页面了。本文还有配套的精品资源点击获取

学成在线PSD切图实战：从设计稿到HTML/CSS浮动布局全流程

相关推荐

AI专著撰写全流程攻略：工具选型、提示词与学术规范避坑指南

AI辅助专著写作全流程：工作流设计、工具选型与质量修复

C# IOCP高性能Socket服务：池化设计与5000+并发实战

更多资讯

【实战】手把手教你搭建企业级Model Context Protocol (MCP)服务：从Spring AI到TaoToken统一通道

专科生论文能用AI写吗？8类AI工具从开题到答辩全流程指南

DeepSeek R1实战指南：访问路径、提示词技巧与自动化脚本

银联银行卡BIN数据实战：支付路由与风控画像的底层逻辑

通信对抗核心机制：干信比、处理增益与干扰容限详解

AI日报制作全流程：从信息采集到结构化压缩的工程实践

今日更新

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本周精选

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？