全局变量、局部变量、内联变量的定义和使用
实操：渐变背景
实操：换肤
--varName
全局变量 :root{}
局部变量 selector{}
内联变量 style
变量的重要意义和使用
站在巨人的肩膀上
暂无
常见CSS函数的使用
实操：渐变背景
实操：换肤
rgba()
attr()
var()
calc()
函数的灵活运用
站在巨人的肩膀上
暂无
transform的2D变换和3D变换
实操：3D头像
实操：3D按钮
实操：3D魔方
translate
scale
rotate
skew
perspective
transform-style
transform-origin
transform在定位/布局中的使用
3D空间的营造和使用
解放思想、创意无限
animation的定义和使用
实操：加载动画
实操：表单输入
实操：梦幻背景
CSS
animation
animation-delay
animation-play-state
JavaScript
animationstart
animationend
帧动画中的各个属性
动画事件侦听
动画类的使用
站在巨人的肩膀上
transition的定义和使用
实操：:hover动画
实操：:focus动画
实操：:checked动画
transition
transition-property
transition-duration
transition-timing-function
transition-delay
过渡动画的各个属性
过渡动画的运用
站在巨人的肩膀上
grid的容器特性和项目特性
实操：九宫格布局
实操：异构布局
实操：全站布局
实操：万能自适应布局
container
grid-template-columns
grid-template-rows
grid-template-areas
grid-auto-rows
grid-area
place-items
gap
item
grid-column
grid-row
grid-area
auto-fill
repeat()
minmax()
grid在布局中的运用
自适应布局
响应式开发
flex的主轴、交叉轴、容器特性和项目特性
实操：带logo主导航
实操：面包屑导航
实操：时间轴
实操：手风琴
container
flex-direction
justify-content
align-items
flex-wrap
gap
item
flex-grow
flex-shrink
flex-basis
flex
order
flex在布局中的运用
order的使用
auto和1的使用
响应式开发
暂无
position的常见分类和基本使用
层级z-index对渲染的影响
实操：购物车
实操：返回顶部
实操：吸顶导航
实操：二级导航
relative
absolute
fixed
sticky
父相子绝
固定定位的使用
粘性定位的使用场合
父相子绝
暂无
float的特性
float的常见应用
Property
float
clear
实操：首字下沉
实操：图文混排
实操：导航*
实操：时间轴*
实操：两列布局*、圣杯/双飞燕布局*
浮动的使用场合
浮动对文档流的影响
清除浮动的重要性
与时俱进
shape-outside
文本的基本样式
分栏的基本使用
Property
font
line-height
text-shadow
text-indent
text-align-last*
writing-mode*
@font-face*
Property
overflow
white-space
text-overflow
Property
columns
column-count
column-span
Selector
::first-line
::first-letter
::selection
实操：打点溢出
实操：图文混排
实操：古诗欣赏*
文本在排版布局中的运用
文化自信
背景的基本使用
渐变背景的基本使用
Property
background
background-color
background-image
background-size
background-position
background-repeat
Property
linear-gradient()
radial-gradient()*
Conic-gradient()*
实操：背景图 - 单背景、多背景
实操：渐变背景 - 按钮设计
实操：自定义图文目录
实操：精灵图*
实操：屏风图*
背景位置和大小的运用
渐变背景的使用
条条大路通罗马
暂无
border的属性和基本使用
border-radius的属性和基本使用
Property
border
border-width
border-style
border-color
Property
border-radius
实操：个人信息卡片
实操：页面设计
实操：教学评价、技能条、进度条
border的灵活运用
border-radius的灵活运用
捏脸、站在巨人的肩膀上
选择器的分类和基本使用
Selector
Type selectors
Class selectors
ID selectors
Attribute selectors
Pseudo-classes
pseudo-elements
Combinators
:root
*
实操：定制列表标记（多种实现）
实操：标签页
实操：表单综合运用
选择器的灵活使用
根选择器的重要性
优先级
暂无
<form>的作用和数据提交过程
常见表单元素的作用、常用属性和基本样式
Tag
<form>
<input>
<label>
<button>
<textarea>
<select>*
Attribute
type
name
value
id
required
checked
Property
accent-color
resize
appearance
Selector
:focus
:valid
click
input
loadmetadata
timeupdate
querySelector
实操：注册
实操：留言板
实操：登录
事件的综合运用
表单元素的自定义样式
团队合作
暂无
<audio>的常见属性和使用
<video>的常见属性和使用
JavaScript对媒体的控制
Tag
<audio>
<video>
Attribute
src
controls
loop
autoplay
muted
Property
aspect-ratio
object-fit
object-position
querySelector
click
mouseover
mouseout
实操：背景音乐
实操：首页全屏视频播放
实操：音乐盒*
实操：微课*
样式初始化的理解和运用
类选择器和id选择器的使用
资源的分类管理
JavaScript对媒体的控制
安全无小事
<img>的常见属性和使用
样式初始化
懒加载*
渲染过程*
Tag
<img>
Attribute
src
alt
title
loading*
Property
object-fit
object-position
aspect-ratio
max-width
overflow
border-radius*
实操：头像定制
实操：相册
样式初始化的理解和运用
图片对系统资源的占用[HTTP请求]
图片的懒加载和延迟渲染
布局元素和内容元素
懒加载
<figure> <figcaption>
<table>的结构和常见属性
<table>常见样式的设计
Tag
<table>
<tr>
<th>、<td>
<caption>*
Attribute
colspan
rowspan
Property
border-collapse
border*
table-layout*
Selector
:nth-child()
:first-child()
实操：线框表格
实操：三线表格
实操：斑马纹表格
表格应用场合
表格的样式
项目的规范性
与时俱进
无序列表的基本使用
自定义列表的基本使用
有序列表的基本使用*
列表样式初始化
Tag
<ul> <li>
<dl> <dt> <dd>
<ol> <li>
Attribute
type
Property
list-style
display
background-color
Selector
::marker
::before
Selector list(,)
实操：友情链接
实操：版权信息
样式初始化的理解和运用
设计合理规范的H5结构
容器标签和子项标签
没有规矩，不成方圆