| 第一天 | 第二天 | 第三天 |
| 1.1 引入方式 1.2 选择器 1.3 画盒子 1.4 文字控制 1.5 综合案例 一 新闻详情 | 2.1 复合选择器 2.2 伪类选择器 2.3 CSS 特性 2.4 Emmet 写法 2.5 背景属性 2.6 显示模式 2.6 综合案例 一 热词 (设计稿?) 2.7 综合案例 一banner效果 (设计稿?) | 3.1 结构伪类选择器 3.2 伪元素选择器 3.3 PxCook 软件 3.4 盒子模型 3.5 清除默认样式 3.6 内容溢出 overflow 属性 3.7 外边距问题 合并和塌陷 3.8 行内元素 -内外边距问题 3.9 圆角与盒子阴影 3.10 综合案例 -- 产品卡片 3.11 综合案例二 --新新闻列表 |

CSS 第一天



1.1 引入方式



1.2 选择器






1.3 画盒子

div 独占一行

1.4 文字控制


















div 外层



1.5 调试工具 F12






1.5 综合案例 一 新闻详情


1.6 综合案例 二 CSS 简介


CSS 第二天

2.1 复合选择器









2.2 伪类选择器





2.3 CSS 特性





2.4 Emmet 写法

2.5 背景属性















2.6 显示模式












2.6 综合案例 一 热词 (设计稿?)







2.7 综合案例 一banner效果 (设计稿?)

先整体到局部



后代关系 选择器
CSS 第三天




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 综合案例二 --新新闻列表






















