导学

网页组成和本质

初识浏览器

web标准

HTML感知

HTML骨架

vscode的简介和使用

注释

标签组成和关系

标题和段落

换行和水平线标签

文本格式化标签

图片基本使用

图片属性

绝对路径

相对路径-同级和下级

相对路径-上级

音频标签

视频标签

超链接

综合案例-招聘

综合案例-跳转-index

综合案例-跳转-其他页面

列表-使用场景

列表-无序和有序

列表-自定义

表格-使用

表格-表格标题和表头单元格

表格-结构标签

表格-合并单元格

表单-应用场景

表单-input基本使用

表单-input-占位符（提示信息）

表单-单选功能和默认选中

表单-上传多个文件

表单-按钮-input

表单-按钮-button

表单-下拉菜单

表单-文本域

表单-label标签

语义化标签

字符实体

综合案例-学生信息表

综合案例-表单

体验css

css引入方式

选择器-标签

选择器-类

选择器-id

选择器-通配符

文字基本样式

文字-字体

拓展-层叠性

font复合属性

文本缩进

水平对齐方式

文本修饰线

行高

谷歌调试工具

拓展-颜色取值

拓展-标签居中

综合案例1-标题完成

综合案例1-新闻-内容

综合案例2-图片完成

综合案例2-产品-文字效果

选择器-后代

选择器-子代

选择器-并集

选择器-交集

选择器-伪类

emmet语法

背景-背景色

背景-背景图

背景-背景平铺

背景-背景位置

背景-background

背景图和img的区别

显示模式-块

显示模式-行内

显示模式-行内块

显示模式-转换

拓展-标签嵌套

CSS特性-继承性

CSS特性-层叠性

综合案例1

综合案例2

优先级-基本测试

优先级-叠加计算

优先级-计算题

谷歌-排错

PxCook

盒子模型-组成

盒子模型-浏览器效果

盒子模型-内容width和height

盒子模型-border使用方法

盒子模型-尺寸计算-border

盒子模型-案例

新浪导航-布局div

新浪导航-内容a

盒子模型-padding-多值

盒子模型-尺寸-border和padding

新浪导航-padding优化

盒子模型-内减模式

盒子模型-外边距

清除默认样式

版心居中

综合案例-新闻列表-div布局

综合案例-新闻列表-标题

综合案例-新闻列表-内容

外边距-问题

行内元素的垂直内外边距

结构伪类-基本用法

结构伪类-公式

伪元素

标准流

浮动-体验行内块问题

浮动-作用

浮动-特点

综合案例-小米布局

拓展-css属性顺序

综合案例-小米产品-左右结构

综合案例-小米产品-li

综合案例-导航

清除浮动-场景搭建

清除浮动-额外标签

清除浮动-单伪元素

清除浮动-双伪元素

清除浮动-overflow

准备工作

版心和清除默认样式

header布局

logo和nav布局

nav内容完成

搜索-布局和文本框

搜索-按钮

用户区域

banner-布局

banner-left完成

banner-right-标题

banner-right-内容

banner-right-全部课程

精品推荐

精品课程-标题

精品课程内容

版权区域-布局

版权区域-内容

作用和使用步骤

相对relative

了解-定位-注意事项

绝对absolute-参照浏览器

子绝父相

案例—学成在线-hot

居中

位移居中

案例-二维码

案例-banner

固定

显示层级

vertical-align-01

vertical-align-02

光标类型

圆角边框-基本使用

圆角边框-工作场景

溢出显示效果-overflow

显示隐藏-基本使用

案例-二维码显示隐藏

透明属性opacity

css精灵-作用

css精灵-使用

背景图缩放

盒子阴影

过渡

骨架标签

SEO

favicon-标题图标

项目目录

项目代码准备

快捷导航-布局

快捷导航-内容

header-布局

logo和导航

搜索

购物车

版权-布局

版权-li内容完成

版权底部

banner-图

banner-侧导航-布局

banner-侧导航-文字内容

banner-箭头

banner-圆点

新鲜好物-标题

新鲜好物-内容-布局

新鲜好物-内容完成

新鲜好物-新品文字

生鲜-标题-布局

生鲜区域

生鲜-内容-布局