HTML5新增标签

• audio/video音频视频
  • src引入音视频资源的路
  • controls 调出控件
  • loop循环播放

CSS3新属性

• border-radius圆角
  • border-top-left-radius左上方圆角
  • 值的单位: px em 百分数
• box-shadow盒子阴影
  • 第一个值是x轴方向的阴影，值为正阴影在右 侧，值为负阴影在左侧
  • 第二个值 是y轴方向的阴影，值为正阴影在下 方，值为负阴影在上方
  • 第三个值 是阴影的模糊度（blur）值不能为负数
  • 第四个值 阴影的大小 不设置大小等于盒子的大 小，值为负阴影大小小于盒子的大小
  • 第五个值 阴影的颜色
    • 十六进制法 #
    • rgba法
    • 关键字red green
  • 第六个值 默认是外阴outset，内阴影inset
• text-shadow 文本阴影
  • 第一个值 x轴方向的阴影，值为正阴影在右侧， 值为负阴影在左侧
  • 第二个值 y轴方向的阴影，值为正阴影在下方， 值为负阴影在上方 -第三个值 阴影的模糊度，不能为负数
  • 第四个值 阴影的颜色
    • 十六进制法 #
    • rgba法
    • 关键字red green
• box-sizing怪异盒模型
  - border-box此时我们在css中设置的宽度包 含border和padding值 - content-box正常盒模型 ##pc端项目和移动端项目
• pc端项目：在我们的电脑和笔记本上去正常浏览的网页 移动端项目：手持设备，手机，平板，kindle -产品形态 -pc端和移动端共用一套项目，一个域名
  - 结构简单，内容少 - 膜拜，苹果，华为
  • pc端和移动端项目是分离开的 两套项目， 两个域名
    • 结构比较复杂，内容比较多
    • 淘宝、京东、凤凰 移动端
    • 以m/i开头 ##视口 viewport
• 可视区窗口
  • meta:vp + tab回车

<meta name="viewport" content="width=de vice-width,user-scalable=no,initial-sca le=1.0">
复制代码

##响应式布局 ###媒体查询 @media

• 媒体类型 |值| 描述| |--|--| |all| 所有设备类型| |print| 打印机| |screen| 电脑，手持设备| |speech| 屏幕阅读发声设备| @media all

  • 媒体特性 max-width:600px 小于
    • 等于600像素时执行 -min-width:800px
    • 大于等于800像素时执行

• @media all and (min-width:600px) and (maxwidth:800px) ###表单

• form

• input

  • type
    • text文本框
    • password密码框
    • radio 单选按钮
    • checkbox 多选按钮
    • submit 提交
    • button 普通按钮
    • reset 重置按钮
  • label
    • for去绑定相应的input 的 id
  • select下拉框
    • option
  • button按钮
  • textarea 文本域 ###background 背景属性

• background 背景属性

• background-color背景颜色

• background-image背景图片

• background-repeat 背景重复

  • repeatx轴和y轴重复
  • repeat-xx轴方向重复
  • repeat-yy轴方向重复
  • no-repeat不重复

• background-position 背景定位

  • x y
    • left top right bottom center
    • 具体数值

• background-attachment

  • fixed 固定

• background复合属性

  • background: color url() no­repeat left top fixed;

• background-size背景大小

• background-clip 背景裁切（规定背景的绘制区 域。）

  • border-box默认值，背景从边框部分开始绘制
  • padding-box背景从内边距部分开始绘制
  • content-box背景从内容区开始绘制

• background-origin规定背景图片的定位区域

  • padding-box 背景图片从padding部分开始定位
  • border-box背景图片从border部分开始
  • content-box背景图片从内容区开始定位

• 添加新的字体样式:

 @font-face {
font-family:myFirstFont;
src:url(font/font02.ttf);
}
div{
font-family: myFirstFont;}
复制代码

动画三兄弟

transform:

• 可以变换元素的大小，位置，旋转方向，和拉伸
• translate: 位置发生变化
  • 语法: transform:translate( x , y);
  • 单位：（200px,300px） px - x为正，元素向右移动；y为正，元素向下移动
  • transform: translateX 元素只发生水平方向的位移
  • transform: translateY 元素只发生垂直方向的位移
• rotate：旋转方向
  • 语法：transform: rotate(-30deg);
  • 单位deg度
  • 值为正，元素顺时针发生旋转；值为负，元素逆时针发生变化
• scale: 缩放（缩小 放大）
  • 语法：transform：scale（m,n）
  • 单位： （2,.5）放大2倍 缩小0.5倍 - 第一值：宽度的缩放，大于一表示放大，小于一表示缩小 - 第二值：高度的缩放，大于一表示放大，小于一表示缩小 - skew:拉伸
  • 语法:transform: skew(x,y);
  • 单位：(30deg,-20deg) 角度
  • x:水平方向拉伸；为正，拉伸左上角和右下角
  • y:垂直方向拉伸；为正，拉伸左上角和右下角

transition

• 语法: transition：CSS属性的名称 过渡时间 时间曲线 过渡效果何时开始

• transition 属性

  • CSS属性名
  • 动画持续时间
  • 过渡的效果和曲线
    • ease 默认值，慢速开始然后变快，然后慢速结束
    • liner匀速
    • ease-in以慢速开始
    • ease-out以慢速结束
    • ease-in-out以慢速开始，加速，慢速结束
  • 规定动画何时开始：过渡开始时间

• animation

渐变

• 线性渐变
  • 语法：background: linear-gradient( to top right,yellow,green,blue);

            /*默认：从上到下to right 从左往右to top 从下到上to left 从右往左to top left 从右下 到 左上to bottom right*/
复制代码