简介面向网页前端初学者这套学成在线案例素材由设计源文件与页面代码组成适用于配合pink老师HTML/CSS课程及黑马程序员教学项目跟进练习帮助学习者掌握从PSD设计稿到网页落地的完整流程。压缩包共11个文件整体大小约17.71MB其中4个PSD设计稿覆盖网站首页、课程列表页、职业规划页、课程介绍页5张PNG为banner、图标、logo等切图素材另附index.html与style.css代码文件可对照设计稿逐一还原页面结构与样式。已有14059人浏览学习。通过逐层查看PSD的构图、配色与内容分区再结合HTML与CSS代码理解色彩搭配、字体选择、布局调整等细节特别适合希望在真实案例中提升切图与编码能力的初学者。反复比对设计稿与代码还能熟悉常见页面模块的搭建顺序为独立完成企业级静态页面打下扎实基础。1. 学成在线PSD素材及代码前端入门第一个能完整复现的页面项目很多人学完HTML和CSS基础之后卡在“听懂了但不会做页面”这一步标签和属性都知道拿到一张设计稿却不知道从哪下手。学成在线PSD素材及代码这个案例就是用来解决这个问题的——它把一套在线教育平台的首页设计稿、切图资源和最终代码全部打包好让你从PSD文件开始一步步对比“设计稿长什么样”和“代码写成什么样”把浮动、清除浮动、内边距、背景定位这些知识点全部落到一个真实页面上。如果你正在找能练手的完整前端项目或者想看看一个培训机构的经典教学案例是怎么组织CSS结构的这份素材很适合拆开研究一遍。2. 项目定位与技术选型从PSD切片到HTML/CSS落地还原一套在线教育首页2.1 项目场景这套素材解决的是什么问题在线教育类网站的首页信息密度高导航、搜索、Banner、课程卡片、名师推荐、底部信息几乎每个区块都在考验基础布局能力。学成在线PSD素材及代码对应的就是一个典型的在线教育平台首页视觉上包含顶部黑色导航、橙色高亮标签、大图轮播位、课程列表栅格、侧边栏热门推荐、底部多列链接等常见模块。这类页面的技术难点不在某个复杂算法而在“把设计稿拆成合理的HTML结构再用CSS精确还原视觉效果”。很多初学者拿到PSD之后不知道该把设计稿切成多少张图哪些部分该用背景图哪些该用CSS绘制哪些地方的尺寸需要重新测量。这份资源的价值就在于它已经把切图做完了并且给出了对应的HTML和CSS你可以直接对比素材和成品代码理解每一个像素是怎么来的。2.2 技术栈与文件构成从资源和代码的对应关系来看这个案例是纯静态HTML CSS技术栈不涉及JavaScript库和构建工具属于前端的“原生三件套”阶段。代码量不大HTML结构清晰CSS采用多个class分工的写法适合在浏览器里直接打开预览也适合放进编辑器和PSD素材对照着改。按前端培训里常见的实现方式这套案例通常会包含以下几类文件.psd设计源文件用于查看图层、取色、量尺寸、切图。images/切图目录存放从PSD中切出来的logo、图标、课程封面等图片资源。index.html页面结构对应首页所有内容区块。style.css样式表负责全局样式、布局、模块样式和响应式细节。这套技术选型是刻意的如果用前端框架来做反而会把“CSS基本功”这件事藏起来。用原生方式写一遍才能看清栅格布局里每一行浮动和清除浮动的意义。2.3 页面功能模块一览把首页从上到下一层一层拆开学成在线案例的页面通常包含以下功能区块模块作用关键技术点顶部导航品牌logo、导航链接、登录入口浮动布局、行高垂直居中、hover下划线Banner区全宽大图、左右切换箭头、底部指示点背景图铺设、绝对定位精品课程推荐标题栏 课程卡片栅格盒子模型、margin负值、图片尺寸控制前端开发课程带标签的课程列表定位标签、精灵图背景侧边热门榜单排行数字 标题文本颜色区分、溢出隐藏、文本省略底部链接多列链接 版权信息列表浮动、清除浮动这个结构覆盖了首页开发的大部分高频场景导航怎么做、卡片列表怎么排列、图片怎么裁切、文字超长怎么省略。下面几章我们直接对着素材和代码细节逐段拆。3. 目录结构与素材清单PSD源文件、切图资源、CSS与HTML一一对应3.1 拿到资源后先看什么建议拿到学成在线PSD素材及代码后不要直接打开HTML先扫一遍目录结构。一个规范的案例资源目录本身就是最好的阅读地图。常见布局是这样的xuecheng-online/ ├── psd/ │ └── 学成在线.psd ├── images/ │ ├── logo.png │ ├── banner.png │ ├── banner1.png │ ├── course-01.jpg │ ├── course-02.jpg │ ├── course-03.jpg │ ├── course-04.jpg │ ├── course-05.jpg │ ├── course-06.jpg │ ├── hot-01.jpg │ ├── ... │ └── sprite.png或多个图标小图 ├── index.html ├── style.css └── README.md部分版本会附带说明先打开PSD文件确认设计稿尺寸通常页面主体宽度是1200px或1280px两侧留白。再看images目录里的切图大小对照PSD里的图层范围能快速建立“这个图是从哪个区域切出来的”的空间感。3.2 设计稿切图的基本规则PSD里每个图层组都有命名观察命名规律能少走弯路。常见的做法是背景图直接导出为整块图标类元素切成透明底PNG有渐变和阴影的按钮不要用截图而是用CSS还原。学成在线案例里logo一般是透明PNG课程封面通常是JPG小图标像搜索按钮、播放角标、热卖标签经常被拼进一张精灵图里。我这个习惯是在做这个案例时养成的切图前先打开PSD的“图层”面板把不需要的背景图层隐藏掉再通过“存储为Web所用格式”导出。这样做出来的图片边缘干净不会有白边。如果你拿到的素材里图片已经切好那就把每张图和页面里对应的位置对一遍能顺手学会识别每个切图的实际用途。3.3 目录结构对应的页面区块把文件目录和页面结构做一次映射会非常直观logo.png对应顶部导航左侧的Logo。banner.png、banner1.png是Banner区域的背景图或轮播图。course-01.jpg到course-06.jpg是课程卡片左上角的封面图。hot-01.jpg到hot-05.jpg是热门推荐栏右侧的小图。sprite.png里一般包含搜索图标、箭头、标签背景等小元素通过CSS背景定位来显示。看代码时重点留意CSS里background: url(images/xxx.png) no-repeat的写法以及background-position的具体数值。这是静态页面开发里最容易出错也最能体现熟练度的地方。对照编码就能知道这张小图在精灵图里处于什么位置坐标偏移是怎么算出来的。4. 核心模块拆解导航、Banner、课程卡片与底部的实现细节4.1 顶部导航浮动布局与垂直居中的处理顶部导航是学成在线首页最常见的“黑底白字”风格左边是Logo和导航链接右边是登录入口。HTML结构大致是这样的div classheader div classwrapper div classlogo h1a href#img srcimages/logo.png alt学成在线/a/h1 /div div classnav ul lia href#首页/a/li lia href#课程/a/li lia href#职业规划/a/li /ul /div div classlogin a href#登录/a span|/span a href#注册/a /div /div /divCSS里最关键的思路是.header给一个深色背景并设置line-height来控制整体高度.wrapper用来限定1200px的居中区域头部内部三个盒子全部向左浮动形成一个横向排列。垂直居中不需要用margin-top去猜直接给这三个盒子统一设置相同的line-height文字和图片就能自动垂直居中。图片存在像素级偏差时常用vertical-align: middle或者把图片转成块级元素再处理。参数说明.wrapper的宽度建议设为1200pxmargin: 0 auto实现水平居中.header的高度通常在40px到50px之间对应PSD里测量出来的导航栏高度。如果PSD里导航是半透明的还要考虑背景色是rgba还是纯色。4.2 搜索栏与登录区表单控件在布局里的定位搜索框一般紧跟在导航链接右侧或者浮动在右侧区域。常见的实现是用input加上一个搜索按钮两个元素放进同一个容器通过浮动或定位让它们并排。学成在线这类页面的搜索块通常是圆角边框右侧配一个放大镜图标按钮div classsearch input typetext placeholder请输入关键词 button/button /div.search { float: right; margin-top: 8px; width: 300px; height: 40px; border: 2px solid #00a4ff; border-radius: 20px; overflow: hidden; } .search input { float: left; width: 250px; height: 36px; border: 0; outline: none; text-indent: 15px; } .search button { float: left; width: 44px; height: 36px; border: 0; background: url(images/btn.png) no-repeat center; cursor: pointer; }这个写法里overflow: hidden既让圆角容器裁掉内部元素溢出部分也顺带触发了BFC避免内部浮动元素把容器高度撑没。按钮的背景图就是PSD里切出来的放大镜小图用no-repeat center居中显示。搜索按钮和输入框的边界需要对齐一般把输入框高度设置成比容器小4px再用相同高度值对齐。提示如果你的页面里搜索框和登录按钮位置对不齐先检查父容器是否触发了BFC再看两个子元素各自的margin和height是否一致。4.3 Banner轮播区块背景图与绝对定位的组合Banner区通常是全宽或居中的大图。学成在线的Banner在设计稿里是一张横幅大图图上有slogan文字。实际开发时有两种做法整张图作为img放进HTML或者作为div的背景图铺设。更接近实际项目的做法是用背景图div classbanner div classwrapper div classbanner-left ul li前端开发/li li后端开发/li li人工智能/li /ul /div div classbanner-right img srcimages/banner.png alt div classprev/div div classnext/div /div /div /divBanner整体的高度按PSD测量值设定比如height: 420px。左侧目录栏用绝对定位贴在左侧宽度通常在200px左右背景色是半透明黑色右侧主图占剩余宽度。左右切换箭头是两个小图标用绝对定位放在图片两侧定位参考点是Banner容器。这里最容易翻车的地方是绝对定位元素如果找不到最近的定位祖先就会相对于浏览器窗口定位。写CSS时一定确保.banner设置了position: relative。另外Banner图片如果是响应式的尽量给容器固定高度避免图片加载后把布局挤塌。4.4 课程卡片栅格盒模型与浮动间隙的处理课程列表是学成在线首页信息量最大的模块通常是一行4列或3列的卡片排列。每张卡片由封面图、课程标题、简介、学习人数和讲师头像组成。我见过很多人在这一步纠结“浮动后用margin还是用padding”其实关键在于理解盒模型div classcourse-list div classcourse-item img srcimages/course-01.jpg alt课程封面 h3前端开发入门/h3 p零基础学习HTML和CSS/p div classcourse-info span1200人学习/span span讲师王老师/span /div /div div classcourse-item !-- 后续课程卡片结构相同 -- /div /div.course-item { float: left; width: 280px; margin-right: 20px; margin-bottom: 20px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } .course-item:nth-child(4n) { margin-right: 0; }这里用nth-child清除每行最后一个卡片的右边距是这门课里很典型的技巧。如果你不想用nth-child也可以给父容器设置负margin再把卡片间距写成padding但这会使背景色和边框的处理更麻烦。学成在线这个项目的标准答案基本就是第一种浮动 margin-rightnth-child(4n)清右距。封面图的高度需要设置固定值让图片不拉伸通常用width: 100%; height: 160px; object-fit: cover;或者干脆把图片裁成设计稿的固定尺寸。4.5 侧边热门榜单数字、标题与文本溢出的处理侧边栏热门课程是一个列表每一行包含排名数字、课程标题、学习人数。这个模块的难点在标题超长时的省略号处理。结构类似于div classhot-list div classhot-title热门推荐/div ul li span classhot-num1/span span classhot-name零基础学会JavaScript全栈开发/span span classhot-count2000人学习/span /li /ul /divCSS里需要让hot-name这个中间文本自适应宽度并在内容过长时显示省略号.hot-name { display: inline-block; width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }这里的参数要算清楚父容器总宽度减去排名数字宽度和右侧学习人数宽度剩余宽度就是文本能用的空间。如果width设宽了省略号会不出现设窄了标题显示不全就要反复调。教科书里会写“给一个合适宽度”实际操作中最好先用浏览器控制台量一下左右两个元素的宽度再计算。4.6 底部链接区多列浮动的清除与版权对齐底部通常是深色背景包含“关于我们”“帮助中心”等列以及底部的版权行。每一列是一个dl内部放dt和dd。多列布局依然用浮动列宽按百分比或固定值分配。div classfooter div classwrapper div classfooter-links dl dt关于我们/dt dda href#公司介绍/a/dd dda href#联系我们/a/dd /dl /div div classcopyright p© 2024 学成在线 版权所有/p /div /div /div.footer { background: #222; padding: 30px 0 20px; } .footer-links dl { float: left; width: 180px; } .copyright { clear: both; text-align: center; color: #999; }clear: both用在版权行上是为了让版权行从浮动列的下方开始排列不会跟左侧的链接列挤在同一行。这是每个浮动布局都会遇到的固定动作一定要养成“浮动之后有清除”的条件反射。5. 避坑与常见问题排查切图、浮动、命名冲突与兼容性5.1 背景图坐标偏了按钮显示不对现象icon按钮显示位置不对要么偏移到角落要么完全显示空白。 原因精灵图里的坐标是自己在PSD里量的但没有把“目标元素的背景定位”和“精灵图的原始尺寸”对应起来。常见的是只设置了background-position的X轴忘了Y轴或者负号写反。 解决先在PSD里用矩形选框量出目标图标左上角到整个精灵图左上角的偏移量X和Y都要记录。CSS里写成background: url(images/sprite.png) no-repeat -30px -40px;。负号表示把背景图向左、向上移动。另一个办法是把精灵图放进浏览器控制台用背景位置调试工具预览微调数值直到对齐。5.2 浮动子元素导致父容器高度塌陷现象课程列表的背景色没有包住所有卡片底部出现空白或背景高度只有一行。 原因所有卡片都设置了float: left父容器内部的常规流中不再有任何元素能撑起高度父容器高度自动变为0。这是浮动布局最经典的翻车现场。 解决有三种方法按推荐程度来。第一种是父容器设置overflow: hidden触发BFC同时让父容器重新计算高度第二种是在所有浮动元素结束后加一个空div并设置clear: both第三种是给父容器添加::after伪元素做清除浮动。.course-list::after { content: ; display: block; clear: both; }5.3 导航链接之间有小空隙间距对不上设计稿现象导航菜单里每个a标签之间总有几像素空隙PSD里明明没有。 原因HTML中li之间写了换行或空格行内块级元素会把空白字符渲染成间距。 解决要么把li全写成一行要么给li设置浮动脱离文本流要么给父级设置font-size: 0再给链接单独设置字号。实际项目里最好用浮动因为导航菜单里的链接普遍需要设置padding而不是margin来控制间距。5.4 图片底部出现白边现象课程封面图片下方总有一条几像素的细线。 原因图片默认是基线对齐基线下方还保留了行高产生的空隙。特别是放在卡片容器里时这条白边会被撑出来。 解决给图片设置display: block或vertical-align: top。比较省事的做法是全局写一条img { vertical-align: top; }5.5 圆角搜索框内部溢出按钮尖角露出来现象搜索框设置了border-radius: 20px但内部输入框和按钮还是直角搜索框四个角露出白色尖角。 原因子元素没有跟随父容器裁剪圆角。 解决给父容器加overflow: hidden。注意这里不仅是为了隐藏子元素超出部分更重要的是让子元素背景不会顶破父圆角。如果搜索框有边框输入框高度还要比父容器高度小2px避免边框重叠产生双线效果。6. 二次开发改造思路从静态页面到可维护前端模板6.1 把硬编码数据抽成JSON或数组学成在线首页的课程卡片、热门榜单都是写死在HTML里的。二次开发时第一步就是把这些重复结构改成数据驱动的循环。以课程列表为例将来接后端接口时只需要把接口返回的数据替换到数组里通过JavaScript渲染出同样的DOM结构。ul idcourseList/ulconst courseData [ { title: 前端开发入门, desc: 零基础学习HTML和CSS, students: 1200, teacher: 王老师, img: images/course-01.jpg }, { title: JavaScript核心进阶, desc: 深入理解闭包和原型链, students: 980, teacher: 李老师, img: images/course-02.jpg } ]; const list document.getElementById(courseList); courseData.forEach(item { list.innerHTML li classcourse-item img src${item.img} alt${item.title} h3${item.title}/h3 p${item.desc}/p span${item.students}人学习/span span讲师${item.teacher}/span /li ; });这个改造完成后页面就不再是“改一行代码添一门课”的静态文件而是可以对接任何后端数据源的数据展示层。后续如果换成Vue或React只需要把这个结构迁移成组件变化也不大。6.2 用CSS自定义属性做主题色管理学成在线的品牌色是蓝色和橙色。把颜色抽成CSS变量后换主题只需要改一个值。:root { --primary-color: #00a4ff; --accent-color: #ff7c2d; --footer-bg: #222222; } .header { background: var(--footer-bg); } .search button, .banner-left li:hover { background-color: var(--primary-color); }这样改造的收益在维护阶段特别明显。业务侧某天说要换品牌色全站搜索替换的土办法并不精确用CSS变量全局统一管理一行改动就完成换肤。就算你的项目暂时不需要换肤把颜色提取出来也能让样式表结构清晰很多。6.3 增加响应式布局适配原始静态版是按1200px宽度写死的在手机端打开会横向滚动。二次开发时优先处理导航和课程列表导航在小屏幕下折叠成汉堡菜单课程卡片从4列变成2列再变成1列。推荐用flex替代浮动来做卡片排列因为flex-wrap天然支持换行不需要nth-child清margin。.course-list { display: flex; flex-wrap: wrap; justify-content: space-between; } .course-item { width: 23%; margin-bottom: 20px; } media (max-width: 768px) { .course-item { width: 48%; } }这里的宽度换成百分比后无论屏幕多宽都能自动计算每行放几张卡片。老项目里浮动布局不是不能改而是改动成本大新增的页面分支建议直接用flex。6.4 验证改动的常规流程每次改动后最简单的验证方式就是打开浏览器控制台查看页面在1200px、768px和375px三种宽度下的表现。重点检查图片是否拉伸、文字是否溢出、浮动元素有没有把父容器撑错位。如果改了结构还需要在控制台检查对应元素的offsetWidth是否和设计稿一致。我在这类静态项目上踩过不少坑最深刻的一条是改CSS前先打开PSD量尺寸改完后用截图工具对比设计稿和渲染效果而不是凭感觉调。从那以后我每次改动都会强制走一遍“量、改、对比”的流程改动前给原文件存一个副本这样即使改坏了也有后悔药可吃。希望这套素材和这份拆解能帮你把前端的第一个完整项目做得明明白白。本文还有配套的精品资源点击获取
简介面向网页前端初学者这套学成在线案例素材由设计源文件与页面代码组成适用于配合pink老师HTML/CSS课程及黑马程序员教学项目跟进练习帮助学习者掌握从PSD设计稿到网页落地的完整流程。压缩包共11个文件整体大小约17.71MB其中4个PSD设计稿覆盖网站首页、课程列表页、职业规划页、课程介绍页5张PNG为banner、图标、logo等切图素材另附index.html与style.css代码文件可对照设计稿逐一还原页面结构与样式。已有14059人浏览学习。通过逐层查看PSD的构图、配色与内容分区再结合HTML与CSS代码理解色彩搭配、字体选择、布局调整等细节特别适合希望在真实案例中提升切图与编码能力的初学者。反复比对设计稿与代码还能熟悉常见页面模块的搭建顺序为独立完成企业级静态页面打下扎实基础。1. 学成在线PSD素材及代码前端入门第一个能完整复现的页面项目很多人学完HTML和CSS基础之后卡在“听懂了但不会做页面”这一步标签和属性都知道拿到一张设计稿却不知道从哪下手。学成在线PSD素材及代码这个案例就是用来解决这个问题的——它把一套在线教育平台的首页设计稿、切图资源和最终代码全部打包好让你从PSD文件开始一步步对比“设计稿长什么样”和“代码写成什么样”把浮动、清除浮动、内边距、背景定位这些知识点全部落到一个真实页面上。如果你正在找能练手的完整前端项目或者想看看一个培训机构的经典教学案例是怎么组织CSS结构的这份素材很适合拆开研究一遍。2. 项目定位与技术选型从PSD切片到HTML/CSS落地还原一套在线教育首页2.1 项目场景这套素材解决的是什么问题在线教育类网站的首页信息密度高导航、搜索、Banner、课程卡片、名师推荐、底部信息几乎每个区块都在考验基础布局能力。学成在线PSD素材及代码对应的就是一个典型的在线教育平台首页视觉上包含顶部黑色导航、橙色高亮标签、大图轮播位、课程列表栅格、侧边栏热门推荐、底部多列链接等常见模块。这类页面的技术难点不在某个复杂算法而在“把设计稿拆成合理的HTML结构再用CSS精确还原视觉效果”。很多初学者拿到PSD之后不知道该把设计稿切成多少张图哪些部分该用背景图哪些该用CSS绘制哪些地方的尺寸需要重新测量。这份资源的价值就在于它已经把切图做完了并且给出了对应的HTML和CSS你可以直接对比素材和成品代码理解每一个像素是怎么来的。2.2 技术栈与文件构成从资源和代码的对应关系来看这个案例是纯静态HTML CSS技术栈不涉及JavaScript库和构建工具属于前端的“原生三件套”阶段。代码量不大HTML结构清晰CSS采用多个class分工的写法适合在浏览器里直接打开预览也适合放进编辑器和PSD素材对照着改。按前端培训里常见的实现方式这套案例通常会包含以下几类文件.psd设计源文件用于查看图层、取色、量尺寸、切图。images/切图目录存放从PSD中切出来的logo、图标、课程封面等图片资源。index.html页面结构对应首页所有内容区块。style.css样式表负责全局样式、布局、模块样式和响应式细节。这套技术选型是刻意的如果用前端框架来做反而会把“CSS基本功”这件事藏起来。用原生方式写一遍才能看清栅格布局里每一行浮动和清除浮动的意义。2.3 页面功能模块一览把首页从上到下一层一层拆开学成在线案例的页面通常包含以下功能区块模块作用关键技术点顶部导航品牌logo、导航链接、登录入口浮动布局、行高垂直居中、hover下划线Banner区全宽大图、左右切换箭头、底部指示点背景图铺设、绝对定位精品课程推荐标题栏 课程卡片栅格盒子模型、margin负值、图片尺寸控制前端开发课程带标签的课程列表定位标签、精灵图背景侧边热门榜单排行数字 标题文本颜色区分、溢出隐藏、文本省略底部链接多列链接 版权信息列表浮动、清除浮动这个结构覆盖了首页开发的大部分高频场景导航怎么做、卡片列表怎么排列、图片怎么裁切、文字超长怎么省略。下面几章我们直接对着素材和代码细节逐段拆。3. 目录结构与素材清单PSD源文件、切图资源、CSS与HTML一一对应3.1 拿到资源后先看什么建议拿到学成在线PSD素材及代码后不要直接打开HTML先扫一遍目录结构。一个规范的案例资源目录本身就是最好的阅读地图。常见布局是这样的xuecheng-online/ ├── psd/ │ └── 学成在线.psd ├── images/ │ ├── logo.png │ ├── banner.png │ ├── banner1.png │ ├── course-01.jpg │ ├── course-02.jpg │ ├── course-03.jpg │ ├── course-04.jpg │ ├── course-05.jpg │ ├── course-06.jpg │ ├── hot-01.jpg │ ├── ... │ └── sprite.png或多个图标小图 ├── index.html ├── style.css └── README.md部分版本会附带说明先打开PSD文件确认设计稿尺寸通常页面主体宽度是1200px或1280px两侧留白。再看images目录里的切图大小对照PSD里的图层范围能快速建立“这个图是从哪个区域切出来的”的空间感。3.2 设计稿切图的基本规则PSD里每个图层组都有命名观察命名规律能少走弯路。常见的做法是背景图直接导出为整块图标类元素切成透明底PNG有渐变和阴影的按钮不要用截图而是用CSS还原。学成在线案例里logo一般是透明PNG课程封面通常是JPG小图标像搜索按钮、播放角标、热卖标签经常被拼进一张精灵图里。我这个习惯是在做这个案例时养成的切图前先打开PSD的“图层”面板把不需要的背景图层隐藏掉再通过“存储为Web所用格式”导出。这样做出来的图片边缘干净不会有白边。如果你拿到的素材里图片已经切好那就把每张图和页面里对应的位置对一遍能顺手学会识别每个切图的实际用途。3.3 目录结构对应的页面区块把文件目录和页面结构做一次映射会非常直观logo.png对应顶部导航左侧的Logo。banner.png、banner1.png是Banner区域的背景图或轮播图。course-01.jpg到course-06.jpg是课程卡片左上角的封面图。hot-01.jpg到hot-05.jpg是热门推荐栏右侧的小图。sprite.png里一般包含搜索图标、箭头、标签背景等小元素通过CSS背景定位来显示。看代码时重点留意CSS里background: url(images/xxx.png) no-repeat的写法以及background-position的具体数值。这是静态页面开发里最容易出错也最能体现熟练度的地方。对照编码就能知道这张小图在精灵图里处于什么位置坐标偏移是怎么算出来的。4. 核心模块拆解导航、Banner、课程卡片与底部的实现细节4.1 顶部导航浮动布局与垂直居中的处理顶部导航是学成在线首页最常见的“黑底白字”风格左边是Logo和导航链接右边是登录入口。HTML结构大致是这样的div classheader div classwrapper div classlogo h1a href#img srcimages/logo.png alt学成在线/a/h1 /div div classnav ul lia href#首页/a/li lia href#课程/a/li lia href#职业规划/a/li /ul /div div classlogin a href#登录/a span|/span a href#注册/a /div /div /divCSS里最关键的思路是.header给一个深色背景并设置line-height来控制整体高度.wrapper用来限定1200px的居中区域头部内部三个盒子全部向左浮动形成一个横向排列。垂直居中不需要用margin-top去猜直接给这三个盒子统一设置相同的line-height文字和图片就能自动垂直居中。图片存在像素级偏差时常用vertical-align: middle或者把图片转成块级元素再处理。参数说明.wrapper的宽度建议设为1200pxmargin: 0 auto实现水平居中.header的高度通常在40px到50px之间对应PSD里测量出来的导航栏高度。如果PSD里导航是半透明的还要考虑背景色是rgba还是纯色。4.2 搜索栏与登录区表单控件在布局里的定位搜索框一般紧跟在导航链接右侧或者浮动在右侧区域。常见的实现是用input加上一个搜索按钮两个元素放进同一个容器通过浮动或定位让它们并排。学成在线这类页面的搜索块通常是圆角边框右侧配一个放大镜图标按钮div classsearch input typetext placeholder请输入关键词 button/button /div.search { float: right; margin-top: 8px; width: 300px; height: 40px; border: 2px solid #00a4ff; border-radius: 20px; overflow: hidden; } .search input { float: left; width: 250px; height: 36px; border: 0; outline: none; text-indent: 15px; } .search button { float: left; width: 44px; height: 36px; border: 0; background: url(images/btn.png) no-repeat center; cursor: pointer; }这个写法里overflow: hidden既让圆角容器裁掉内部元素溢出部分也顺带触发了BFC避免内部浮动元素把容器高度撑没。按钮的背景图就是PSD里切出来的放大镜小图用no-repeat center居中显示。搜索按钮和输入框的边界需要对齐一般把输入框高度设置成比容器小4px再用相同高度值对齐。提示如果你的页面里搜索框和登录按钮位置对不齐先检查父容器是否触发了BFC再看两个子元素各自的margin和height是否一致。4.3 Banner轮播区块背景图与绝对定位的组合Banner区通常是全宽或居中的大图。学成在线的Banner在设计稿里是一张横幅大图图上有slogan文字。实际开发时有两种做法整张图作为img放进HTML或者作为div的背景图铺设。更接近实际项目的做法是用背景图div classbanner div classwrapper div classbanner-left ul li前端开发/li li后端开发/li li人工智能/li /ul /div div classbanner-right img srcimages/banner.png alt div classprev/div div classnext/div /div /div /divBanner整体的高度按PSD测量值设定比如height: 420px。左侧目录栏用绝对定位贴在左侧宽度通常在200px左右背景色是半透明黑色右侧主图占剩余宽度。左右切换箭头是两个小图标用绝对定位放在图片两侧定位参考点是Banner容器。这里最容易翻车的地方是绝对定位元素如果找不到最近的定位祖先就会相对于浏览器窗口定位。写CSS时一定确保.banner设置了position: relative。另外Banner图片如果是响应式的尽量给容器固定高度避免图片加载后把布局挤塌。4.4 课程卡片栅格盒模型与浮动间隙的处理课程列表是学成在线首页信息量最大的模块通常是一行4列或3列的卡片排列。每张卡片由封面图、课程标题、简介、学习人数和讲师头像组成。我见过很多人在这一步纠结“浮动后用margin还是用padding”其实关键在于理解盒模型div classcourse-list div classcourse-item img srcimages/course-01.jpg alt课程封面 h3前端开发入门/h3 p零基础学习HTML和CSS/p div classcourse-info span1200人学习/span span讲师王老师/span /div /div div classcourse-item !-- 后续课程卡片结构相同 -- /div /div.course-item { float: left; width: 280px; margin-right: 20px; margin-bottom: 20px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.05); } .course-item:nth-child(4n) { margin-right: 0; }这里用nth-child清除每行最后一个卡片的右边距是这门课里很典型的技巧。如果你不想用nth-child也可以给父容器设置负margin再把卡片间距写成padding但这会使背景色和边框的处理更麻烦。学成在线这个项目的标准答案基本就是第一种浮动 margin-rightnth-child(4n)清右距。封面图的高度需要设置固定值让图片不拉伸通常用width: 100%; height: 160px; object-fit: cover;或者干脆把图片裁成设计稿的固定尺寸。4.5 侧边热门榜单数字、标题与文本溢出的处理侧边栏热门课程是一个列表每一行包含排名数字、课程标题、学习人数。这个模块的难点在标题超长时的省略号处理。结构类似于div classhot-list div classhot-title热门推荐/div ul li span classhot-num1/span span classhot-name零基础学会JavaScript全栈开发/span span classhot-count2000人学习/span /li /ul /divCSS里需要让hot-name这个中间文本自适应宽度并在内容过长时显示省略号.hot-name { display: inline-block; width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }这里的参数要算清楚父容器总宽度减去排名数字宽度和右侧学习人数宽度剩余宽度就是文本能用的空间。如果width设宽了省略号会不出现设窄了标题显示不全就要反复调。教科书里会写“给一个合适宽度”实际操作中最好先用浏览器控制台量一下左右两个元素的宽度再计算。4.6 底部链接区多列浮动的清除与版权对齐底部通常是深色背景包含“关于我们”“帮助中心”等列以及底部的版权行。每一列是一个dl内部放dt和dd。多列布局依然用浮动列宽按百分比或固定值分配。div classfooter div classwrapper div classfooter-links dl dt关于我们/dt dda href#公司介绍/a/dd dda href#联系我们/a/dd /dl /div div classcopyright p© 2024 学成在线 版权所有/p /div /div /div.footer { background: #222; padding: 30px 0 20px; } .footer-links dl { float: left; width: 180px; } .copyright { clear: both; text-align: center; color: #999; }clear: both用在版权行上是为了让版权行从浮动列的下方开始排列不会跟左侧的链接列挤在同一行。这是每个浮动布局都会遇到的固定动作一定要养成“浮动之后有清除”的条件反射。5. 避坑与常见问题排查切图、浮动、命名冲突与兼容性5.1 背景图坐标偏了按钮显示不对现象icon按钮显示位置不对要么偏移到角落要么完全显示空白。 原因精灵图里的坐标是自己在PSD里量的但没有把“目标元素的背景定位”和“精灵图的原始尺寸”对应起来。常见的是只设置了background-position的X轴忘了Y轴或者负号写反。 解决先在PSD里用矩形选框量出目标图标左上角到整个精灵图左上角的偏移量X和Y都要记录。CSS里写成background: url(images/sprite.png) no-repeat -30px -40px;。负号表示把背景图向左、向上移动。另一个办法是把精灵图放进浏览器控制台用背景位置调试工具预览微调数值直到对齐。5.2 浮动子元素导致父容器高度塌陷现象课程列表的背景色没有包住所有卡片底部出现空白或背景高度只有一行。 原因所有卡片都设置了float: left父容器内部的常规流中不再有任何元素能撑起高度父容器高度自动变为0。这是浮动布局最经典的翻车现场。 解决有三种方法按推荐程度来。第一种是父容器设置overflow: hidden触发BFC同时让父容器重新计算高度第二种是在所有浮动元素结束后加一个空div并设置clear: both第三种是给父容器添加::after伪元素做清除浮动。.course-list::after { content: ; display: block; clear: both; }5.3 导航链接之间有小空隙间距对不上设计稿现象导航菜单里每个a标签之间总有几像素空隙PSD里明明没有。 原因HTML中li之间写了换行或空格行内块级元素会把空白字符渲染成间距。 解决要么把li全写成一行要么给li设置浮动脱离文本流要么给父级设置font-size: 0再给链接单独设置字号。实际项目里最好用浮动因为导航菜单里的链接普遍需要设置padding而不是margin来控制间距。5.4 图片底部出现白边现象课程封面图片下方总有一条几像素的细线。 原因图片默认是基线对齐基线下方还保留了行高产生的空隙。特别是放在卡片容器里时这条白边会被撑出来。 解决给图片设置display: block或vertical-align: top。比较省事的做法是全局写一条img { vertical-align: top; }5.5 圆角搜索框内部溢出按钮尖角露出来现象搜索框设置了border-radius: 20px但内部输入框和按钮还是直角搜索框四个角露出白色尖角。 原因子元素没有跟随父容器裁剪圆角。 解决给父容器加overflow: hidden。注意这里不仅是为了隐藏子元素超出部分更重要的是让子元素背景不会顶破父圆角。如果搜索框有边框输入框高度还要比父容器高度小2px避免边框重叠产生双线效果。6. 二次开发改造思路从静态页面到可维护前端模板6.1 把硬编码数据抽成JSON或数组学成在线首页的课程卡片、热门榜单都是写死在HTML里的。二次开发时第一步就是把这些重复结构改成数据驱动的循环。以课程列表为例将来接后端接口时只需要把接口返回的数据替换到数组里通过JavaScript渲染出同样的DOM结构。ul idcourseList/ulconst courseData [ { title: 前端开发入门, desc: 零基础学习HTML和CSS, students: 1200, teacher: 王老师, img: images/course-01.jpg }, { title: JavaScript核心进阶, desc: 深入理解闭包和原型链, students: 980, teacher: 李老师, img: images/course-02.jpg } ]; const list document.getElementById(courseList); courseData.forEach(item { list.innerHTML li classcourse-item img src${item.img} alt${item.title} h3${item.title}/h3 p${item.desc}/p span${item.students}人学习/span span讲师${item.teacher}/span /li ; });这个改造完成后页面就不再是“改一行代码添一门课”的静态文件而是可以对接任何后端数据源的数据展示层。后续如果换成Vue或React只需要把这个结构迁移成组件变化也不大。6.2 用CSS自定义属性做主题色管理学成在线的品牌色是蓝色和橙色。把颜色抽成CSS变量后换主题只需要改一个值。:root { --primary-color: #00a4ff; --accent-color: #ff7c2d; --footer-bg: #222222; } .header { background: var(--footer-bg); } .search button, .banner-left li:hover { background-color: var(--primary-color); }这样改造的收益在维护阶段特别明显。业务侧某天说要换品牌色全站搜索替换的土办法并不精确用CSS变量全局统一管理一行改动就完成换肤。就算你的项目暂时不需要换肤把颜色提取出来也能让样式表结构清晰很多。6.3 增加响应式布局适配原始静态版是按1200px宽度写死的在手机端打开会横向滚动。二次开发时优先处理导航和课程列表导航在小屏幕下折叠成汉堡菜单课程卡片从4列变成2列再变成1列。推荐用flex替代浮动来做卡片排列因为flex-wrap天然支持换行不需要nth-child清margin。.course-list { display: flex; flex-wrap: wrap; justify-content: space-between; } .course-item { width: 23%; margin-bottom: 20px; } media (max-width: 768px) { .course-item { width: 48%; } }这里的宽度换成百分比后无论屏幕多宽都能自动计算每行放几张卡片。老项目里浮动布局不是不能改而是改动成本大新增的页面分支建议直接用flex。6.4 验证改动的常规流程每次改动后最简单的验证方式就是打开浏览器控制台查看页面在1200px、768px和375px三种宽度下的表现。重点检查图片是否拉伸、文字是否溢出、浮动元素有没有把父容器撑错位。如果改了结构还需要在控制台检查对应元素的offsetWidth是否和设计稿一致。我在这类静态项目上踩过不少坑最深刻的一条是改CSS前先打开PSD量尺寸改完后用截图工具对比设计稿和渲染效果而不是凭感觉调。从那以后我每次改动都会强制走一遍“量、改、对比”的流程改动前给原文件存一个副本这样即使改坏了也有后悔药可吃。希望这套素材和这份拆解能帮你把前端的第一个完整项目做得明明白白。本文还有配套的精品资源点击获取
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
