黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程(九)

一、基础班学习路线

在这里插入图片描述

四、HTML5和CSS3提高

1.HTML5的新特性

在这里插入图片描述

HTML5新增语义化标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML5新增视频标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML5新增音频标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML5新增input类型

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML5新增表单属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.CSS3的新特性

在这里插入图片描述

CSS3新增属性选择器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

CSS3新增结构伪类选择器-选择第n个元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

CSS3新增nth-child选择器

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

nth-child和nth-of-type的区别

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

CSS3新增伪元素选择器使用场景和由来

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

伪元素选择器场景-配合字体图标

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 这个三角是用定位来做的,所以前面有文字不会影响

伪元素选择器场景-仿土豆效果

  • 原先制作过程 :
    在这里插入图片描述
  • 现改为如下 :在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

伪元素选择器场景-伪元素清除浮动本质

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

CSS3盒子模型border-box

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

CSS3图片模糊处理(了解)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

计算盒子宽度calc函数

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

CSS3新增属性过渡

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

CSS3过渡练习-进度条

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Guess you like

Origin blog.csdn.net/m0_51448653/article/details/121331925