H5 Css3

H5

1.H5的新特性：

          用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素

新的特殊内容元素，比如 article、footer、header、nav、section

+ 新的表单控件，比如 calendar、date、time、email、url、search

2.details & summary 标签 ：能够实现下拉菜单的效果

3.window 事件

  3.1onmessage

window.addEventListener('message',messagehandle)
     postMessage('aaa')
    function messagehandle(e){
   console.log(e);  //会打印出
    }

   

他可以实现跨域，实现Iframe 的postMessage跨域

还有四种 1.修改服务端响应头 2.Json p跨域

     3.2.window 下的属性

        document    location         history       screen     navigator

navigator    用来获取当前坐标

 

navigator.geolocation.getCurrentPosition(function(geo){  
//两个回调函数，一个是获取成功，一个是错误，
            console.log(geo) 
//成功之后将会拿到本地位置的经纬度百度地图写个接口进行显示当前位置
        },function(error){
            console.log(error)
        })

        

4.work 实现js的多线程  

   缺点：不能处理任何dom，只能做复杂运算

例如  

在 a.js文件夹下
var s;
for(var i ;i<100000000000;i++){

s+=i
}
postMessage(s) //把s抛出去
在 index.html中
var work =new Worker('./a.js')
work.addEventListener('message',handle)
function(e){
console.log(e)
}
//这样就完成了js的多线程，不会影响index的加载，
当a.js加载完毕直接拿到index

5.localStorage : 同域名下是共享的，可以通过localStorage的改变而触发事件

例如：

index1 文件夹下
window.addEventListener('storage',handle)//监听localStorage改变触发的事件
function handle（e）{
  console.log(e)
}

在index2文件夹下

localstorage=3


//在执行index2的时候index1 中就会console.log(e)

video 标签定义视频，比如电影片段或其他视频流。

用法：

<video src="./video/a.mp4" autoplay muted controls></video>

    属性：autoplay:自动播放， muted:静音，只有在静音的时候才会触发自动播放

               controls  出现控制条

               loop  如果出现该属性，则当媒介文件完成播放后再次开始播放。

              | poster | *URL*    | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图                   像。 |   

         script方法    ：play()：开始播放音频/视频

                               pause()：暂停当前播放的音频/视频

                                 load() ：重新加载音频/视频元素

         script属性：

            currentSrc：返回当前音频/视频的 URL

            currentTime：设置或返回音频/视频中的当前播放位置（以秒计），设置可以调播到指定                                       时间

            duration：返回当前音频/视频的总长度（以秒计）

            ended ：返回当前视频是否已经结束

            paused ：返回当前视频是否暂停，返回一个布尔值

           playbackRate：设置或返回音频/视频播放的速度

   script事件

              play：当音频/视频已开始或不再暂停时

              pause ：当音频/视频已暂停时

              timeupdate：当目前的播放位置已更改时

             ended：当目前的播放列表已结束时

            loadedmetadata：当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。

                                           音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。

               例如：

video.addEventListener("loadedmetadata",metaDataHandler);
function metaDataHandler(e){
           range.max=video.duration;
        }  //把视频的时长赋值给rang.max

source:      <source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

    例如：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
 </audio> //如果第一个不支持就用第二个

      常见的 MIME 类型：

视频

• video/ogg
• video/mp4
• video/webm

音频

• audio/ogg
• audio/mpeg

canvas

1.创建canvas 

<canvas width="1200" height="600"></canvas>  宽高必须在行内设置

2.对canvas进行操作

 var canvas=document.querySelector("canvas");

 var ctx=canvas.getContext("2d");//原理是通过webgl

3.开始绘图

 ctx.fillRect(0,0,50,50);//创建一个矩形
//第一个参数是x轴坐标，第二参数是y轴坐标
//第三，四个分别是矩形的宽度与高度
  ctx.clearRect(0,0,25,25);//清除矩形

    var x=0;
        setInterval(animation,16);
        function animation(){
            x++;
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.fillRect(x,0,50,50);
        }//可以让矩形在x轴移动起来，因为他是一个不断描绘，清除的一个重复操作
 //但是你在clearRect（0,0）把前面的都清除了，就每次只能出现一个矩形
   

3.1ctx.strokeRect(50,50,100,5);描绘一个线条围成的矩形ctx.strokeStyle="red"; 线条的颜色变成红        色

 一二个参数是X,Y轴坐标，第三个是线条x轴宽度，若是0就会只会出现一条竖线

                                            第三是线条y轴宽度，若是0就会只会出现一条横线

 ctx.strokeStyle="red"; 
ctx.strokeRect(50,50,100,100);
//描绘一个线条是红色的矩形盒子

3.2设置颜色

     ctx. fillStyle:'red' 

 ctx.fillStyle="red";
        ctx.fillRect(50,50,100,100);
        ctx.fillStyle="black"
        ctx.fillRect(150,150,100,100); 
//背景颜色是红色的矩形盒子，和一个背景颜色是黑色的盒子

3.3  ctx.globalAlpha=0.5;设置透明度

      

ctx.globalAlpha=0.1;
ctx.fillRect(50,50,100,100);
ctx.strokeRect(200,200,50,50);
//这两个的透明度都会变成0.1

3.4ctx.createLinearGradient(0,0,100,0); 设置渐变颜色

   一二个参数是设置的x,y轴坐标

    一三个参数是x轴进行渐变，二四参数是y轴进行渐变

      fill.addColorStop(0,"red");

        fill.addColorStop(1,"yellow"); 需要配合使用 ，第一个参数是从百分之几到哪

例子

var fill=ctx.createLinearGradient(0,0,0,100);
//赋值给fill，是Y轴进行渐变
        fill.addColorStop(0,"red");
        fill.addColorStop(1,"yellow");
//从%0到%100是由红色变成黄色
        ctx.fillStyle=fill;
        ctx.fillRect(0,0,100,100);

3.5放射性渐变（从里往外扩散） 

   

var fill=ctx.createRadialGradient(50,50,0,0,50,50);
 //前三个参数分别是 开始圆心坐标 开始扩散半径
/前三个参数分别是 结束圆心坐标 结束扩散半径
        fill.addColorStop(0,"red");
        fill.addColorStop(1,"yellow");
        ctx.fillStyle=fill;
        ctx.fillRect(0,0,100,100);

例子：彩虹

           

var fill=ctx.createRadialGradient(100,100,0,100,100,100);
        fill.addColorStop(0.5,"rgba(255,0,0,0)");
//前50% 让他透明
        fill.addColorStop(0.5,"red");
        fill.addColorStop(0.57,"rgba(255,160,0,1)");
        fill.addColorStop(0.64,"rgba(255,255,0,1)");
        fill.addColorStop(0.71,"rgba(0,255,0,1)");
        fill.addColorStop(0.78,"rgba(0,255,255,1)");
        fill.addColorStop(0.85,"rgba(0,0,255,1)");
        fill.addColorStop(0.92,"rgba(255,0,255,1)");
        fill.addColorStop(1,"rgba(255,0,0,1)");
        ctx.fillStyle=fill;
        ctx.beginPath();
        ctx.arc(100,100,100,0,Math.PI/180*180,true);//创建一个半圆
        ctx.fill();

 3.6用图片作为填充色   var fill=ctx.createPattern(img,"repeat")  【这是给画的矩形进行背景填充图片，所以不行，下面有专门的放置图片的语法，在13条】

         注意：图片必须是小图片，大图片的话就会只显示一部分

     例如：

function loadImage(src){
           return new Promise(function(resolve,reject){
                var img=new Image();
                img.src=src
                img.onload=function(){
                    resolve(img);
                }
           })
       }
       init();
       async function init(){
          var img=await loadImage("./img/a.jpg");
        //   根据图像作为填充色，图片必须是小图，不能是大图
          var fill=ctx.createPattern(img,"repeat");
//等图片加载进来在进行填充
          ctx.fillStyle=fill;
          ctx.fillRect(0,0,800,600);
       }

3.7设置阴影 

ctx.shadowColor="#666";//设置阴影颜色
    ctx.shadowOffsetX=10; //设置阴影X轴偏移量
    ctx.shadowOffsetY=10;
    ctx.shadowBlur=10;   //设置模糊级数，越大越模糊
    ctx.fillStyle="red";
    ctx.fillRect(50,50,100,100);

    ctx.shadowOffsetX=0;  
//若在以下不设置这三个为0的话以后创建的矩形都会有阴影
    ctx.shadowOffsetY=0;
    ctx.shadowBlur=0;
    ctx.fillRect(200,200,100,100);

 笔触

1.ctx.moveTo(100,100); 画笔开始位置 （落笔的坐标） 

     ctx.lineTo(200,100);画笔从开始位置到下一次的点

     ctx.stroke();把描绘的点连起来

   例如

ctx.moveTo(100,100);
        ctx.lineTo(200,100);
        ctx.lineTo(200,200);
  //第一个从落笔到结束的地方
        ctx.moveTo(350,150);
        ctx.lineTo(250,150);
        ctx.lineTo(250,250);
//第二个从落笔到结束的地方
        ctx.stroke();  //把上面所有的点用线连起来
        ctx.fillStyle='red'//填充颜色
        ctx.fill();

2.        ctx.closePath();//关闭路径，将当前点连线到起始位置（之前不写这个描绘的点都是起始位置到结束位置，不会再把结束位置连到开始） 

例子

ctx.moveTo(100,100);
        ctx.lineTo(200,100);
        ctx.lineTo(200,200);
        ctx.closePath();//关闭路径，将当前点连线到起始位置
        ctx.stroke();

3. ctx.beginPath(); //开始路径，表示从fill填充开始到上面什么位置结束

                               作用2（不会把第一次画圆的结束点与下一次的开始点链接起来）

例子:

ctx.moveTo(100,100);
        ctx.lineTo(200,100);
        ctx.lineTo(200,200);
        ctx.lineTo(100,200);
        ctx.stroke();
 //开始路径，表示从fill填充开始到上面什么位置结束(上面的不会被fill填充)       
        ctx.beginPath(); 
        ctx.moveTo(200,200);
        ctx.lineTo(300,200);
        ctx.lineTo(300,300);
        ctx.lineTo(200,300);
        ctx.stroke();
        ctx.fill();

 4.ctx.lineWidth=20;指描绘线条的宽度

    5. ctx.lineCap：落笔开始与最后结束点的样式

                       butt：  默认。向线条的每个末端添加平直的边缘

                       round：向线条的每个末端添加圆形线帽。

                        square：向线条的每个末端添加正方形线帽

            生成三种不同的线条

                

6.lineJoin：当两条线交汇时产生什么角度

             miter：默认。创建尖角

              

              round:产生圆角

                 

             bevel：产生平角

              

     7.创建一个圆

 
ctx.arc(100,100,50,Math.PI/180*0,Math.PI/180*60，false);
//前三个参数分别是圆心坐标与半径
//第四个c参数这里是0，就会从圆心右面那个点开始画，是指画圆落笔的位置
//第五个参数，这里的60，是创建一个弧度是60的圆弧，改成360，就是一个圆
//最后一个参数默认是false,是从圆心右面那个点逆时针画60度
//如果是true的话就会从圆心右面那个点顺时针画300度

         例子创建一个圆弧

ctx.arc(100,100,50,Math.PI/180*0,Math.PI/180*360);
    ctx.stroke();
    ctx.beginPath();//不会把第一次画圆的结束点与下一次的开始点链接起来
    ctx.arc(100,100,40,Math.PI/180*0,Math.PI/180*360,true);
    ctx.stroke();

 例子：圆圈进度条

 function drawRing(x,y,r,angle,fill){
         angle-=90;
         ctx.beginPath();
         ctx.arc(x,y,r,Math.PI/180*270,Math.PI/180*angle,false)
         ctx.arc(x,y,r-10,Math.PI/180*angle,Math.PI/180*270,true);
         //ctx.closePath();
         if(!fill) ctx.stroke();
         if(fill){
             var fills=ctx.createRadialGradient(x,y,0,x,y,0.5);
             fills.addColorStop(0.5,"red");
             fills.addColorStop(1,"orange");
             ctx.fillStyle=fills;
             ctx.fill();
         }
    }
    var angle=0;
    setInterval(animation,16);

    function animation(){
        angle+=1;
        ctx.clearRect(0,0,canvas.width,canvas.height);
        drawRing(300,300,100,0);
        drawRing(300,300,100,angle,true);
    }

8.arcTo 画一个弧度的曲线  arcTo（x1,y1,x2,y2,r）,

 x1,y1是第一个控制点的坐标   x2,y2是第二个点的控制坐标，r是弧度的半径

弧度与上一个点，也就是这里的lineTo

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(20,20);           // 创建开始点
ctx.lineTo(100,20);          // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120);         // 创建垂直线
ctx.stroke();                // 绘制

9.quadraticCurveTo( cpx,cpy,x,y) 二次贝塞尔曲线：

cpx,cpy,是指贝塞控制点的坐标，x,y,是结束点的坐标

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

10.bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)三次贝塞尔曲线

     cpx1,cpy1第一个贝塞尔控制点的 x，y 坐标。

      cpx2,cpy2第二个贝塞尔控制点的 x，y 坐标。

        x,y 结束点的坐标

   例子

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

 

11.SVG 

var path=new Path2D("M 100 100 h 100 v 100 h -100 v-100 Z")
//M 100 100是指点的开始位置，h是横向画100，v是接着竖着画100 ,
//Z会把开始点结束点链接起来
 ctx.stroke(path)

例二

var path=new Path2D();
        path.arc(100,100,50,0,Math.PI/180*360);
//创建一个圆
        ctx.save();
        ctx.translate(300,300);
//移动距离
       ctx.fill(path);
//把圆填充到里面去
         ctx.restore();
//把圆的位置恢复到原始，不再是translate后的了
        ctx.fill(path)

12.ctx.fillText("欢迎来到好程序员！！",100,100)           文字是实体的

 ctx.strokeText("欢迎来到好程序员！！",0,0);        文字是线型的

   三个参数，第一个是需要添加的的文字，后两个文字的坐标

例子

 var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");
        ctx.font="20px 隶书";//修改字体大小与样式
        ctx.textAlign="center"; 
//让字体进行居中，是指把文字中间移动到下面100,100，的位置
        ctx.textBaseline="top";
//设置文字的基线对齐方式
     ctx.fillText("欢迎来到好程序员！！",100,100);//实体的文字
     ctx.strokeText("欢迎来到好程序员！！",0,0);//线型的字体

13. 图片放置

ctx.drawImage(img,要放置坐标X,要放置的坐标Y)

ctx.drawImage(img,要放置坐标X，放置的坐标Y，放置的图片的宽度，放置的图片高度)

13.1精灵图放置的参数

ctx.drawImage(img,精灵图元素的坐标X,精灵图元素的坐标Y,精灵图元素的宽度,精灵图元素的高度,放置后图片的坐标X,放置后图片的坐标Y,放置后图片的宽度,放置后图片的高度)

14. ctx.getImageData(e.offsetX,e.offsetY,1,1)  是点击canvas上的图片的坐标，前两个参数是鼠标点击的相对于canvas左上角的距离，后两个参数是点击的图片的范围，打印出来是

里面有个data属性，是一个uint8的二进制流就行存像素，若果你在 getImageData(e.offsetX,e.offsetY,1,1)后两个参数越大，数组的长度越大，若都是1，的话data数组的长度是4，存着rgba样式的每一个值

 存的是这个图片

14.1putImageData（data,x,y）作用把获取到的data图片重新添加到canvas上，后两个参数是重新放置到canvas的位置

例子，吸色器

 var canvas=document.querySelector("canvas");
        var ctx=canvas.getContext("2d");
        function loadImage(src){
            return new Promise(function(resolve,reject){
                var img=new Image();
                img.src=src;
                img.onload=function(){
                    resolve(img);
                }
            })
        }
 init();
      async  function init(){
            var img=await loadImage("./img/b.jpg");
            ctx.drawImage(img,0,0,1000,700);//把图片放在canvas上面
            canvas.addEventListener("click",clickHandler);
        }  //上面进行图片的预加载

        function clickHandler(e){
             var data=ctx.getImageData(e.offsetX,e.offsetY,1,1).data;//获取到data
             var color=`rgba(${data[0]},${data[1]},${data[2]},${data[3]})`;//赋值给color
             ctx.fillStyle=color;//把上面的color填充到下面创建的矩形里
             ctx.fillRect(1100,200,50,50);
   
--------------------------------------------------下面是putImageData案例，获取鼠标点击的图片在重新放到canvas的位置
               var data=ctx.getImageData(e.offsetX-50,e.offsetY-50,100,100);
            ctx.putImageData(data,1000,200);



}



         

15.canvas的出栈与入栈，与平移

   ctx.save() 入栈把以上描述的信息存到栈里

  ctx.restore() 出栈，把之前入栈的信息拿出来进行使用

  ctx.translate(x,y) 画布进行平移

 ctx.save(); //最开始先把最开始的原始样式添加到栈里面
 ctx.translate(100,100); //让画笔开始移动到100，的区域
  ctx.fillRect(0,0,100,100);//在这开始绘制矩形，在这里绘制的矩形是
100,100，位置，以为上面translate,
  ctx.restore();//把最开始的存到栈里的样式释放出来用
  ctx.fillRect(0,0,100,100);//矩形是画到0,0位置的

例子：形成一条颜色从红色渐变的移动的条

  

 var r=255;
        var i=0;
        setInterval(function(){
            r-=3;
            i+=20;
            ctx.save();
//执行前把translate(0,0)存起来，在最后在释放出来，让每次都是从0，0进行偏移，而不是从上一次的偏移量进行偏移
            ctx.fillStyle=`rgba(${r},0,0,1)`;
            ctx.translate(i,0);  //坐标是（20,0）（40,0）（60,0）...
            ctx.fillRect(0,0,20,20);
            ctx.restore();
        },20);

16.rotate 对于画布进行旋转而不是对于你画的矩形发生偏转

注意：画布旋转以后在上面绘图的位置也会发生变化

 ctx.translate(100,100);//先对画布左上角进行平移
  ctx.rotate(Math.PI/180*30);//再对画布以左上角为原点进行旋转
 ctx.fillRect(150,150,100,100); 

17.clip() canvas的剪裁：

    注意设定裁选区之后，无论在Canvas上绘制什么，只有落在裁选区内的那部分才能得以显示，其余都会被遮蔽掉

例如 ：创建了四个圆，在的第三个圆下面设置，ctx.clip(),那么第四个圆的样式只能在在第三个圆上显示，前提是第三个圆开始要设置ctx.beignPath(),把区域封住，不然会把第一个圆跟第二个圆也当做裁剪区域，第四个圆就会出现在第一二三个圆上

17.2 当使用裁切区clip()进行绘图后，可能需要取消该裁选区或者重新定义裁切区。在Canvas中，可以通过save()函数和restore()函数来实现——在构建裁切区之前保存状态，完成裁切区内的绘图之后进行状态读取

例子 

 function clips(x,y){
           ctx.save();
            ctx.beginPath();
            ctx.arc(x,y,20,0,Math.PI/180*360);
            ctx.closePath();
            ctx.clipRect();
            ctx.drawImage(img2,0,0,canvas.width,canvas.height);
//img2只有在裁剪区域才能展示出来
            ctx.restore();
        }

C3

选择器

.div1:hover
        {
            background-color: yellow;
        }//鼠标经过div1 颜色变黄
.div1:hover+.div2
        {
            left: 500px;
        }  //在鼠标经过div1的时候他的下一个兄弟div2会想左边移动500px


//总体效果：鼠标经过div1的时候div1变成黄色，并且div2向左偏移500px

  1.目标伪类选择器

    :target 超链接后目标样式

例如：

<style>
div{
            width: 800px;
            height: 500px;
            background-color: orange; 
//标签选择器，所有的div设置样式，因为下面的类选择器的权重大于标签选择器
            display: none;
        }
        #div2{
            background-color: skyblue;
        }
        #div3{
            background-color: rgb(135, 235, 152);
        }
        
        div:target{                //点击哪个div哪个显示
            display: block;
        }
</style>


   <a href="#div1">目标1</a>  
    <a href="#div2">目标2</a>//注意这里的herf内容必须是对应的ID
    <a href="#div3">目标3</a>
    <div id="div1" class="div1">1</div>
    <div id="div2" class="div2">2</div>
    <div id="div3" class="div3">2</div>


 <script>     //为了刷新页面第一次div1的样式显示
        if(!/#/.test(location.href)) location.href+="#div1"
    </script>    

          2.元素伪类选择器：

               :enabled，匹配每个已启用的元素（大多用在表单元素上）

               :disabled，匹配每个被禁用的元素（大多用在表单元素上）

               :checked，匹配每个已被选中的 input 元素（只用于单选按钮和复选框）

      例如：

<style>
  [type=checkbox]:disabled+label   
//当type是checkbox的被禁用的时候 他的下一个兄弟选择器（因为是+）label的颜色变成绿色 
如果是~他后面的兄弟选择器lable都变成绿色  
        {
            color: green;
        }
        [type=checkbox]:checked+label
//当type是checkbox的被选中的时候 他的下一个兄弟选择器label的颜色变成红色
        {
            color: red;
        }  
</style>

html:
 <input type="checkbox" disabled><label>游泳</label>
    <input type="checkbox"><label>唱歌</label>

3..否定伪类选择器

      :not(selector)  匹配非指定元素/选择器的每个元素

例如：

<style>
 div:not(.div3){
            color: red;
        } </style>  //除了.div3的color都变成红色

html:
<div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div> 

4.伪元素 

      ::first-letter   选择器的首字母

        ::selection 被用户选取的部分

        ::first-line 选择器的首行

例如：

.div3::first-letter
        {
            font-size: 25px;//.div3第一个字母2的样式将变成25px
        } 
 .div3::first-line//.div3第一行的样式将变成红色
        {
            color:red
        } 
.div3::selection
        {
            color:yellow;  //在选div3的时候，.div的字体颜色变成绿色，背景变成黑色
            background-color: black;
        } 

<div class="div3">2lkajsdlkjasdklajdslakjdsalskdj<br>aslkjdaslkjdakljsda</div>

5.属性选择器

1.

[title]
{
color:blue;
}
<h1 title="Hello world">Hello world</h1>
<a title="runoob.com" href="http://www.runoob.com/">runoob.com</a>
//将会把具有title属性的标签添加样式

 2.[title=runoob]{}将title属性等于runoob的标签添加样式

3.[title~=hello] { color:blue; } 将title属性有hello的标签添加样式

例如

[title~=hello]
{
	color:blue;
} 

<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
//这两个都会添加样式

4.[lang|=en] { color:blue; }下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:

例如：

[lang|=en]
{
	color:blue;
}

<h2>将适用:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<hr>
<h2>将不适用:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>

 5.通过标签是否有该属性在来添加样式

input[name] //只能给具有name属性的input标签添加属性
{
	width:150px;
	display:block;
	margin-bottom:10px;
	background-color:yellow;
}

Firstname:<input type="text" name="fname" value="Peter" size="20">
Lastname:<input type="text" name="lname" value="Griffin" size="20">
<input type="button" value="Example Button" >

@media媒体查询

1.引入的时候

<link rel="stylesheet" href="./b.css" media="(max-width:540px)"> 
//在页面的宽度小于540px的时候就会执行b.css文件里的样式

2.

<style>
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-flow: row-reverse nowrap;
        }
        li{
            padding: 10px 30px;
            background-color: orange;
        }
        li:hover
        {
            background-color: gold;
        }
        @media screen  and (max-width:540px){  
//当你的页面小于540px的时候就会栏显示
                ul{
                    flex-flow: column wrap;
                }
        }
    </style>

 <ul>
        <li>首页</li>
        <li>商品</li>
        <li>会员</li>
        <li>购物车</li>
        <li>关于我</li>
    </ul>

transform 动画

1.transform: translate(100px,200px); 

 例子显示两个图片进行翻转

    

.div2{
            width: 400px;
            height: 300px;
            perspective: 800px;
            position: relative;
        }
        .div2>img{
            width: 400px;
            height: 300px;
            backface-visibility: hidden; /*是为了把div2下img的背面变成不可见 */
            display: block;
            position: absolute;
            top:0;
            left: 0;
            transition:  all 0.5s;
        }
        .div2>img:nth-child(1){
            transform: rotateY(0deg);
        }
        .div2>img:nth-child(2){
            transform: rotateY(180deg);
            /* 这个地方旋转了180度相当于贴在了第一张图片后面 
            backface-visibility: hidden;显示他不可见*/
        }

        .div2:hover>img:nth-child(1){
            transform: rotateY(180deg);
        }
        .div2:hover>img:nth-child(2){
            transform: rotateY(360deg);
        }


 <div class="div2">
       <img src="./img/50-.jpg">
       <img src="./img/57-.jpg">
   </div> 

过渡动画（transition）与知识点2.动画（animation ）

1.transition

div{

  transition:  all 0.5s cubic-bezier(0,1.81,.83,.67) 1s; 
//第一个参数是所有样式都会产生动画，第二个参数是动画执行事件，第三个参数[获取贝塞尔方法工具](http://cubic-bezier.com/) 打开网址直接复制，第四个参数是1s之后在执行样式改变的动画

}
 transition:  background-color 0.5s; //只会产生颜色改变的动画

2.animation

 animation: name duration timing-function delay iteration-count direction fill-mode;

                第一个参数是动画的名字   第二个参数是动画执行的总时间，

                第三个参数是[获取贝塞尔方法工具](http://cubic-bezier.com/) 打开网址直接复制

                第四个参数是设置动画在启动前的延迟间隔。第五个参数是动画执行的次数Infinity是在                  一直执行  第五个参数是是否反向动画  第六个参数是再执行完动画后样式会不会保留动                 画后的样式，forwards，就是会保持动画完成的样式

animation-fill-mode: forwards;

    border 样式 

       border-image-source：url(./img/item_3.png) 是把边框的样式设置成图片，前提是你必须设置了边框的宽度

    例如

 div{
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: rgba(255,0,0,0.2);
            border:50px solid rgba(0,0,0,1) ;//设置了边框的宽度
            float: left;
            border-image-source: url(./img/item_3.png); 
//把图片设置成边框的样式
        }

     border-image-slice：指定图像的边界向内偏移：会用边框挤压里面的内容区域

             参数：  fill:会让图片在盒子的外面 （保留图像的中间部分）

                         可以填写数字，数字是文本的内容，数字越小，背景图片就会越大

      border-image-repeat 属性用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）。

    border-image-width  ：指定图像边界的宽度：

               。。。。。？

gradient渐变

1.linear-gradient

 .div1>div:nth-child(1){
            background: linear-gradient(red,yellow);
        }
        .div1>div:nth-child(2){
            background: linear-gradient(to right,red,yellow); 
//横向渐变从左向右
        }
        .div1>div:nth-child(3){
            background: linear-gradient(to right bottom,red,yellow);
  //从左上角去右下角渐变

        }
        .div1>div:nth-child(4){
            background: linear-gradient(black 33.3%,red 33.3%,red 66.6%,gold 66.6%);
//渐变将会成为很规整的颜色渐变
        }

2.radial-gradient     从里面向外面渐变颜色

        .div2>div:nth-child(1){
            background: radial-gradient(red,yellow) //从里面向外面渐变颜色
        }
        .div2>div:nth-child(2){
            border-radius: 100px;
            background: radial-gradient(at 75% 25%,white,red) 
//从%75的方向向%25的方向开始渐变，通过白色实现白色高亮
        }
        .div2>div:nth-child(3){
            border-radius: 100px;
            background: radial-gradient(rgba(255,0,0,0) 50%,red,yellow)
//实现一个空心圆，里面是白色//rgba(255,0,0,0)这里的目的是为了在前50%是透明的，往外开始渐变
        }
        .div2>div:nth-child(4){
//实现彩虹
            width: 200px;
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
            background: radial-gradient(at 50% 100% ,rgba(255,0,0,0) 50%,red 52%,orange 54%,yellow 56%,green 58%,#00FFFF 60%,blue 62%,purple 64%)
        }

实现拖拽 

    事件：dragstart：事件在用户开始拖动元素或选择的文本时触发，是被拖得元素进行监听

               drop：拖拽：事件是把拖动的元素放下后触发。是要拖到的位置进行监听的

               dragover： 在元素正在拖动到放置目标时触发：（是要拖到的位置进行监听的）

                                 注意：默认情况下，数据/元素不能放置到其他元素中。 如果要实现改功能，                                   我们需要防止元素的默认处理方法。我们可以通过调用 event.preventDefault

例子

  <div>
        <div></div>
        <div></div>
    </div>
    <img src="./item_3.png" draggable="true" id="img1">






var div=document.querySelector("div");
            var img=document.querySelector("img");
            img.addEventListener("dragstart",dragHandler);
            div.addEventListener("drop",dorpHandler);
            div.addEventListener("dragover",dragoverHandler);
            // div.addEventListener("")
            function dragHandler(e){
                // console.log(e)
                e.dataTransfer.setData("text",this.id);
                //因为拿不到要拖拽的元素，所以把要拖拽的元素的id存到
                //e.dataTransfer.setData的新添的text属性里面
            }
            function dragoverHandler(e){
                e.preventDefault();
                //要阻止要托地址的禁止拖拽的默认事件
            }
            function dorpHandler(e){
                // console.log(e.dataTransfer.getData("text"))
                // console.log(e.target)
                e.target.appendChild(document.querySelector('#'+e.dataTransfer.getData("text")))
                //这里的e.target是div,给他通过e里面添加刚才text appendChild到div里面
            }