CSS3Code

慕课网教程 《十天精通CSS3》源码合集

1.初识CSS3

• 1-1.什么是CSS3

• 1-2.CSS3能干什么

2.边框

• 2-1.CSS3边框 圆角效果 border-radius

• 2-2.CSS3边框 阴影 box-shadow（上）

• 2-3.CSS3边框 阴影 box-shadow（下）

• 2-4.CSS3边框 为边框应用图片 border-image  

3.颜色相关

• 3-1.CSS3颜色 颜色之RGBA

• 3-2.CSS3颜色 渐变色彩  

4.文字与字体

• 4-1.CSS3文字与字体 text-overflow与word-wrap

• 4-2.CSS3文字与字体 嵌入字体@font-face

• 4-3.CSS3文字与字体 文本阴影text--shadow  

5.与背景相关的样式

• 5-1.CSS3背景 background-origin

• 5-2.CSS3背景 background-clip

• 5-3.CSS3背景 background-size

• 5-4.CSS3背景 multiple backgrounds

• 5-5.CSS3背景 制作导航菜单综合练习题  

6.征服CSS3选择器（上）

• 6-1.CSS3选择器 属性选择器

• 6-2.CSS3 结构性伪类选择器——root

• 6-3.CSS3 结构性伪类选择器——not

• 6-4.CSS3 结构性伪类选择器——empty

• 6-5.CSS3 结构性伪类选择器——target

• 6-6.CSS3 结构性伪类选择器——first-child

• 6-7.CSS3 结构性伪类选择器——last-child

• 6-8.CSS3 结构性伪类选择器——nth-child（n）

• 6-9.CSS3 结构性伪类选择器——nth-last-child（n）

• 6-10.CSS3 first-of-type选择器

• 6-11.CSS3 nth-of-type（n）选择器

• 6-12.CSS3 last-of-type选择器

• 6-13.CSS3 nth-last-of-type（n）选择器

• 6-14.CSS3 only-child选择器

• 6-15.CSS3 only-of-type选择器

7.征服CSS3选择器（下）

• 7-1.CSS3选择器 :enabled选择器

• 7-2.CSS3选择器 :disabled选择器

• 7-3.CSS3选择器 :checked选择器

• 7-4.CSS3选择器 ::selection选择器

• 7-5.CSS3选择器 :read-only选择器

• 7-6.CSS3选择器 :read-write选择器

• 7-7.CSS3选择器 ::before和::after选择器

• 7-8.切换背景图像综合练习题

8.CSS3中的变形和动画（上）

• 8-1.CSS3变形——旋转rotate（）

• 8-2.CSS3变形——扭曲skew（）

• 8-3.CSS3变形——缩放scale（）

• 8-4.CSS3变形——位移translate（）

• 8-5.CSS3变形——矩阵matrix（）

• 8-6.CSS3变形——原点transform-origin

• 8-7.CSS3动画——过渡属性transition-property

• 8-8.CSS3动画——过渡所需时间transition-duration

• 8-9.CSS3动画——过渡函数transition-timing-function

• 8-10.CSS3动画——过渡延迟时间transition-delay

9.CSS3中的变形和动画（下）

• 9-1.CSS3 keyframes介绍

• 9-2.CSS3中调用动画

• 9-3.CSS3中设置动画播放时间

• 9-4.CSS3中设置动画播放方式

• 9-5.CSS3中设置动画开始播放的时间

• 9-6.CSS3中设置动画播放的次数

• 9-7.CSS3中设置动画播放的方向

• 9-8.CSS3中设置动画的播放状态

• 9-9.CSS3中设置动画时间外属性

• 9-10.制作3D选择导航综合练习题

10.布局样式相关

• 10-1.CSS3多列布局——columns

• 10-2.CSS3多列布局——column-width

• 10-3.CSS3多列布局——column-count

• 10-4.CSS3列间距column-gap

• 10-5.CSS3列表边框column-rule

• 10-6.CSS3跨列设置column-span

• 10-7.CSS3盒子模型

• 10-8.CSS3伸缩布局（一）

• 10-9.CSS3伸缩布局（二）

11.Media Queries与Responsive设计

• 11-1.Media Queries——媒体类型（一）

• 11-2.Media Queries——媒体类型（二）

• 11-3.Media Queries使用方法

• 11-4.Responsive设计（一）

• 11-5.Responsive设计（二）

• 11-6.Responsive布局技巧

• 11-7.Responsive设计——meta标签

• 11-8.Responsive设计——不同设备的分辨率设计

12.用户界面与其他重要属性

• 12-1.自由缩放属性resize

• 12-2.CSS3外轮廓属性

• 12-3.CSS生成内容

• 12-4.制作3D旋转视频展示区