如果你正在考虑转前端，或者已经自学了一阵子但始终拼不出一个完整项目，这套千峰 2022 年 9 月完结的面授班录播值得花时间了解一下。它不是那种"七天速成"的引流课，而是一套从零讲到 Vue3 项目落地的完整面授记录，内容量接近一万五的线下班标准。
这套课解决的是哪些具体场景
面授班和网课最大的区别在于节奏。它默认你完全没碰过代码，从建文件夹、理解网页由什么组成讲起，HTML 标签、CSS 盒模型、浮动定位这些基础部分占了一阶段的大部分时间。这个阶段解决的是"能对着设计图写出静态页面"的问题，不是背标签，而是让你看到一张图知道该从哪里下手切结构。
二阶段进入 JavaScript 和 DOM 操作，重点在事件处理、数据渲染和常见交互效果。学完这部分，你能独立完成轮播图、选项卡、表单验证这类中小型交互模块——这是面试和实际工作中最常被检验的基本功。
三阶段是 Vue3 部分，也是这套资料在当年比较突出的地方。2022 年面授班把 Vue3 作为重点来讲，组合式 API、响应式原理、路由、状态管理都有覆盖，最后落到一个完整的后台管理类项目上。这个阶段的目标很明确：让你能独立搭起一个带权限、带接口请求、带路由跳转的前端应用，而不是只会写单个组件。
学完能独立做什么
- 根据 UI 图独立完成 PC 端和移动端的静态页面还原，包括响应式布局；
- 用原生 JavaScript 实现常见的页面交互逻辑，不依赖框架也能处理 DOM；
- 使用 Vue3 搭建单页应用，完成组件拆分、路由配置、接口联调和状态管理；
- 看懂一个中等规模前端项目的目录结构，知道每部分代码该放在哪里。
这几项能力对应的是初级前端岗位的基本要求。需要说明的是，课程本身不包含后端内容，接口部分主要靠模拟数据或公开 API 来练，真实项目里前后端联调的坑还得在实习或工作中补。
资料适合什么基础的人
零基础可以直接跟，但要有心理准备：面授录播的节奏比精剪网课慢，老师会花时间讲环境配置和报错排查，这些内容对新手其实很有用，但如果你已经会写页面，一阶段可以倍速跳过。有 HTML/CSS 基础、卡在 JavaScript 或 Vue 的人，建议从二阶段切入，重点看 DOM 操作和 Vue3 项目部分。
完全没接触过编程、又希望三个月内找到工作的，这套课能给你知识框架，但不足以代替刷题和做个人项目。它的定位是系统打底，不是求职冲刺。
使用这套资料的建议
面授班的作业和阶段项目是这套资料里最容易被忽略、也最有价值的部分。每学完一个阶段，尽量把对应的作业独立做一遍，再看老师的实现方式对比差异。Vue3 部分建议边看边敲，不要只过视频——组合式 API 的写法看一遍觉得懂，自己写的时候很容易卡在响应式丢失和生命周期顺序上。
另外，这套内容完结于 2022 年 9 月，Vue3 生态在那之后有不少更新，比如构建工具和部分周边库的版本变化。学的时候以课程讲的核心概念为主，具体配置遇到报错再去查最新文档，不必死守课程里的版本号。
课程目录
000千峰2022年 9月完结前端/ ├──01-一阶段CSS | ├──DAY 01 | | └──内容为空 讲解开班注意事项 | ├──DAY 02 | | ├──视频 | | ├──作业 | | ├── 01 文件夹的创建.html 0.47kb | | ├── 02 网页的组成.html 0.52kb | | ├── 03 html的概念.html 0.44kb | | ├──04 html5的结构.html 0.77kb | | ├── 05 命名.html 0.51kb | | ├── 06 注释及html语法.html 0.69kb | | ├── 07 文字的标题及段落.html 1.81kb | | ├── 08 加粗倾斜换行水平线.html 1.31kb | | ├── 09 不常用的标签及特殊符号.html 1.97kb | | └── 10 列表.html 2.83kb | ├──DAY 03 | | ├──html | | ├──images | | ├──视频 | | ├──作业图 | | ├── 01 听写及上节回顾.html 1.73kb | | ├── 02 作业讲解.html 1.17kb | | ├── 03 div和span.html 0.96kb | | ├── 04 插入图片.html 1.20kb | | ├── 05 超链接.html 1.03kb | | ├── 06 案例讲解-综合.html 1.43kb | | ├── 07 行内样式表的创建.html 1.53kb | | ├── 08 class标签通配符选择器.html 1.59kb | | ├── 09 扣丁学堂-上下结构.html 1.59kb | | ├── 10 扣丁学堂-左右的结构.html 3.56kb | | ├──xiao.jpeg 66.88kb | | └──扣丁课堂.jpg 741.62kb | ├──DAY 04 | | ├──images | | ├──视频 | | ├── 01 上节回顾.html 2.52kb | | ├── 02 表单.html 1.76kb | | ├── 03 表单案例.html 1.13kb | | ├── 04 css语法.html 1.35kb | | ├── 05 样式表的创建.html 1.50kb | | ├── 06 样式表的权重.html 0.84kb | | ├── 07 id选择器和群组选择器.html 0.99kb | | ├── 08 后代选择器.html 1.17kb | | ├── 09 伪类选择器.html 1.87kb | | ├── 10 选择器案例.html 1.94kb | | ├──css.css 0.02kb | | └──style.css 0.05kb | ├──DAY 05 | | ├──images | | ├──视频 | | ├── 01 作业错误及上节回顾.html 2.40kb | | ├── 02 选择器的权重.html 1.52kb | | ├── 03 ps切图.html 0.64kb | | └── 04 扣丁学堂-填内容.html 8.93kb | ├──DAY 06 | | ├──images | | ├──视频 | | ├── 01 上节回顾.html 0.39kb | | ├── 02 今天的上课内容.html 0.77kb | | ├── 03 文字的颜色和文字的大小及字体.html 1.04kb | | ├── 04 首行缩进.html 1.39kb | | ├── 05 加粗和倾斜.html 1.66kb | | ├── 06 文本的水平对齐.html 1.56kb | | ├── 07 垂直对齐及行高.html 1.83kb | | ├── 08 案例讲解-导航.html 1.36kb | | ├── 09 修饰线和字间距和词间距字体简写.html 2.74kb | | ├── 10 列表相关的属性.html 1.34kb | | ├── 11 边框的属性.html 1.45kb | | └── 12 案例讲解-搜索框.html 1.14kb | ├──DAY 07 | | ├──images | | ├──视频 | | ├── 01 上节回顾.html 0.62kb | | ├── 02 背景相关的属性.html 2.31kb | | ├── 03 背景图固定.html 0.81kb | | ├── 04 案例讲解-背景固定.html 0.90kb | | ├── 05 支持哪几种图片格式.html 0.55kb | | ├── 06 精灵图.html 1.22kb | | ├── 07 浮动.html 1.71kb | | ├── 08 浮动的问题.html 1.16kb | | ├── 09 清浮动.html 0.81kb | | ├── 10 案例讲解-浮动.html 2.77kb | | └── 11 调试工具.html 3.21kb | ├──DAY 08 | | ├──images | | ├──视频 | | ├── 01 上节回顾.html 1.15kb | | ├── 02 今日上课内容.html 0.41kb | | ├── 03 盒模型-padding.html 2.04kb | | ├── 04 案例讲解-padding.html 3.46kb | | ├── 05 盒模型-margin.html 1.96kb | | ├── 06 margin的bug.html 1.08kb | | ├── 07 margin解析注意点.html 0.82kb | | ├── 08 案例讲解-建桥结构.html 0.57kb | | ├── 09 案例讲解-建桥内容 .html 1.99kb | | └──edu.css 1.71kb | ├──DAY 09 | | ├──练习 | | ├──视频 | | ├── 01 上节回顾.html 1.92kb | | ├── 02 今日上课内容.html 0.48kb | | ├── 03 溢出.html 1.96kb | | ├── 04 案例讲解-溢出.html 3.77kb | | ├── 05 溢出出现省略号.html 2.43kb | | ├── 06 溢出案例讲解.html 2.07kb | | ├── 07 元素类型分类.html 1.32kb | | ├── 08 元素类型的转换.html 2.02kb | | ├── 09 元素类型案例.html 1.42kb | | ├── 10 显示隐藏.html 1.21kb | | └── 11 案例讲解-二级菜单.html 1.62kb | ├──DAY 10 | | ├──images | | ├──视频 | | ├── 01 上节回顾.html 1.31kb | | ├── 02 今日上课内容.html 0.49kb | | ├── 03 行内块元素存在的问题.html 0.83kb | | ├── 04 垂直居中.html 1.38kb | | ├── 05 垂直居中案例讲解.html 1.47kb | | ├── 06 置换元素与非置换元素.html 0.56kb | | ├── 07 相对定位.html 1.91kb | | ├── 08 绝对定位.html 2.34kb | | ├── 09 定位案例讲解-插入图片上放内容.html 1.60kb | | ├──练习.jpg 324.57kb | | └──效果图.jpg 327.50kb | ├──DAY 11 | | ├──images | | ├──视频 | | ├── 01 上节回顾.html 1.23kb | | ├── 02 层叠顺序.html 0.89kb | | ├── 03 固定定位.html 2.18kb | | ├── 04 固定定位的居中.html 1.20kb | | ├── 05 案例讲解.html 2.76kb | | ├── 06 粘性定位.html 1.08kb | | ├── 07 透明.html 0.96kb | | ├── 08 案例讲解-定位.html 3.60kb | | ├── 09 锚点.html 2.35kb | | ├── 10 锚点-轮播图.html 1.37kb | | └──edu.css 3.37kb | ├──DAY 12 | | ├──视频 | | ├── 01 作业讲解及上节回顾.html 1.56kb | | ├── 02 今日上课内容.html 0.34kb | | ├── 03 表单的补充.html 2.54kb | | ├── 04 表单的标签.html 1.44kb | | ├── 05 table属性.html 1.75kb | | ├── 06 tr的属性.html 0.97kb | | ├── 07 td的属性.html 1.39kb | | ├── 08 案例讲解.html 3.62kb | | ├── 09 案例讲解-table.html 1.30kb | | ├── 10 table的css属性.html 1.48kb | | ├── 11 table的行分组和标题.html 2.36kb | | └── 12 表格的列分组.html 2.52kb | ├──DAY 13 | | ├──视频 | | ├── 01 上节回顾.html 1.02kb | | ├── 02 宽度自适应.html 1.87kb | | ├── 03 高度自适应.html 1.32kb | | ├── 04 最大最小宽高.html 1.03kb | | ├── 05 宽高自适应问题.html 0.75kb | | ├── 06 案例讲解.html 0.95kb | | ├── 07 高度塌陷.html 2.20kb | | ├── 08 伪对象.html 1.84kb | | ├── 09 隐藏.html 1.20kb | | ├── 10 首页.html 1.07kb | | ├── 11 header.html 0.67kb | | ├── 12 footer.html 0.61kb | | └──style.css 0.59kb | ├──DAY 14 | | ├──video | | ├──视频 | | ├── 01 上节回顾.html 1.72kb | | ├── 02 BFC概念.html 1.71kb | | ├──03 html5相关概念.html 0.48kb | | ├──04 h5新增的语义化标签.html 2.00kb | | ├── 05 视频.html 1.18kb | | ├── 06 音频.html 0.56kb | | ├── 07 表单.html 1.10kb | | ├── 08 表单的验证.html 1.24kb | | └── 09 表单的标签.html 0.91kb | ├──DAY 15 | | ├──font | | ├──视频 | | ├── 01 上节回顾.html 1.28kb | | ├── 02 属性选择器.html 1.16kb | | ├── 03 结构伪类选择器.html 2.35kb | | ├──04 nth-child和nth-of-type的区别.html 0.71kb | | ├── 05 根目标伪类及空伪类.html 0.55kb | | ├── 06 否定伪类选择器.html 1.13kb | | ├── 07 目标伪类选择器.html 0.62kb | | ├── 08 ui状态伪类选择器.html 1.18kb | | ├── 09 层级选择器.html 1.32kb | | ├──10 css3前缀及优雅降级和渐进增强.html 0.54kb | | ├── 11 盒子阴影.html 0.82kb | | ├── 12 文字阴影.html 0.97kb | | └── 13 字体库的引用.html 1.28kb | ├──DAY 16 | | ├──images | | ├──视频 | | ├── 01 上节回顾.html 0.79kb | | ├── 02 作业讲解-字体库.html 1.42kb | | ├── 03 今日目标.html 0.45kb | | ├── 04 英文设置.html 0.77kb | | ├── 05 英文数字换行.html 0.66kb | | ├── 06 圆角.html 1.12kb | | ├── 07 多张背景图.html 0.57kb | | ├── 08 背景图的大小.html 0.99kb | | ├── 09 线性渐变.html 1.24kb | | ├── 10 径向渐变.html 1.52kb | | ├── 11 过渡的属性.html 1.31kb | | ├── 12 过渡的运动形式.html 1.82kb | | ├── 13 过渡案例-导航.html 1.40kb | | └── 14 过渡的案例-移动.html 0.97kb | ├──DAY 17 | | ├──视频 | | ├── 01 上节回顾.html 0.70kb | | ├──02 2d的偏移.html 1.40kb | | ├── 03 偏移的案例.html 1.33kb | | ├── 04 旋转.html 1.48kb | | ├── 05 缩放.html 2.06kb | | ├── 06 缩放案例.html 0.96kb | | ├── 07 倾斜.html 2.19kb | | ├── 08 多属性一起用.html 0.59kb | | ├── 09 旋转案例-扇子.html 3.28kb | | ├── 10 原点的位置.html 0.88kb | | ├──11 3d-偏移.html 2.47kb | | ├──12 3d的旋转.html 2.80kb | | ├──13 3d的缩放.html 2.94kb | | ├──14 3d案例讲解-立方体.html 2.37kb | | ├── 15 动画.html 2.81kb | | └──style.css 0.59kb | ├──DAY 18 | | ├──视频 | | ├── 01 作业讲解-固定宽度轮播图.html 1.73kb | | ├── 02 作业讲解-相册.html 2.66kb | | ├── 03 上节回顾.html 0.94kb | | ├── 04 今日目标.html 0.40kb | | ├──05 css3盒模型.html 1.37kb | | ├──06 css3盒模型案例讲解.html 0.94kb | | ├──07 css3弹性盒模型转换.html 1.31kb | | ├──08 c3弹性的方向.html 1.37kb | | ├──09 c3弹性的换行.html 2.01kb | | ├──10 c3弹性的对齐.html 3.01kb | | ├──11 cs3弹性的堆栈伸缩行.html 3.44kb | | ├── 12 弹性案例讲解-骰子.html 1.54kb | | ├── 13 order顺序.html 1.50kb | | ├── 14 flex.html 1.97kb | | ├── 15 flex案例讲解-两栏自适应布局.html 1.27kb | | ├── 16 flex案例讲解-横向滚动.html 1.48kb | | └──style.css 0.59kb | ├──DAY 19 | | ├──images | | ├──taobao | | ├──视频 | | ├── 01 作业讲解.html 1.10kb | | ├── 02 上节回顾.html 0.85kb | | ├── 03 今日目标.html 0.33kb | | ├── 04 媒体查询.html 1.18kb | | ├──05 媒体查询2.html 1.89kb | | ├── 06 响应式布局案例.html 3.95kb | | ├── 07 移动端知识.html 1.29kb | | ├── 08 移动端布局分类.html 0.39kb | | ├── 09 单位.html 1.59kb | | ├── 10 单位转换.html 1.94kb | | ├──all.css 0.70kb | | ├──blue.css 0.05kb | | ├──red.css 0.05kb | | ├──style.css 0.59kb | | └──yellow.css 0.05kb | └──DAY 20 | | ├──font | | ├──images | | ├──视频 | | ├── 01 上节回顾.html 0.99kb | | ├── 02 移动端布局-千锋.html 6.01kb | | ├── 03 移动端布局-js.html 4.17kb | | ├──flexible.js 3.97kb | | └──style.css 0.61kb ├──02-二阶段JS | ├──JavaScript第10天 | | ├──代码 | | ├──视频 | | ├──资料 | | └──作业 | ├──JavaScript第11天 | | ├──代码 | | ├──视频 | | ├──资料 | | └──作业 | ├──JavaScript第12天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第 13 | | ├──代码 | | ├──视频 | | ├──资料 | | └──作业 | ├──JavaScript第14天 | | ├──代码 | | ├──视频 | | ├──资料 | | └──作业 | ├──JavaScript第15天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第16天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第17天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第18天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第19天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第1天 | | ├──代码 | | ├──视频 | | └──JavaScript第一天.md 10.54kb | ├──JavaScript第20天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第21天 | | ├──代码 | | └──视频 | ├──JavaScript第22天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第23天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第24天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第25天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第26天 | | ├──代码 | | └──视频 | ├──JavaScript第27天 | | ├──代码 | | └──视频 | ├──JavaScript第28天 | | ├──视频 | | └──资料 | ├──JavaScript第29天 | | ├──视频 | | └──资料 | ├──JavaScript第2天 | | ├──代码 | | ├──视频 | | ├──资料 | | └──作业 | ├──JavaScript第30天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第31天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第32天 | | ├──代码 | | ├──视频 | | └──资料 | ├──JavaScript第33天 | | ├──代码 | | └──视频 | ├──JavaScript第34天 | | ├──代码 | | └──视频 | ├──JavaScript第35天 | | ├──代码 | | └──视频 | ├──JavaScript第36天 | | ├──代码 | | └──视频 | ├──JavaScript第37天 | | ├──代码 | | └──视频 | ├──JavaScript第38天 | | ├──代码 | | └──视频 | ├──JavaScript第39天 | | ├──project 适合人群 前端开发初学者 希望提升前端技能的开发者 Vue3.0爱好者 学习收获 掌握HTML5/CSS3基础 精通Vue3.0框架 具备独立开发前端项目能力 祝您学习愉快！ 学有所成，前程似锦！
