Day08 结构伪类_图形_字体_字体图标_元素定位
课程内容
额外知识补充
- border 图形
- Web 网络字体
- Web 字体图标
- CSS 精灵图
- cursor 属性
CSS 元素定位
- 标准流布局
- 相对定位
- 固定定位
- 绝对定位
- 粘性定位
- z-index
视频
- 01-(掌握)-结构伪类-nth-child-last.mp4
- 02-(理解)-结构伪类-nth-of-type-last.mp4
- 03-(理解)-结构和否定伪类-root-empty.mp4
- 04-(了解)-今日内容概述.mp4
- 05-(掌握)-border 实现图形和旋转.mp4
- 06-(理解)-网络字体 - 网络的字体使用流程和原理.mp4
- 07-(掌握)-网络字体 - 网络字体的使用过程.mp4
- 08-(理解)-网络字体 - 网络字体的兼容性写法.mp4
- 09-(掌握)-字体图标 - 字体图片的原理和使用流程.mp4
- 10-(掌握)-精灵图 - 认识精灵图和获取过程.mp4
- 11-(掌握)-精灵图 - 精灵图的使用过程.mp4
- 12-(掌握)-光标显示-cursor-pointer.mp4
- 13-(掌握)-布局 - 元素定位 - 标准流的理解.mp4
- 14-(掌握)-布局 - 元素定位-position 属性介绍.mp4
- 15-(掌握)-布局 - 元素定位 - 相对定位的使用.mp4
- 16-(了解)-布局 - 元素定位 - 梦幻西游案例.mp4
- 17-(掌握)-布局 - 元素定位 - 固定定位的使用.mp4
- 18-(掌握)-布局 - 元素定位 - 固定定位的练习.mp4
- 19-(掌握)-内容回顾和作业布置.mp4
笔记
📄️ 结构伪类 nth-child
- :nth-child - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 结构伪类 nth-last-child
- :nth-last-child - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 结构伪类 nth-of-type
- :nth-of-type - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 结构伪类 nth-last-of-type
- :nth-last-of-type - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 结构伪类 first-child
- :first-child - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 结构伪类 last-child
- :last-child - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 结构伪类 first-of-type
- :first-of-type - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 结构伪类 last-of-type
- :last-of-type - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 结构伪类 only-child
- :only-child - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 结构伪类 only-of-type
- :only-of-type - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 否定伪类 not
- :not() - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 伪类 root
- :root - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 伪类 empty
- :empty - CSS:层叠样式表 | MDN (mozilla.org)
📄️ border 的图形
border - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 网络字体
- Web 字体 - 学习 Web 开发 | MDN (mozilla.org)
📄️ 字体图标
- 认识字体图标
📄️ 精灵图
在 CSS 中实现图像合并 - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 鼠标样式
- cursor - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 标准流 Normal Flow
- 正常布局流 - 学习 Web 开发 | MDN (mozilla.org)
📄️ 常见元素定位 position
- 定位 - 学习 Web 开发 | MDN (mozilla.org)
📄️ 静态定位 static
- 定位 - 学习 Web 开发 | MDN (mozilla.org)
📄️ 相对定位 relative
- position - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 固定定位 fixed
- position - CSS:层叠样式表 | MDN (mozilla.org)
📄️ 画布和视口
Viewport - 术语表 | MDN (mozilla.org)
📄️ 作业布置
完成课堂所有的代码