回顾html5和css3新增的标签内容

css初始化

查看初始化代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
* {
    margin: 0;
    padding: 0
}

em, i {
    font-style: normal
}

li {
    list-style: none
}

img {
    border: 0;
    vertical-align: middle
}

button {
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button, input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide, .none {
    display: none
}

.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

HTML5

  1. header,nav,article,aside,senction(定义某个区域),footer
  2. audio，video视频和音频

查看代码

1
2
3
4
5
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

input属性

  1. 新增很多属性值，测试时候加入form标签
  2. 表单属性
  • required内容不能为空,
  • placeholder显示提示信息 input::placeholder可改变颜色属性
  • autofocus:自动聚焦
  • autocomplete:on/off，显示出之前输入过的内容
  • multiple可以提交多个文件

CSS3新选择器

CSS3新特性

属性选择器

  1. 利用属性选择器可以不用借助类或者id选择器使用[]
  2. 利用属性=值选择,比如：input[type=text]{}
  3. 利用属性都相同，属性值开头都相同，比如：div[class^=icon]结尾`div[class$=data]
  4. 权重等于10，类，属性，伪类，都是10

结构伪类选择器

  1. 结构类似，可使用first和last将子元素选择出来，比如 ul li:last-child
  2. 选择第n个元素，使用nth() 比如：ul li:nth-child(n){}
  • 选择n个元素可使用even和odd选择，偶数和奇数
  • ul li:nth(n){},表示选择所有的孩子，从0开始
  • 2n可选择所有的偶数和even相同，2n+1同理
  • n+2从第二个开始，n始终都是从0开始的
  • -n+5前五个
  1. nth-of-type和nth-chid的区别
  • nth-child会将所有的子元素排列，of-ttype将指定的选择出来
  • nth-child将所有的孩子排序，原理，先去找第几个孩子，在与父元素比较
  • nth-of-type先于子元素匹配在进行排序选择

伪元素选择器

  1. ::before和::after，不会生成新的标签
  2. 权重为1和标签选择器一样
  3. before和after必须有content属性
  4. 常用于字体图标
  5. 使用hover时要注意:hover::before中间不能空格严格按照顺序
  6. 伪元素也可清除浮动

查看代码

1
2
3
4
5
6
7
.clearfix:after{
content:'';
display:block;
height:0;
clear:both;
visibility:hidden;
}
1
2
3
4
5
6
7
8
9
10
.clearfix:before,.clearfix:after{
display:block;
content:'';
}
.clearfix:after{
clear:both;
}
.cleafix{
*zoom:1;
}

盒子模型

  1. 解决盒子变化问题
  • 默认的box-sizing:content-box
  • box-sizing: border-box使用后不会增大盒子padding和border

css滤镜（filter)

  1. filter: blur() blur是一个模糊处理函数，小括号的数值越大越模糊

CSS3calc函数

  1. 使子盒子比父盒子小npx
  • 同步变化比如width: calc(100% - 30px)
  1. 可进行加减乘除

CSS3过渡 transition

  1. transition:要过度的属性，时间，运动曲线，何时开始
  2. 谁做过渡给谁加，使用多个属性用,隔开，多个属性变化加all
  3. ease和何时开始可以省略

小米商城logo的实际运用

  1. 思路：使用双伪元素来实现，before设置显示，after设置隐藏，hover分别进行改变，但是这种方法无法实现过渡的效果（这是第一次的想法代码如下）

查看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.logo {
    width: 100px;
    height: 100px;
    margin: 100px auto;
    position: relative;
    background-color: rgb(240, 77, 13);
}

.milogo {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    position: absolute;
}
.milogo::after,.milogo::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 27%;
    left: 25%;
    transition: all .2s;
}
.milogo::before {
    display: block;
    background: url(https://s02.mifile.cn/assets/static/image/mi-logo.png) no-repeat;
}

.milogo::after {
    display: none;
    background: url(https://s02.mifile.cn/assets/static/image/mi-home.png) no-repeat;
}
.milogo:hover::before{
    display: none;
}
.milogo:hover::after {
    display: block;
}
  1. 思路二就是使用定位，然后改变after的位置就能实现过渡,去除直接隐藏和显示，巧妙使用定位实现logo的切换

查看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.logo {
    width: 100px;
    height: 100px;
    margin: 100px auto;
    position: relative;
    border-radius: 5px;
    background-color: rgb(240, 77, 13);
    overflow: hidden;
    box-shadow: 1px 2px 3px #888;
}

.milogo {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    position: absolute;
}
.milogo::after,.milogo::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 27%;
    transition: all .4s;
}
.milogo::before {
    left:27%;
    background: url(https://s02.mifile.cn/assets/static/image/mi-logo.png) no-repeat;
}

.milogo::after {
    left: -50px;
    background: url(https://s02.mifile.cn/assets/static/image/mi-home.png) no-repeat;
}
.milogo:hover::before{
    left: -50px;
}
.milogo:hover::after {
    left: 25px;
}

查看演示图片