缺什么补什么：别把“能看懂网页”当成“会写网页”
很多转岗或查漏补缺的同学，急着去学各种框架，结果连一个静态详情页都切不出来，调试时对着满屏的样式覆盖发懵。这门课解决的就是最底层的缺口：把“认识几个标签”升级为“能独立把设计图还原成规范网页”。它不碰框架，只逼你把盒模型、样式引入方式、选择器优先级这些地基砸实。如果你现在写页面还是到处堆内联样式，或者改一个颜色就导致整片布局错乱，说明基础体系是漏的，必须从这一步重新补。别假装都会，基础不牢，后面学动态脚本和组件化全是空中楼阁。这门课几乎零门槛，只要你熟悉电脑基本操作就能跟上，不需要任何编程底子。
先补核心规则：选择器与样式引入
资料包里的内容从行业背景和编辑器安装讲起，但别在环境配置上磨蹭太久，快速装好代码编辑器即可。建议先看网页和浏览器基础，搞懂渲染机制，接着直接切入核心的样式规则部分。重点啃透两块：一是选择器体系，彻底弄清标签、类、层级选择器的优先级，明白为什么你写的样式经常不生效；二是样式的引入方式与继承机制，理解行间样式为什么要提取到外部样式表。至于切图工具的使用，别当成单纯的软件教学，要跟着练手把设计稿里的尺寸、色值精准抠出来，这是还原页面的前提。看视频时遇到标签讲解，必须同步在编辑器里敲一遍代码，观察浏览器里的实时变化，千万别只用眼睛学。
看完拿什么检验：独立还原静态页
学完这门课，你得能独立干完一件事：拿到一张静态网页设计图，能自己拆分头部、导航、内容区等模块，用合理的语义化标签搭出骨架，再用外部样式表把排版、文字、背景还原出来，且代码不能乱成一团。检验标准很简单，你能不能独立写出一个结构清晰、样式可复用、没有冗余内联代码的展示页。练习时，资料包里的切图素材和样式练习要配合着做：先照着源码写一遍，再删掉自己默写，卡住的地方就是真实盲区。别去死记硬背所有标签属性，重点练布局拆分思维和样式调试能力，这才是你后续进阶前真正的底气。
课程目录
1-1 [前端介绍和行业现状分析] 前端介绍和行业现状分析 (09:17) 1-2 [前端介绍和行业现状分析] 编辑器的安装和使用 (04:51) 1-3 [前端介绍和行业现状分析] 认识网页和浏览器 (03:51) 1-4 [前端介绍和行业现状分析] HTML简介和基础标签 (11:37) 1-5 [前端介绍和行业现状分析] CSS简介和基础样式 (03:46) 1-6 [前端介绍和行业现状分析] 切图工具的安装和使用 (09:31) 1-7 [前端介绍和行业现状分析] 前端学习的正确姿势 (04:07) 2-1 [CSS选择器] 认识CSS样式 (03:34) 2-2 [CSS选择器] CSS文字样式 (02:50) 2-3 [CSS选择器] CSS继承 (02:47) 2-4 [CSS选择器] 提取行间样式 (05:46) 2-5 [CSS选择器] CSS样式引入 (04:34) 2-6 [CSS选择器] 简单选择器 (06:06) 2-7 [CSS选择器] 进阶选择器 (05:37) 2-8 [CSS选择器] 权重问题 (04:30) 3-1 [CSS布局] CSS元素类型 (06:21) 3-2 [CSS布局] 标准盒子模型 (06:56) 3-3 [CSS布局] 内边距实际应用 (05:48) 3-4 [CSS布局] 外边距实际应用 (03:51) 3-5 [CSS布局] CSS reset (04:14) 3-6 [CSS布局] margin合并和塌陷 (06:25) 3-7 [CSS布局] 元素居中 (05:53) 3-8 [CSS布局] 语义化 (11:30) 3-9 [CSS布局] 浮动介绍 (06:23) 3-10 [CSS布局] 清除浮动 (05:21) 3-11 [CSS布局] 浮动三要素 (02:04) 3-12 [CSS布局] 浮动实际应用 (17:22) 3-13 [CSS布局] 定位和定位的特点 (13:30) 3-14 [CSS布局] 定位的实际应用 (06:29) 3-15 [CSS布局] 层级的应用 (05:56) 3-16 [CSS布局] 定位综合应用-购物车 (10:44) 3-17 [CSS布局] 遮罩层使用 (04:24) 3-18 [CSS布局] 滑动门 (05:38) 3-19 [CSS布局] 自适应高度的透明层 (04:37) 3-20 [CSS布局] 图片很居中 (02:30) 3-21 [CSS布局] CSS图片精灵 (01:48) 3-22 [CSS布局] 网站综合布局 (14:30) 3-23 [CSS布局] 综合案例 (11:10) 4-1 [表单&表格] 表单简介 (01:56) 4-2 [表单&表格] 常用表单标签介绍 (05:03) 4-3 [表单&表格] 表单美化 (05:40) 4-4 [表单&表格] 表单应用-登录注册 (09:11) 4-5 [表单&表格] 表单提交要注意的问题 (05:03) 4-6 [表单&表格] 表格简介 (02:43) 4-7 [表单&表格] 表格样式 (03:39) 4-8 [表单&表格] 表格应用 (03:25) 5-1 [预处理器] 什么叫预处理器 (04:45) 5-2 [预处理器] sass的安装和配置 (06:19) 5-3 [预处理器] sass入门 (12:35) 5-4 [预处理器] less的安装和配置 (02:20) 5-5 [预处理器] less的使用 (06:51) 5-6 [预处理器] 强悍的前端开发框架-Bootstrap (02:16) 5-7 [预处理器] Bootstrap设计思路 (03:43) 5-8 [预处理器] 响应式布局简介 (01:51) 5-9 [预处理器] Bootstrap综合应用 (05:52) 6-1 [兼容性] CSS hack与条件注释 (02:17) 6-2 [兼容性] 各种CSS兼容性举例 (02:42) 7-1 [电商综合案例] 电商网站综合案例-头部导航部分 (17:31) 7-2 [电商综合案例] 电商网站综合案例-快捷入口 (09:02) 7-3 [电商综合案例] 电商网站综合案例-智能硬件 (06:09) 8-1 [新闻官网综合案例] 新闻网站-顶部导航 (05:51) 8-2 [新闻官网综合案例] 新闻网站-banner部分 (02:36) 8-3 [新闻官网综合案例] 新闻网站-导航列表 (03:26) 8-4 [新闻官网综合案例] 新闻网站-推荐列表 (05:06) 8-5 [新闻官网综合案例] 新闻网站-主体 (14:04)
