黑马程序员技术交流社区

标题: 移动web [打印本页]

---

作者: qiuyi    时间: 2019-6-18 19:51
标题: 移动web
一、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

二、css3

1.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'

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2