2017最新版DIV+CSS视频教程 后盾网DIV+CSS入门精讲课程30集培训视频教程

后盾网这套 2017 年的 DIV+CSS 课程，放在今天看有点尴尬：它讲的浮动、定位、盒模型，仍然是前端面试里绕不过去的基本功，但整套 30 集是按"入门培训"节奏录的，不是那种看完就能直接接活的速成班。值不值得花时间，取决于你是想补齐概念、还是想找一套完整的布局案例跟着敲。

这门课真正有价值的部分在哪

从内容组织看，后盾网这套课的核心是"用 DIV+CSS 完成整页布局"这条主线，而不是零散地讲属性。2017 年那个时间点，Flexbox 已经在主流浏览器铺开，但国内培训体系普遍还是先教浮动和定位——因为旧项目和大量企业站点的代码里全是这套写法。所以别指望在这里学到现代布局方案，它的定位是"读懂并写出传统流式布局"。

对自学者来说，最有含金量的其实是课程中段关于盒模型计算、清除浮动、层叠与定位这几块。这几处能讲透的免费教程不多，多数只给结论不给推导。如果你之前是照着模板抄 CSS、遇到错位就靠试数值硬凑，这部分值得逐帧看。

哪些章节可以快进，哪些要精看

• 开头的开发环境、编辑器安装、基础标签介绍：如果已经写过 HTML，可以倍速甚至跳过，这类内容时效性差，2017 年推荐的编辑器现在多半换过好几轮了。
• 选择器与样式引入方式：快看一遍确认没有知识盲区即可，优先级和继承部分建议慢放。
• 盒模型、浮动、定位三块：精看。这是整套课的地基，也是后面所有案例的支撑。
• 综合布局案例：按自己的节奏跟做，遇到卡壳再回看对应小节，不要一次性全看完再动手。

资料包怎么拆开用

30 集视频堆在一起，最容易犯的错是当成电视剧一口气刷完。更实用的拆法是按"概念—案例—复盘"三轮来消化：第一轮只挑盒模型、浮动、定位这几节,把概念过一遍;第二轮挑一个完整布局案例,暂停视频自己先写,写完再对照;第三轮把其余案例当练习题,只看成品不看过程,自己复现。配套的章节笔记适合放在第二轮之后用,先自己整理一遍再看现成的,记忆点会更牢。

另外要提醒一点：这套课没有涉及响应式和 Flexbox，学完别以为布局就到头了。把它当成"传统布局的补课材料"更合适，学完后需要再找现代布局的内容补上，否则写出来的页面在移动端会很难维护。

适合谁，不适合谁

适合的人群：有 HTML 基础、写过一点 CSS 但布局全靠试、想系统搞懂浮动和定位原理的人；或者需要维护老项目、得看懂 table 转 div 那批历史代码的人。

不太适合：完全零基础、连标签是什么都不清楚的新手，这套课起点不算低；以及已经熟练使用 Flexbox 和 Grid、只想提升现代布局能力的人，学它性价比不高。

按分类归在软考考证下其实有点勉强——它本质是前端基础课，跟考证的关系不大。如果你是冲着考证来的,这门课只能算加分项,不是应试主线。