企业官网建设流程全解析

简介：面向网页前端初学者，这套学成在线案例素材由设计源文件与页面代码组成，适用于配合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 页面功能模块一览

把首页从上到下一层一层拆开，学成在线案例的页面通常包含以下功能区块：

这个结构覆盖了首页开发的大部分高频场景：导航怎么做、卡片列表怎么排列、图片怎么裁切、文字超长怎么省略。下面几章我们直接对着素材和代码细节逐段拆。

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 class="header"> <div class="wrapper"> <div class="logo"> <h1><a href="#"><img src="images/logo.png" alt="学成在线"></a></h1> </div> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul> </div> <div class="login"> <a href="#">登录</a> <span>|</span> <a href="#">注册</a> </div> </div> </div>

CSS里最关键的思路是：.header给一个深色背景，并设置line-height来控制整体高度，.wrapper用来限定1200px的居中区域，头部内部三个盒子全部向左浮动，形成一个横向排列。垂直居中不需要用margin-top去猜，直接给这三个盒子统一设置相同的line-height，文字和图片就能自动垂直居中。图片存在像素级偏差时，常用vertical-align: middle或者把图片转成块级元素再处理。

参数说明：.wrapper的宽度建议设为1200px，margin: 0 auto实现水平居中；.header的高度通常在40px到50px之间，对应PSD里测量出来的导航栏高度。如果PSD里导航是半透明的，还要考虑背景色是rgba还是纯色。

4.2 搜索栏与登录区：表单控件在布局里的定位

搜索框一般紧跟在导航链接右侧，或者浮动在右侧区域。常见的实现是用input加上一个搜索按钮，两个元素放进同一个容器，通过浮动或定位让它们并排。学成在线这类页面的搜索块通常是圆角边框，右侧配一个放大镜图标按钮：

<div class="search"> <input type="text" 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 class="banner"> <div class="wrapper"> <div class="banner-left"> <ul> <li>前端开发</li> <li>后端开发</li> <li>人工智能</li> </ul> </div> <div class="banner-right"> <img src="images/banner.png" alt=""> <div class="prev"></div> <div class="next"></div> </div> </div> </div>

Banner整体的高度按PSD测量值设定，比如height: 420px。左侧目录栏用绝对定位贴在左侧，宽度通常在200px左右，背景色是半透明黑色；右侧主图占剩余宽度。左右切换箭头是两个小图标，用绝对定位放在图片两侧，定位参考点是Banner容器。

这里最容易翻车的地方是：绝对定位元素如果找不到最近的定位祖先，就会相对于浏览器窗口定位。写CSS时一定确保.banner设置了position: relative。另外Banner图片如果是响应式的，尽量给容器固定高度，避免图片加载后把布局挤塌。

4.4 课程卡片栅格：盒模型与浮动间隙的处理

课程列表是学成在线首页信息量最大的模块，通常是一行4列或3列的卡片排列。每张卡片由封面图、课程标题、简介、学习人数和讲师头像组成。我见过很多人在这一步纠结“浮动后用margin还是用padding”，其实关键在于理解盒模型：

<div class="course-list"> <div class="course-item"> <img src="images/course-01.jpg" alt="课程封面"> <h3>前端开发入门</h3> <p>零基础学习HTML和CSS</p> <div class="course-info"> <span>1200人学习</span> <span>讲师：王老师</span> </div> </div> <div class="course-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-right+nth-child(4n)清右距。

封面图的高度需要设置固定值，让图片不拉伸，通常用width: 100%; height: 160px; object-fit: cover;，或者干脆把图片裁成设计稿的固定尺寸。

4.5 侧边热门榜单：数字、标题与文本溢出的处理

侧边栏热门课程是一个列表，每一行包含排名数字、课程标题、学习人数。这个模块的难点在标题超长时的省略号处理。结构类似于：

<div class="hot-list"> <div class="hot-title">热门推荐</div> <ul> <li> <span class="hot-num">1</span> <span class="hot-name">零基础学会JavaScript全栈开发</span> <span class="hot-count">2000人学习</span> </li> </ul> </div>

CSS里需要让hot-name这个中间文本自适应宽度，并在内容过长时显示省略号：

.hot-name { display: inline-block; width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

这里的参数要算清楚：父容器总宽度减去排名数字宽度和右侧学习人数宽度，剩余宽度就是文本能用的空间。如果width设宽了，省略号会不出现；设窄了，标题显示不全，就要反复调。教科书里会写“给一个合适宽度”，实际操作中最好先用浏览器控制台量一下左右两个元素的宽度再计算。

4.6 底部链接区：多列浮动的清除与版权对齐

底部通常是深色背景，包含“关于我们”“帮助中心”等列，以及底部的版权行。每一列是一个dl，内部放dt和dd。多列布局依然用浮动，列宽按百分比或固定值分配。

<div class="footer"> <div class="wrapper"> <div class="footer-links"> <dl> <dt>关于我们</dt> <dd><a href="#">公司介绍</a></dd> <dd><a href="#">联系我们</a></dd> </dl> </div> <div class="copyright"> <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 id="courseList"></ul>

const 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 class="course-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量尺寸，改完后用截图工具对比设计稿和渲染效果，而不是凭感觉调。从那以后我每次改动都会强制走一遍“量、改、对比”的流程，改动前给原文件存一个副本，这样即使改坏了也有后悔药可吃。希望这套素材和这份拆解能帮你把前端的第一个完整项目做得明明白白。

本文还有配套的精品资源，点击获取