|
一、html5(5) 1.什么是html5: html5+css3+js的综合 2.新增标签(6): head nav articlesection aside footer 注意:IE9里新增标签是行内元素,需要转换为块元素 3.audio和video 音频标签:autoplay(谷歌浏览器不可以自动播放) src controls loop <audio> <source src=''>---ogg <source src=''>---mp3 </audio> 视频标签:autoplay src controls loop muted(可解决谷歌禁止autopaly属性问题,但要和autoplay一起使用) width和height poster 4.新增input标签(10): email urldate time week month number tel search color 5.新增表单属性(5): placeholderautofocus autocomplete multiple required 二、css31.css3新增选择器:
- css3属性选择器: 根据元素的属性和属性值来选择元素---标签+[属性](5)选择具有某属性的元素, 选择属性=属性值的元素, 选择属性以属性值开头^//结尾$//包含*.
- css3伪类选择器(5): E:first-child、E:last-child、E:nth-child(n)、E:nth-last-child(n)、E:nth-of-type(n)
其中: 1.nth-child(n)取值(3):数字、关键字(odd, even)、公式(2n, n+5) 2.nth-of-type(n): 选中父元素下面的指定类型第n个E元素,还有first-of-type、last-of-type
- css3伪元素选择器: : :before // : :after {content : ' '}
注意:1.伪元素很常见,但不作为结构使用,一般用来装饰,放图标、一条线、一个小点. 2.一定不要忘记先加content属性，不然不生效. 3.默认是行内元素,设宽高时要转换(浮动、定位、display) 4.权重为1 2.css3变形transform
- 位移: transform: transition(x, y)
注意: 1.对行内元素不生效 2.改变元素位置,但不会影响其他元素 3.取值为像素值或者百分比
- 缩放: transform: scale(x,y)
- 旋转: transform: rotate(deg)
注意:1. 是旋转到多少度而不是旋转了多少度 2.transform-origin : x y 设置旋转中心点,取值top、bottom、right、left、center
- 综合写法: 位移属性必须写在第一位, 行内元素不能设置transform属性
3.css3动画animation
- 与过渡transition的区别: 相对过渡动画，animation动画可以实现更多变化，更多控制，实现自动播放等效果
- 步骤: 定义动画---调用动画
@keyframes name { 0% { } 100%{ } } Animation-name animation-duration animation: 动画名字 动画时间 动画速度 动画延时 动画次数 是否逆向播放 动画结束状态; Steps( )步长 4.animate.min.css动画库的使用 将animate.min.css文件拷贝到自己的项目---<link rel="stylesheet"href="css/animate.min.css">---class=' animated name'
| 
收藏
淘帖
踩
