2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍

目录

1.0 CSS 第一天  基础选择器、文字控制属性

1.1 引入方式

1.2 选择器

1.3 画盒子

1.4 文字控制

1.5 综合案例 一 新闻详情

2.0 CSS 第二天

2.1 复合选择器

2.2 伪类选择器

2.3 CSS 特性

2.4 Emmet 写法

2.5 背景属性

2.6 显示模式

2.6 综合案例 一 热词 （设计稿？）

2.7 综合案例 一banner效果 （设计稿？）

3.0 CSS 第三天 选择器、PxCook软件、盒子模型

3.1 结构伪类选择器

3.2 伪元素选择器

3.3 PxCook 软件

3.4 盒子模型

3.5 清除默认样式

3.6 内容溢出 overflow 属性

3.7 外边距问题 合并和塌陷

3.8 行内元素 -内外边距问题

3.9 圆角与盒子阴影

3.10 综合案例 -- 产品卡片

3.11 综合案例二 --新新闻列表

4.CSS 第四天 Flex 弹性布局

4.1 标准流

4.2 浮动

小米产品列表

4.3 清除浮动

4.4 Flex 布局 （重点）

4.5 Flex - 组成

4.6 Flex 布局 主轴与侧轴对齐方式

4.7 Flex布局 弹性伸缩比

4.8 Flex 布局 弹性换行与行对方方式

4.9 综合案例 抖音解决方案

---

---

1.0 CSS 第一天  基础选择器、文字控制属性

1.1 引入方式

1.2 选择器

1.3 画盒子

div 独占一行

1.4 文字控制

div 外层

1.5 调试工具 F12

1.5 综合案例 一 新闻详情

1.6 综合案例 二 CSS 简介

2.0 CSS 第二天

2.1 复合选择器

2.2 伪类选择器

2.3 CSS 特性

2.4 Emmet 写法

2.5 背景属性

2.6 显示模式

2.6 综合案例 一 热词 （设计稿？）

2.7 综合案例 一banner效果 （设计稿？）

先整体到局部

后代关系 选择器

3.0 CSS 第三天 选择器、PxCook软件、盒子模型

3.1 结构伪类选择器

3.2 伪元素选择器

3.3 PxCook 软件

https://soft-10-1.xiaoguaniu.com/soft/202203/PxCook_V3.9.960_XiTongZhiJia.zip?time=1705368875&ip=120.230.160.251&secret=b328f8e53bef611da58905ff688cf72d

开发模式下

设计模式 下

3.4 盒子模型

空白

内减模式

3.5 清除默认样式

3.6 内容溢出 overflow 属性

3.7 外边距问题 合并和塌陷

3.8 行内元素 -内外边距问题

3.9 圆角与盒子阴影

3.10 综合案例 -- 产品卡片

3.11 综合案例二 --新新闻列表

4.CSS 第四天 Flex 弹性布局

4.1 标准流

4.2 浮动

小米产品列表

1. 清除默认样式

4.3 清除浮动

4.4 Flex 布局 （重点）

4.5 Flex - 组成

4.6 Flex 布局 主轴与侧轴对齐方式

4.7 Flex 布局 修改主轴方向

4.7 Flex布局 弹性伸缩比

4.8 Flex 布局 弹性换行与行对方方式

4.9 综合案例 抖音解决方案