HTML+CSS 零基础到深入18天

本套视频适合零基础并且对前端知识感兴趣的同学。内容涵盖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