2017HTML5+CSS3 从入门到项目实战 199元

2017 年录制的 HTML5+CSS3 课程，放在今天还有没有翻的价值？先说结论：有，但得挑着看。这套课的核心卖点不是"新"，而是它把 PC 端静态页面的基本功压得很实——盒模型、浮动清除、定位层叠、精灵图、表单样式重置这些老手艺，恰恰是现在很多速成班直接跳过、导致后期调布局全靠猜的部分。199 元买一套成体系的录播，性价比取决于你会不会拆。

课纲里真正值钱的是哪几段

整套内容可以粗分成三块：语法基础、PC 端项目、移动端与 H5 新特性。语法基础部分节奏偏慢，有编程经验的人基本可以倍速甚至跳过，重点是看它讲浮动和定位时的演示思路——这部分各家讲法差异最大，值得比对。

PC 端项目实操是这套课的主体。京东、淘宝、苏宁这类综合电商首页的结构，是极好的练习素材：顶部导航、多级下拉菜单、轮播区、楼层商品墙、页脚信息区，几乎覆盖了传统布局的全部典型场景。建议不要顺着视频抄代码，而是先自己拉出结构，卡住了再回去看对应章节，不然容易变成"看得懂、写不出"。

移动端那部分要分清主次。2017 年的移动布局主流还是 rem 加媒体查询、百分比加弹性盒，viewport 适配、1px 边框、点击 300ms 延迟这些问题在当时是硬骨头，现在多数已被 vw/vh 和现代框架消化掉了。学它的价值在于理解适配原理，而不是照搬方案。

哪些章节值得精看，哪些可以快进

• 精看：盒模型与 margin 塌陷、BFC 触发条件、清除浮动的几种写法对比、定位与 z-index 层叠上下文。这几处是后期排查布局问题的根。
• 精看：大型页面从切图到成稿的完整流程，包括结构分层、类名组织、公共样式抽离。这是"能写单页"和"能接项目"的分水岭。
• 精看：常见网页特效的实现思路，比如轮播、选项卡、吸顶导航的逻辑拆解，重点看思路而不是抄代码。
• 快进：编辑器安装、基础标签逐个讲解、CSS 属性字典式罗列，这些查文档比看视频快。
• 有选择地看：H5 新语义标签、表单新类型、canvas 入门，了解即可，真要用再深入。

资料包建议按用途拆成三份

别把整包资料当成一个整体。第一份是源码工程，按项目分开放，用来对照自己写的结构和命名差异，这是最容易被浪费、也最有价值的资源。第二份是切图素材和设计稿，可以脱离原课程单独拿来练手，自己重新切一遍比看十遍视频有用。第三份是课件与笔记类文档，只当作查阅索引，遇到具体问题时回去定位，不要从头读到尾。

另外提醒一点：这套课录制于 2017 年，配套代码里大概率没有构建工具、没有预处理器，也没有现代 CSS 布局方案。学的时候要有意识地在旧写法旁边标注"现在会怎么写"，比如浮动布局对照 flex/grid，rem 方案对照 vw 方案——这种对照本身就是很好的复习。

适合谁，不适合谁

适合完全零基础、想把 PC 端页面结构打扎实的人，适合需要一套完整项目素材来练手的人，也适合已经会用框架、但布局底层概念含糊、想回头补课的人。

不适合指望学完直接对接现代前端工程化的人。这套课不讲打包、不讲组件化、不讲响应式框架，它的定位是静态页面与交互特效的基本功训练，把它当成地基而不是全部，心态就对了。