人工精选HTML+CSS 零基础到深入18天
这套《HTML+CSS 零基础到深入18天》，名字里虽然写着"18天"，但真正的问题不是几天能学完，而是它能不能帮你把"看得懂网页"变成"自己写得出网页"。下面我按场景、成果、基础门槛和资料用法拆开说。 它解决的是哪个具体工作场景 如果你现在的工作需要接触页面，比如运营改个活动页、设计想把自己出的图
会员可免费下载本篇月会员可免费领取。
开通会员 ›会员 · 按档位
游客按标价购买，不享受上表折扣。
支付成功后自动发放网盘链接，链接失效可找客服免费补
这套《HTML+CSS 零基础到深入18天》，名字里虽然写着"18天"，但真正的问题不是几天能学完，而是它能不能帮你把"看得懂网页"变成"自己写得出网页"。下面我按场景、成果、基础门槛和资料用法拆开说。
它解决的是哪个具体工作场景
如果你现在的工作需要接触页面，比如运营改个活动页、设计想把自己出的图还原成网页、转行者想先摸一摸前端到底在干什么，那这门课的落点很明确：把一张 PC 端的设计稿，用 HTML 搭结构、用 CSS 调样式，最后做出一个固定宽度的静态页面。这是前端最底层的一环，也是很多人卡住的地方——不是不会某个标签，而是拿到一张图不知道从哪下手。
课程覆盖的正是这条主线：HTML 基础与常用标签、CSS 选择器、盒子模型、浮动、定位，再到图片整合和 PS 切图。这些不是孤立的考点，而是还原一个页面时按顺序会遇到的东西。尤其是浮动和定位，很多人自学时反复看概念却不会用，只有放进"把这几个盒子排成设计稿那样"的任务里，才会真正理解。
学完你能独立做什么
最直接的检验标准：给你一张常见的企业站首页或专题页设计稿，你能不依赖框架，用纯 HTML + CSS 把它还原出来，宽度自适应、结构清晰、浏览器里不塌不乱。具体包括——能判断一个模块该用什么标签、能用盒子模型算清间距、能用浮动或定位处理多列和多层结构、能自己从 PSD 里切出需要的图并用到页面上。
需要说清楚的是，这门课的目标是 PC 端固定布局，不涉及响应式、移动端适配，也不讲 Vue 和工程化这些后续内容。它的位置是打地基，不是一步到岗。把这一步学扎实，再去接触框架和工具链，会顺很多；跳过它直接学框架，往往会在样式细节上持续吃亏。
什么基础适合看，什么基础不建议
- 适合：完全零基础、但愿意动手敲代码的人；设计和运营岗位想自己能改页面的人；转行前想先验证一下自己是否坐得住、学得进的人。
- 不太适合：已经能独立还原静态页面、想直接补响应式或框架的人，这套内容对你偏简单。
- 心态上要接受一件事：看视频和写代码是两回事。只跟着看，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
同类课程
和你正在看的这门一个方向
前端开发1
永久有效 · 网盘发货
前端开发妙码学院《2025大前端架构师训练营》
永久有效 · 网盘发货
前端开发Vue3.5+Electron+大模型 跨平台AI桌面聊天应用实战
永久有效 · 网盘发货
前端开发Vibe Coding 实战开发指南 用Claude Code Cursor和Codex极速打造全栈应用
永久有效 · 网盘发货
前端开发不用深厚基础的 Codex 商用 Web 项目开发 + 变现完整教学包
永久有效 · 网盘发货
前端开发AI编程实战课：VUE+Django+MySQL开发大型网站项目，从入门到项目落地，AI助力编程小白逆袭
永久有效 · 网盘发货