正版资源HTML+CSS 零基础到深入18天
《HTML+CSS 零基础到深入18天》本套视频适合零基础并且对前端知识感兴趣的同学。内容涵盖HTML基础、标签、CSS 选择器、盒子模型、浮动、定位、图片整合、PS 切图等页面相关常用技术。 通过对该视频的学习，可以熟练掌握PC端的固定布局。【技能收获】学完可掌握：Vue / 前端工程化。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：前端开发工程师、全栈工程师
这套《HTML+CSS 零基础到深入18天》的资料定位很明确：面向完全没有前端基础、但准备动手写页面的人。它不讲框架，不碰工程化构建，重点落在浏览器里那套最原始也最耐用的东西——用 HTML 搭结构，用 CSS 控制排版。对已经写过 Vue 或 React 的开发者来说，它同样有价值：很多“样式为什么不起作用”的问题，根源都在这部分基础里。
技术栈与内容边界
整套内容围绕两条线展开。一条是 HTML：文档结构、常用标签的语义与嵌套规则、表单元素的基本用法。另一条是 CSS：选择器与优先级、盒模型（content / padding / border / margin）、浮动与清除浮动、定位（static / relative / absolute / fixed）、背景与图片整合、以及 PS 切图配合页面还原。这些正是 PC 端固定布局所需要的全部核心机制。
需要注意它的边界：不涉及 Flexbox 与 Grid 的系统讲解，也不涉及响应式、移动端适配、预处理器和打包工具。这不是缺陷，而是取舍——先让人把“文档流 + 盒模型 + 定位”这条主线吃透，再看现代布局方案，理解成本会低很多。
项目结构与组织方式
资料按天拆分，节奏是典型的“概念 → 演示 → 小练习”。每天的量不大，适合按天推进而不是一次性刷完。配套的章节笔记是这套资料里比较实用的部分：它把当天涉及的选择器、属性、易错点做了归纳，可以当成写代码时的速查表，而不是看完就丢的讲义。
从复用角度看，真正值得反复调用的不是视频本身，而是这些笔记加上你自己复现出来的 Demo。建议在本地按天建目录，每一天一个独立文件夹，HTML 与 CSS 分文件写，不要图省事全塞进 style 属性里。这个习惯会直接影响后面接手真实项目时的可维护性。
可复用的模块与练习方式
PC 端固定布局的页面，拆开来看无非几类模块：顶部导航、轮播/横幅区、内容分栏、列表卡片、页脚。这套资料里的切图练习基本都落在这些结构上。比较有效的做法是，每学完一个阶段，就用同一套切图素材重新写一遍，但换一种实现思路：
- 先用浮动 + 清除浮动实现分栏，再用定位重做一遍，对比两者的文档流表现差异；
- 把重复出现的按钮、卡片样式抽成独立的 class，而不是给每个元素单独写一套；
- 刻意练习盒模型计算，先手算宽度再写代码，用开发者工具核对是否一致。
这些练习的价值不在“做完”，而在于你能说清楚每个元素为什么占这个位置、为什么换行、为什么被覆盖。能解释清楚，才算真的掌握。
自学路径与进度建议
18 天的划分可以按三段来理解：前段打 HTML 标签与 CSS 选择器的基础，中段集中攻盒模型、浮动、定位这三块最容易卡住的内容，后段进入切图与整页还原。中段是最需要放慢速度的地方，建议每学完一个机制就暂停，自己写一个最小可运行页面验证，而不是跟着敲完就往下走。
如果时间有限，可以压缩前段，但不要跳过中段。浮动和定位没弄明白，后面整页还原会变成“照着抄能对、自己写就崩”的状态。学完整套之后，找一个真实的静态页面（比如某个官网首页）作为对照目标，不看源码独立还原一次，再打开开发者工具对比差异。这一步做完，PC 端固定布局基本就过关了。
之后再看 Flex 和 Grid 时，你会清楚地知道它们各自解决了旧方案的哪些痛点，而不是只记住几行属性值。
本套视频适合零基础并且对前端知识感兴趣的同学。内容涵盖HTML基础、标签、CSS 选择器、盒子模型、浮动、定位、图片整合、PS 切图等页面相关常用技术。 通过对该视频的学习，可以熟练掌握PC端的固定布局。
课程推荐
《HTML+CSS 零基础到深入18天》本套视频适合零基础并且对前端知识感兴趣的同学。内容涵盖HTML基础、标签、CSS 选择器、盒子模型、浮动、定位、图片整合、PS 切图等页面相关常用技术。 通过对该视频的学习，可以熟练掌握PC端的固定布局。【技能收获】学完可掌握：Vue / 前端工程化。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：前端开发工程师、全栈工程师、Web 应用开发。前端岗位仍看重工程化与项目完整度，企业级仿站/专栏类项目可直接写入作品集，有助于从中级向高级前端过渡。 若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。
视频目录（539 节）
课件 / 课件
* 01_课程简介.pptx
* 02_HTML简介.pptx
* 03_CSS简介.pptx
* 04_盒子模型.pptx
* 05_网页的布局.pptx
* 06_字体和文本属性.pptx
* 07_背景.pptx
* 08_表格.pptx
* 09_表单.pptx
* 10_弹性盒模型.pptx
day01 / day01 / source
* demo01.html
* demo02.html
* demo03.html
* demo04.html
* demo05.html
* demo06.html
day01 / day01 / video
* 01.课程简介.mp4
* 02.网页的简介.mp4
* 03.html简介.mp4
* 04.扩展名的问题.mp4
* 05.HTML注释.mp4
* 06.zeal文档阅读器.mp4
* 07.手动导入文档.mp4
* 08.元素的属性.mp4
* 09.brackets的安装.mp4
* 10.安装插件.mp4
* 11.emmet插件.mp4
* 12.文档声明和meta标签.mp4
* 13.乱码的问题.mp4
* 14.常用标签和实体.mp4
day02 / day02 2019-07-22 / note / 餐厅练习
* .gitignore
* index.html
* jquery.js
* levels.js
* LICENSE
* README.md
* restaurant.js
* style.css
day02 / day02 2019-07-22 / note / 插件
* brackets-autosaver-1.1.6.zip
* brackets-beautify-2.9.2.zip
* brackets-emmet-1.2.2.zip
* brackets-minimap-3.2.6.zip
* ivogabe.icons-1.5.7.zip
day02 / day02 2019-07-22 / note / 音视频
* audio.mp3
* audio.ogg
* flower.mp4
* flower.webm
* video.mp4
* video.webm
day02 / day02 2019-07-22 / note / img
* 动图
* gif
* img
* jpg
* png
* webp
day02 / day02 2019-07-22 / source
* 01.复习.html
* 02.标签.html
* 03.语义化标签.html
* 04.语义化标签.html
* 05.图片标签.html
* 07.路径.html
* 08.内联框架.html
* 09.音频和视频.html
* 10.视频标签.html
day02 / day02 2019-07-22 / source / hello
* 06.路径.html
day02 / day02 2019-07-22 / source / src
* audio.mp3
* audio.ogg
* flower.mp4
* flower.webm
* video.mp4
* video.webm
day03 / day03 / note / 餐厅练习
* .gitignore
* index.html
* jquery.js
* levels.js
* LICENSE
* README.md
* restaurant.js
* style.css
day03 / day03 / source
* 01.复习.html
* 02.列表.html
* 03.样式（style的三种方式）.html
* 04.样式.html
* 05.样式.html
* 06.选择器.html
* 07.选择器.html
* 08.选择器.html
* 09.伪类选择器.html
* 10.a的伪类.html
* style.css
day03 / day03 / video
* 01.复习.avi
* 02.列表.avi
* 03.列表的补充.avi
* 04.CSS简介.avi
* 05.CSS样式表.avi
* 06.brackets的快速编辑.avi
* 07.css基本语法.avi
* 08.常用的选择器.avi
* 09.交集选择器.avi
* 11.父子兄弟选择器.avi
* 12.伪类简介.avi
* 13.伪类选择器.avi
* 14.a的伪类.avi
day04 / day04 2019-07-24 / source
* 01.复习.html
* 02.属性选择器.html
* 03.伪元素.html
* 04.继承.html
* 05.选择器的权重.html
* 06.单位.html
* 07.颜色.html
* 08.盒子模型.html
* 09.边框.html
* 10.内边距.html
* 11.外边距.html
* 12.水平方向布局.html
day04 / day04 2019-07-24 / video
* 01.复习.avi
* 02.属性选择器.avi
* 03.伪元素.avi
* 04.样式的继承.avi
* 05.选择器的权重.avi
* 06.像素.avi
* 07.颜色.avi
* 08.颜色.avi
* 09.盒子模型-边框.avi
* 10.边框.avi
* 11.盒子模型-内边距.avi
* 12.盒子模型-外边距.avi
* 13.水平方向的布局.avi
day05 / day05 / note
* normalize.css
* reset.css
day05 / day05 / source
* .project
* 01.复习.html
* 02.垂直方向布局.html
* 03.溢出.html
* 04.外边距.html
* 05.父子元素的外边距折叠.html
* 06.文档流.html
* 07.行内元素的盒模型.html
* 08.display.html
* 09.visibility.html
* 10.练习.html
* 11.默认样式.html
* 12.块和行内.html
* 13.练习1.html
* 14.练习2.html
* img
day05 / day05 / source / css
* normalize.css
* reset.css
day05 / day05 / video
* 01.复习.mp4
* 02.盒模型.mp4
* 03.垂直方向的布局.mp4
* 04.溢出内容的处理.mp4
* 05.外边距的折叠.mp4
* 06.文档流.mp4
* 07.display.mp4
* 09.visibility和二级菜单.mp4
* 10.浏览器的默认样式.mp4
* 11.嵌套关系.mp4
* 12.练习1.mp4
* 13.练习2.mp4
day06 / day06 2019-07-27 / source
* 01.练习的问题.html
* 02.外边距的折叠.html
* 03.练习.html
* 04.圆角.html
* 05.轮廓和阴影.html
* 06.浮动.html
* 07.导航菜单.html
* 08.导航菜单.html
* 09.浮动.html
* 10.网页的布局.html
* 11.高度塌陷.html
* 12.clear.html
* 13.高度塌陷.html
day06 / day06 2019-07-27 / video
* 01.练习的问题.avi
* 02.复习.avi
* 03.圆角.avi
* 04.轮廓和阴影.avi
* 05.浮动简介.avi
* 06.浮动的特点.avi
* 07.导航条练习.avi
* 08.导航条的练习.avi
* 09.简单的布局.avi
* 10.BFC解决高度塌陷.avi
* 11.高度塌陷问题的最终方案.avi
day07 / day07 / note / 字体
* ZCOOLKuaiLe-Regular.ttf
* ZCOOLQingKeHuangYou-Regular.ttf
* ZCOOLXiaoWei-Regular.ttf
day07 / day07 / note / font-awesome-4.7.0 / css
* font-awesome.css
* font-awesome.min.css
day07 / day07 / note / font-awesome-4.7.0 / fonts
* fontawesome-webfont.eot
* fontawesome-webfont.svg
* fontawesome-webfont.ttf
* fontawesome-webfont.woff
* fontawesome-webfont.woff2
* FontAwesome.otf
day07 / day07 / note / font-awesome-4.7.0 / less
* animated.less
* bordered-pulled.less
* core.less
* fixed-width.less
* font-awesome.less
* icons.less
* larger.less
* list.less
* mixins.less
* path.less
* rotated-flipped.less
* screen-reader.less
* stacked.less
* variables.less
day07 / day07 / note / font-awesome-4.7.0 / scss
* _animated.scss
* _bordered-pulled.scss
* _core.scss
* _fixed-width.scss
* _icons.scss
* _larger.scss
* _list.scss
* _mixins.scss
* _path.scss
* _rotated-flipped.scss
* _screen-reader.scss
* _stacked.scss
* _variables.scss
* font-awesome.scss
day07 / day07 / source / css
* font-awesome.css
* font-awesome.min.css
day08 / day08 / source / fa / css
* all.css
* all.min.css
* brands.css
* brands.min.css
* fontawesome.css
* fontawesome.min.css
* regular.css
* regular.min.css
* solid.css
* solid.min.css
* svg-with-js.css
* svg-with-js.min.css
* v4-shims.css
* v4-shims.min.css
day08 / day08 / source / fa / webfonts
* fa-brands-400.eot
* fa-brands-400.svg
* fa-brands-400.ttf
* fa-brands-400.woff
* fa-brands-400.woff2
* fa-regular-400.eot
* fa-regular-400.svg
* fa-regular-400.ttf
* fa-regular-400.woff
* fa-regular-400.woff2
* fa-solid-900.eot
* fa-solid-900.svg
* fa-solid-900.ttf
* fa-solid-900.woff
* fa-solid-900.woff2
day08 / day08 / source / iconfont
* iconfont.css
* iconfont.eot
* iconfont.js
* iconfont.svg
* iconfont.ttf
* iconfont.woff
* iconfont.woff2
day08 / day08 / source / iconfont2
* iconfont.css
* iconfont.eot
* iconfont.js
* iconfont.svg
* iconfont.ttf
day09 / day09 / note
* Pinball - Grid Style Blog PSD - cssauthor.com.psd
* ui_login.psd
day09 / day09 / source
* 01.复习.html
* 02.背景.html
* 03.练习.html
* 04.背景图片.html
* 05.按钮练习.html
* 06.背景的样式.html
* 07.背景的简写属性.html
* 08.表格.html
* 09.表格.html
* 10.表格.html
* 11.表单.html
* btn
* img
* target.html
day09 / day09 / source / 图片
* 按钮
* 大黄猫
day09 / day09 / source / css
* style.css
day09 / day09 / video
* 01.复习.avi
* 02.ps安装.avi
* 03.ps的基本使用.avi
* 04.背景(1).avi
* 05.练习.avi
* 06..背景(2).avi
* 07.雪碧图.avi
* 08.雪碧图的制作.avi
* 09.表格的简介.avi
* 10.表格的样式.avi
* 11.表单的简介.avi
* 12.ps的切图.avi
day10 / day10 / source
* 01.复习.html
* 02.测试工具.html
* 03.表格的练习.html
* 04.登录.html
* 05.form表单.html
* 06.表单项.html
* img
* target.html
day10 / day10 / source / font / css
* all.css
* all.min.css
* brands.css
* brands.min.css
* fontawesome.css
* fontawesome.min.css
* regular.css
* regular.min.css
* solid.css
* solid.min.css
* svg-with-js.css
* svg-with-js.min.css
* v4-shims.css
* v4-shims.min.css
day10 / day10 / source / font / webfonts
* fa-brands-400.eot
* fa-brands-400.svg
* fa-brands-400.ttf
* fa-brands-400.woff
* fa-brands-400.woff2
* fa-regular-400.eot
* fa-regular-400.svg
* fa-regular-400.ttf
* fa-regular-400.woff
* fa-regular-400.woff2
* fa-solid-900.eot
* fa-solid-900.svg
* fa-solid-900.ttf
* fa-solid-900.woff
* fa-solid-900.woff2
day10 / day10 / video
* 01.复习.mp4
* 02.安装webstorm.mp4
* 03.webstorm的基本使用.mp4
* 04.表格练习.mp4
day11 / day11 / source / day11
* 01.表单.html
* 02.边框的使用.html
* 03.下拉菜单的结构.html
* target.html
day11 / day11 / source / mi / css
* base.css
* index.css
* reset.css
day11 / day11 / source / mi / font
* css
* webfonts
day11 / day11 / source / mi / img
* banner
day11 / day11 / source / mi
* index.html
day11 / day11 / video
* 01.表单补充.avi
* 02.项目搭建.avi
* 03.顶部工具条.avi
* 04.二维码下拉.avi
* 05.下拉的结构和动画.avi
* 06.购物车的下拉.avi
* 07.头部的logo.avi
* 08.行内块的问题.avi
* 09.初步完成主导航条.avi
* 10.购物车的问题.avi
* 11.左侧导航条.avi
day12 / day12 / source / day12
* 01.问题.html
day12 / day12 / source / day12 / iconfont
* iconfont.css
* iconfont.eot
* iconfont.js
* iconfont.svg
* iconfont.ttf
* iconfont.woff
* iconfont.woff2
day12 / day12 / source / mi / css
* base.css
* index.css
* reset.css
day12 / day12 / source / mi / font
* css
* webfonts
day12 / day12 / source / mi / img
* banner
day12 / day12 / source / mi
* index.html
day12 / day12 / video
* 01.顶部的下拉层.avi
* 02.右侧搜索框.avi
* 03.搜索框bug.avi
* 04.问题补充.avi
* 05.banner1.avi
* 06.banner2.avi
* 07.右侧菜单.avi
* 08.完成下边的服务栏.avi
day13 / day13 / note
* cube
* xue.pptx
* yuicompressor-2.4.8.jar
day13 / day13 / source / day13
* 01.过渡.html
* 02.小练习.html
* 03.动画.html
* 04.动画.html
* 05.时间函数.html
* 06.动画的问题.html
* 07.关键帧.html
* 08.变形.html
* 09.练习.html
* 10.练习.html
* cube
* img
day13 / day13 / source / day13 / css
* style.css
* style.min.css
day13 / day13 / video
* 01.压缩项目代码.avi
* 02.其他的压缩代码的方式.avi
* 03.过渡.avi
* 04.练习.avi
* 05动画.avi
* 06.时间函数.avi
* 07.动画属性.avi
* 08.关键帧.avi
* 09.变形.avi
* 10.练习.avi
* 11.练习bug修改.avi
* 12.立方体动画.avi
day14 / day14
* source
day14 / day14 / video
* 01.复习.avi
* 02.其他的动画效果.avi
* 03.问题.avi
day15 / day15 / note
* less.min.js
* node-v10.16.1-x64.msi
day15 / day15 / source / day15
* 01.练习的问题.html
* 02.华为商城.html
* 03.布局.html
* 04.左右固定中间自适应.html
* 05.左右固定中间自适应.html
* 06.左边固定中间自适应.html
* 07.渐变背景.html
* 08.径向渐变.html
* 09.CSS.html
* img
day15 / day15 / source / day15 / css
* style.css
* style.css.map
* style.less
* style.min.css
day15 / day15 / video
* 01.问题补充.avi
* 02.左侧固定中间自适应.avi
* 03.双飞翼和圣杯.avi
* 04.线性渐变.avi
* 05.径向渐变.avi
* 06.命令行的简介.avi
* 07.path环境变量介绍.avi
* 08.安装nodejs.avi
* 09.配置NPM和less.avi
* 10.less简介.avi
* 11.less和webstorm整合.avi
day16 / day16 / source / day16
* 01.less的基本使用.html
* 02.弹性盒.html
* 03.弹性盒.html
* 04.导航菜单.html
* 05.导航菜单.html
* 06.弹性盒.html
* 07.弹性盒.html
* 08.淘宝导航.html
* 09.移动端的页面.html
* img
day16 / day16 / source / day16 / css
* demo01.css
* demo01.css.map
* demo01.less
* demo01.min.css
* demo02.css
* demo02.css.map
* demo02.less
* demo02.min.css
* demo03.css
* demo03.css.map
* demo03.less
* demo03.min.css
* style.css
* style.css.map
* style.less
* style.min.css
day16 / day16 / source / day16 / script
* less.min.js
day16 / day16 / video
* 01.less的基本使用.avi
* 02.安装less文档.avi
* 03.less中的变量.avi
* 04.mixins.avi
* 05.mixins的参数.avi
* 06.其他语法..avi
* 07.弹性盒简介.avi
* 08.弹性元素的对齐.avi
* 09.浮动版导航条.avi
* 10.弹性元素的属性.avi
* 11.taobao导航条.avi
* 12.视口.avi
day17 / day17 / day17 / source / day17
* 01.复习.html
* 02.视口.html
* 03.移动端页面.html
* css
* font
* img
* index.html
day17 / day17 / day17 / video
* 01.复习.avi
* 02.视口.avi
* 03.vw适配.avi
* 04.移动端页面头部.avi
* 05.banner.avi
* 06.项目问题.avi
* 07.课程列表头部.avi
* 08.完成课程列表.avi
* 09.调试程序.avi
day17 / day17 / source / day17
* 01.复习.html
* 02.视口.html
* 03.移动端页面.html
* index.html
day17 / day17 / source / day17 / css
* style.css
* style.css.map
* style.less
* style.min.css
day17 / day17 / source / day17 / font
* css
* webfonts
day17 / day17 / source / day17 / img
* banner
day18 / day18 / source / day18
* 01.test.html
* 02.媒体查询.html
* 03.媒体查询.html
* 04.美图手机.html
* 05.小按钮.html
* 06.CSS的前缀.html
* index.html
day18 / day18 / source / day18 / css
* meitu.css
* meitu.css.map
* meitu.less
* meitu.min.css
* reset.css
* reset.min.css
* style.css
* style.css.map
* style.less
* style.min.css
* style.min.min.css
* test.css
* test.min.css
day18 / day18 / source / day18 / font
* css
* webfonts
day18 / day18 / source / day18 / img
* banner
day18 / day18 / video
* 01.安装模拟器.avi
* 02.安装模拟器2.avi
* 03.媒体查询简介.avi
* 04.媒体查询.avi
* 05.美图手机头部结构.avi
* 06.完成移动端导航条样式.avi
* 07.完成响应式导航条.avi
配套笔记（15 份 PDF）
day01 / day01 / note
* day01.pdf
day02 / day02 2019-07-22 / note
* 笔记.pdf
day03 / day03 / note
* 第三天.pdf
day04 / day04 2019-07-24 / note
* day04.pdf
day05 / day05 / note
* 第五天.pdf
day06 / day06 2019-07-27 / note
* 第六天.pdf
day07 / day07 / note
* day07.pdf
day08 / day08 / note
* day08.pdf
day09 / day09 / note
* day09.pdf
day10 / day10 / note
* day10.pdf
day13 / day13 / note
* day13.pdf
day14 / day14 / note
* day14.pdf
day15 / day15 / note
* day15.pdf
day17 / day17 / day17 / note
* day17.pdf
day17 / day17 / note
* day17.pdf
