1-1 学习路线

1-2 HTML简介

1-3 网页的相关概念

1-4 常用浏览器以及内核

1-5 web标准

2-1 HTML标签导读

2-2 HTML语法规范

2-3 HTML基本结构标签

2-4 VSCode工具创建页面

2-5 DOCTYPE和lang以及字符集的作用

3-1 标签语义

3-2 标题标签

3-3 段落标签和换行标签

3-4 体育新闻案例

3-5 文本格式化标签

3-6 div和span标签

3-7 图像标签（上）

3-8 图像标签（下）

3-9 图像标签注意点

4-1 目录文件夹和根目录

4-2 相对路径（上）

4-3 相对路径（下）

4-4 绝对路径

5-1 链接标签（上）

5-2 链接标签（下）

5-3 锚点链接

5-4 注释标签和特殊字符

6-1 综合案例（上）

6-2 综合案例（下）

7-1 HTML标签（下）导读

7-2 表格标签基本使用

7-3 表头单元格标签

7-4 表格相关属性（了解）

7-5 小说排行榜案例

7-6 表格结构标签

7-7 合并单元格

7-8 表格总结

8-1 无序列表

8-2 有序列表

8-3 自定义列表

8-4 列表总结

9-1 表单使用场景以及分类

9-2 表单域

9-3 input之type属性文本框和密码框

9-4 input之type属性单选按钮和复选框

9-5 input之name和value属性

9-6 input之checked和maxlength属性

9-7 input表单元素四个属性使用场景课堂问答

9-8 input之type属性提交和重置按钮

9-9 input之type属性普通按钮和文件域

9-10 label标签

9-11 select下拉表单

9-12 textarea文本域标签

9-13 表单元素几点总结

10-1 注册页面（一）

10-2 注册页面（二）

10-3 注册页面（三）

10-4 注册页面（四）

10-5 学会查阅文档

11-1 CSS层叠样式表导读

11-2 CSS简介

12-1 体验CSS语法规范

12-2 CSS代码风格

13-1 css选择器的作用

13-2 标签选择器

13-3 类选择器

13-4 使用类选择器画盒子

13-5 类选择器特殊使用-多类名

13-6 id选择器

13-7 通配符选择器

14-1 font-family设置字体系列

14-2 font-size字号大小

14-3 font-weight字体粗细

14-4 font-style字体样式

14-5 font复合属性写法

14-6 字体属性总结

15-1 文本颜色color

15-2 文本对齐text-align

15-3 文本装饰text-decoration

15-4 文本缩进text-indent

15-5 行间距line-height

15-6 css文本属性总结

16-1 内部样式表

16-2 行内样式表

16-3 外部样式表

16-4 css引入方式总结

17-1 新闻页面

17-2 修改样式（一）

17-3 修改样式（二）

17-4 修改样式（三）

17-5 chrome调试工具使用

18-1 css第二天导读

18-2 emmet语法生成html标签

18-3 emmet语法快速生成css样式

18-4 快速格式化代码

19-1 复合选择器简介

19-2 后代选择器

19-3 子元素选择器

19-4 课堂练习

19-5 并集选择器

19-6 链接伪类选择器（上）

19-7 链接伪类选择器（下）

19-8 focus伪类选择器

19-9 复合选择器总结

20-1 什么是元素显示模式

20-2 块元素

20-3 行内元素

20-4 行内块元素

20-5 元素显示模式总结

20-6 显示模式的转换

21-1 一个小工具snipaste的使用

21-2 简洁版小米侧边栏案例

21-3 单行文字垂直居中的原理

21-4 背景颜色

21-5 背景图片

21-6 背景平铺

21-7 背景位置-方位名词

21-8 背景位置案例一

21-9 背景位置案例二-王者荣耀背景图片

21-10 背景位置-精确单位

21-11 背景位置-混合单位

21-12 背景固定

21-13 背景属性复合写法

21-14 背景颜色半透明

21-15 背景总结

21-16 综合案例五-彩导航（上）

21-17 综合案例五-彩导航（二）

22-1 层叠性

22-2 继承性

22-3 行高的继承

22-4 优先级

22-5 优先级注意的问题

22-6 CSS权重的叠加

22-7 权重两个练习题

23-1 盒子模型导读

23-2 看透网页布局本质

23-3 盒子模型组成部分

23-4 盒子模型边框border

23-5 边框的复合写法

23-6 表格细线边框

23-7 边框会影响盒子实际大小

23-8 盒子模型内边距padding

23-9 padding复合属性

23-10 padding会影响盒子实际大小

23-11 padding应用-新浪导航栏（上）

23-12 padding应用-新浪导航（下）

23-13 小米侧边栏修改

23-14 padding不会撑开盒子的情况

23-15 盒子模型外边距margin

23-16 外边距典型应用--块级盒子水平居中对齐

23-17 行内元素和行内块元素水平居中

23-18 外边距合并-相邻块元素垂直外边距

23-19 外边距合并-嵌套块元素塌陷

23-20 清除内外边距

24-1 ps的基本操作

24-2 综合案例-产品模块布局分析

24-3 综合案例-box布局

24-4 综合案例-图片和段落制作

24-5 综合案例-评价和详情制作

24-6 综合案例-竖线细节制作

24-7 老师解惑

24-8 快报模块布局分析

24-9 快报模块头部制作

24-10 快报模块列表制作

25-1 圆角边框原理

25-2 圆角边框的使用

26-1 盒子阴影

26-2 文字阴影

27-1 浮动导读

27-2 传统网页布局三种方式

27-3 为什么需要浮动

27-4 什么是浮动

27-5 浮动特性-脱标

27-6 浮动特性-浮动元素一行显示

27-7 浮动特性-浮动元素具有行内块特性

27-8 浮动元素经常搭配标准流的父元素

27-9 浮动布局练习-1

27-10 浮动布局练习-2

27-11 浮动练习-手机模块（上）

27-12 浮动练习-手机模块（下）

27-13 常见的网页布局

27-14 浮动的两个注意点

28-1 为什么清除浮动

28-2 清除浮动本质以及额外标签法

28-3 清除浮动之父元素overflow

28-4 清除浮动之after伪元素

28-5 清除浮动之双伪元素

28-6 清除浮动

29-1 常见的图片格式

29-2 图层切图（上）

29-3 图层切图（下）

29-4 切片工具

29-5 cutterman安装

29-6 cutterman使用技巧

30-1 准备工作

30-2 css属性书写顺序（重要）

30-3 页面布局整体思路

30-4 header区域制作

30-5 logo区域制作

30-6 导航栏nav区域制作（上）

30-7 导航栏nav区域制作（中）

30-8 导航栏nav区域制作（下）

30-9 搜索search模块input制作

30-10 搜索search模块button制作

30-11 用户user模块制作

30-12 banner模块制作

30-13 subnav模块制作（上）

30-14 subnav模块制作（下）

30-15 course模块制作（上）

30-16 course模块制作（中）

30-17 course模块制作（下）

30-18 精品推荐模块（上）

30-19 精品推荐模块（中）

30-20 精品推荐模块（下）

30-21 box-hd模块制作

30-22 box-bd模块制作

30-23 box模块完成

30-24 footer模块制作

30-25 copyright模块制作

30-26 links模块制作

31-1 定位导读

31-2 为什么需要定位

31-3 定位组成

31-4 相对定位

31-5 绝对定位-没有父级或者父级无定位情况

31-6 绝对定位-父级有定位情况

31-7 绝对定位脱标的不占有原来位置

31-8 子绝父相的由来

31-9 子绝父相案例-hot模块

31-10 固定定位

31-11 固定定位小技巧-固定到版心右侧

31-12 粘性定位（了解）

31-13 定位总结

31-14 定位的叠放顺序

31-15 绝对定位的盒子居中算法

31-16 定位的特殊特性

31-17 浮动元素不会压住标准流的文字定位会

32-1 布局分析

32-2 大盒子制作

32-3 左侧箭头按钮制作

32-4 右侧箭头按钮制作

32-5 ul盒子模块制作

32-6 li小圆点模块制作

32-7 网页布局总结

33-1 display显示隐藏元素

33-2 visibility显示隐藏元素

33-3 overflow溢出显示隐藏

33-4 土豆案例（上）

33-5 土豆案例（下）

34-1 导读

34-2 为什么需要精灵技术

34-3 精灵图使用（原理）

34-4 精灵图使用（代码）

34-5 精灵图案例-拼出自己名字

34-6 字体图标产生和优点

34-7 字体图标下载

34-8 字体图标的使用

34-9 字体图标的追加和加载原理

34-10 CSS三角的做法

34-11 CSS三角应用-京东效果

34-12 用户界面-鼠标样式

34-13 用户界面-取消表单轮廓和防止拖拽文本域

34-14 vertical-align实现行内块和文字垂直居中对齐

34-15 图片底侧空白缝隙解决方案

34-16 单行文字溢出省略号显示

34-17 多行文字溢出省略号显示

34-18 布局技巧-margin负值巧妙运用（上）

34-19 布局技巧-margin负值巧妙运用（下）

34-20 布局技巧-文字围绕浮动元素巧妙运用

34-21 布局技巧-行内块的巧妙运用

34-22 布局技巧-CSS三角巧妙运用（上）

34-23 布局技巧-CSS三角巧妙运用（下）

34-24 CSS初始化

35-1 HTML5CSS3提高导读

35-2 新增语义化标签

35-3 新增视频标签

35-4 新增音频标签

35-5 新增input表单

35-6 新增表单属性

36-1 属性选择器（上）

36-2 属性选择器（下）

36-3 结构伪类选择器-选择第n个元素

36-4 nth-child选择器（上）

36-5 nth-child选择器（下）

36-6 nth-child和nth-of-type的区别

36-7 伪元素选择器使用场景和由来

36-8 伪元素选择器基本使用

36-9 伪元素选择器使用场景-配合字体图标

36-10 伪元素使用场景-仿土豆效果

36-11 伪元素选择器-伪元素清除浮动本质

36-12 CSS3盒子模型border-box

36-13 CSS3图片模糊处理

36-14 计算盒子宽度calc函数

36-15 CSS3新增属性过渡（上）

36-16 CSS3新增属性过渡（下）

36-17 CSS3过渡练习

36-18 广义的H5（了解）

37-1 导读

37-2 网站制作流程

37-3 品优购项目规划

37-4 品优购项目搭建

37-5 品优购项目-样式的模块化开发

37-6 品优购项目-favicon图标制作

37-7 品优购项目-TDK三大标签SEO优化

37-8 品优购首页-快捷导航shortcut结构搭建

37-9 品优购首页-快捷导航左侧制作

37-10 品优购首页-快捷导航右侧搭建

37-11 品优购首页-快捷导航右侧字体图标

37-12 品优购首页-header头部模块搭建

37-13 品优购首页-logoSEO优化（上）

37-14 品优购首页-logoSEO优化（下）

37-15 品优购首页-search搜索模块（上）

37-16 品优购首页-search搜索模块（下）

37-17 品优购首页-hotwords热词模块

37-18 品优购首页-shopcar模块制作

37-19 品优购首页-count购物车统计模块

37-20 品优购首页-nav导航模块搭建

37-21 品优购首页-dropdown模块制作

37-22 品优购首页-导航详细分类制作（上）

37-23 品优购首页-导航详细分类制作（下）

37-24 品优购首页-navitems模块制作

37-25 品优购首页-footer底部模块搭建

37-26 品优购首页-mod-servecie模块制作（上）

37-27 品优购首页-mod-servecie模块制作（下）

37-28 品优购首页-mod_help模块制作

37-29 品优购首页-mod_copyright模块制作

37-30 品优购首页-main主体盒子搭建

37-31 品优购首页-newsflash模块

37-32 品优购首页-news-hd模块制作

37-33 品优购首页-new-bd模块制作

37-34 品优购首页-lifeservice制作（上）

37-35 品优购首页-lifeservice制作（下）

37-36 品优购首页-推荐模块recom（上）

37-37 品优购首页-推荐模块recom（下）

37-38 品优购首页-家用电器模块搭建

37-39 品优购首页-家用电器模块头部制作

37-40 tab栏选项卡原理布局需求

37-41 品优购首页-tab_list-item布局（上）

37-42 品优购首页-tab_list-item布局（中）

37-43 品优购首页-tab_list-item布局（下）

37-44 品优购列表-结构搭建

37-45 品优购列表页-秒杀模块制作

37-46 品优购列表页-导航模块修改

37-47 品优购列表页-一个小问题

37-48 品优购列表页-结束

37-49 品优购注册页-header制作

37-50 品优购列表页-注册主体模块头部制作

37-51 品优购注册页-注册主体制作（上）

37-52 品优购注册页-注册主体制作（下）

37-53 品优购注册页-安全程度模块

37-54 品优购注册页-同意模块和完成注册模块

37-55 品优购项目页面相互跳转以及作业安排

37-56 什么是服务器

37-57 申请免费空间以及网站上传