CSS3 H5 第一周

5月24日

H5新增语义标签

1、header

<header> 标签定义文档的页眉（介绍信息）。

2、nav

<nav> 标签定义导航链接的部分。

3、article

<article> 标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

4、footer

<footer> 标签定义文档或节的页脚。

<footer> 元素应当含有其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

您可以在一个文档中使用多个 <footer> 元素。

5、aside

使用例子：页面侧边栏、广告、友情链接、文章引语（内容摘要）。

6、section

一个主题性的内容分组，通常包含一个头部（header），可能还包含一个尾部（footer）。div与section的比较：div应用更广泛，只要你想为一个区域定义一个样式，就可以使用div标签，section包含的内容是一个更明确的主题，通常有标题区域。

7、main

显示页面的主体内容，每个页面只能包含一个main标签main标签中不包含网站标题、logo、主导航、版权声明等信息。

8、figure
用于对元素进行组合

9、<figcaption> 标签定义 figure 元素的标题，"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

css3 弹性盒子

1. CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

2. 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局.弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

3.CSS3 弹性盒子常用属性

属性	                        描述
flex-direction	指定弹性容器中子元素排列方式

flex-wrap	    设置弹性盒子的子元素超出父容器时是否换行

flex-flow	    flex-direction 和 flex-wrap 的简写

align-items	    设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式

align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式

- (1). flex-direction 属性
  决定项目的方向。

  注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不   起作用
  值	                         描述
  row	               默认值。元素将水平显示，正如一个行一样。
  row-reverse	       与 row 相同，但是以相反的顺序。
  column	           元素将垂直显示，正如一个列一样。
  column-reverse	   与 column 相同，但是以相反的顺序。

- (2).flex-wrap 属性
   flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定    了新行堆叠的方向
   值	            描述
  nowrap	    默认值。规定元素不拆行或不拆列。
  wrap	        规定元素在必要的时候拆行或拆列。
  wrap-reverse	元素在必要的时候拆行或拆列，但是以相反的顺序。
  
- (3).flex-flow 属性
  flex-flow属性是flex-direction属性和flex-wrap属性的简写形     式，默认值为row nowrap。

- (4).align-items属性
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
值	            描述
stretch	    默认值。项目被拉伸以适应容器。
center	    项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
baseline	项目位于容器的基线上。

- (5).justify-content属性
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

值	描述
flex-start	    默认值。项目位于容器的开头。
flex-end	    项目位于容器的结尾。
center	        项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内


4.弹性子元素属性
属性	          描述
order	      设置弹性盒子的子元素排列顺序。

flex-grow	  设置或检索弹性盒子元素的扩展比率。

flex-shrink	  指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-basis	  用于设置或检索弹性盒伸缩基准值。

flex	      设置弹性盒子的子元素如何分配空间。

align-self	  在弹性子元素上使用。覆盖容器的 align-items属性。

参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

渐变色

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变（gradients）：

1- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

2- 径向渐变（Radial Gradients）- 由它们的中心定义

#5月25日

filter滤镜

1   grayscale灰度

2　　sepia褐色（有种复古的旧照片感觉）

3　　saturate饱和度

4　　hue-rotate色相旋转

5　　invert反色

6　　opacity透明度

7　　brightness亮度

8　　contrast对比度

9　　blur模糊

10　drop-shadow阴影

关键帧动画

1、定义和用法
      通过 @keyframes 规则，您能够创建动画。
      创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
      在动画过程中，您能够多次改变这套 CSS 样式。
      以百分比来规定改变发生的时间，或者通过关键词 "from" 和         "to"，等价于 0% 和 100%。
      0% 是动画的开始时间，100% 动画的结束时间。
    
    注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
    
2.CSS3动画以及语法
     当我们在@keyframes 中创建动画时，请把它捆绑到某个选择器，否      则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可      将动画绑定到选择器：

     - 规定动画的名称
     - 规定动画的时长
li: <style>
        div{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            text-align: center;
            
            
        }
        div:hover{
            animation: enjoy 10s 1;
        }
        @keyframes enjoy{
            0%{
                width: 100px;
                color: greenyellow;
                font-size: 35px;
            }
            10%{
                width: 600px;
                transform: rotate(50deg);
            }
            20%{
                height: 600px;
                background-color: red;
            }
            30%{
                border: 20px solid gold;
                background-color: rgb(0, 255, 106);
                animation-name: xuanzhuan;
             /* 动画时长  */
            
             /* 动画次数   infinite：无限次*/
             animation-iteration-count:infinite ;
              /*速率 贝塞尔曲线 */
              animation-timing-function: linear;
              /* 延迟时间 */
              animation-delay: 1s;
              /*停止时的状态  */
              animation-fill-mode: forwards;
              /* reverse 反向   alternate来回转*/
              
            }
            40%{
              transform: rotate(360deg);
              background-color: lightcoral;
            }
            60%{
               transform: rotate(270deg);
               background-color: #000;
               width: 200px;
               height: 200px;
               font-size: 20px;
            }
            81%{
               color: hotpink;
              width: 1200px;
              height: 1200px;
            }
            100%{
                font-size: 50px;
               color: skyblue;
              background-color: rgb(207, 221, 17);
            }
        }
    </style>
</head>
<body>
    <div>针不搓</div>
</body>

过渡动画 transition (补间动画)

 transition :需要过渡的动画  时间  贝塞尔曲线
 transition: border-radius  2s cubic-bezier(0.075, 0.82,    0.165, 1);
 
 过渡属性
        transition-property: all;
        过渡持续时间
        transition-duration: 0. 5s;
        过渡的变化过程
        transition-timing-function: ease;
        过渡延迟时间
        transition-delay: 0s;
       

3D效果 perspective

perspective:景深 视距  子标签需求  给父标签添加属性

 <style>
        .box{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            /* 景深 视距  子标签需求  给父标签添加属性  */
            perspective:500px ;
        }
        .box div{
            height: 100px;
            width: 100px;
            background-color: orange;
            margin: 100px auto;
            transition: all 1s;
        }
        .box div:hover{
            /* transform: translateX(100px); */
            transform: rotateY(290deg) scale(3);
        }
    </style>
</head>
<body>
    <div class="box">
        <div>转不转</div>
    </div>
</body>

媒体查询@media

 在不同的 屏幕尺寸下 ，显示不同的样式
        1.屏幕类型
        2.媒体特性  尺寸
        
 li: <style>
        div{
            height: 100px;
            background-color: red;
            
        }
        @media only screen and (min-width:520px){
            /* 屏幕尺寸大于 520 的样式 */
            div{
                background-color: lightblue;
            }
        }
        @media all  and (min-width:550px){
             /* 屏幕尺寸大于 550 的样式 */
            
            div{
                background-color: black;
            }
        }
        @media only screen and (min-width:820px)and (max-width:900px){
             /* 屏幕尺寸大于 820  小于900px的样式 */
            
            div{
                background-color: orange;
            }
        }
    </style>

#5月26日

单位

相对单位
         px 
         em  rem
绝对单位
         cm,
         mm,
         pt,
		 pc,
		 in
   默认字体大小16px 
   1em相对于父元素字体的大小*1
   设置 font-size:10px; 
   1rem 相对于根元素字体大小*1 //10px

移动端touch事件

<style>
    div{
        width: 200px;
        height: 200px;
        transition: all 1s;
    }
</style>
</head>
<body>
    <div>看到颜色</div>
</body>
<script>
     var odiv= document.querySelector('div')
    //  touch 触摸 start
    // 移动端只是有了专门的事件类型
     odiv.addEventListener('touchstart',function(e){
        //  e 移动端事件
        // 其中touch 类似于 pc 的target
        // touches 是个类数组
        // 因为移动端可以多手指操作
        // e.touches[0].clientX
        // e.touches[0].pageX
        console.log("事件参数",e.touches[0]);
        this.style.borderRadius="50%"
        odiv.style.backgroundColor = randomColor()
     })
    //  移动事件
     odiv.addEventListener('touchmove',function(){
          odiv.style.backgroundColor = randomColor()
          odiv.innerHTML = 'touch move'
     })
    //  触摸结束
     odiv.addEventListener('touchend',function(){
          odiv.style.backgroundColor = randomColor()
          odiv.innerHTML = 'touch end'
     })

    //  被动取消
    odiv.addEventListener('touchcancel',function(){
          odiv.style.backgroundColor = randomColor()
          odiv.innerHTML = 'touch cancel'
     })

    //  随机颜色  随机色
    // randomNum(10,30) 10-30整数
    function randomNum(min = 10,max = 30){
        min = Math.min(max,min)
        max = Math.max(max,min)
      return  parseInt(Math.random()*(max-min+1)+min)
    }
    function randomColor(){
        var r = randomNum(0,255)
        var g = randomNum(0,255)
        var b = randomNum(0,255)
        return `rgb(${r},${g},${b})`
    }
     
</script>
需要使用移动端调试！！

移动端横竖屏事件

<body>
    横竖屏:<span></span>
    角度:<div></div>
    <img src="./练习6/img/5.jpg" alt="" width="200px" height="300px">
</body>
<script>
    // 从pc端进入到移动端 界面没效果
    // 通常情况下浏览器没反应过来 要刷新一下页面
    var ospan = document.querySelector('span')
    var odiv = document.querySelector('div')
    var oImg = document.querySelector('img')
    window.onorientationchange = function(){
        console.log("获取旋转角度",window.orientation);
        switch (window.orientation) {
            case 0:{
    // 竖屏
            ospan.innerHTML="竖屏"
            odiv.innerHTML = "0度"
            oImg.src = "./练习6/img/1.jpg"
                break;
            }
            case 90:{
    // 横屏
            ospan.innerHTML="横屏"
            odiv.innerHTML = "90度"
            oImg.src = "./练习6/img/2.jpg"
                break;
            }
    // 右横屏
            case -90:{
            ospan.innerHTML="右横屏"
            odiv.innerHTML = "-90度"
            oImg.src = "./练习6/img/3.jpg"
                break;
            }

        }
    }
</script>
需要使用移动端调试！！

5月27日

移动端插件使用

1.touch.js

<body>
    <img src="./练习6/img/4.jpg" alt="" width="300" class="img1">
    <img src="./练习6/img/3.jpg" alt="" width="300" class="img2">
</body>
<script src="./封装js/touch-0.2.14.js"></script>
<script>
    //  touch.on(参数1,参数2,参数3)
    // 参数1:执行该事件的标签元素或者是选择器对应的对象
    // 参数2:手势事件类型(可以多个 空格隔开)
    // 参数3:事件函数
    var oimg = document.querySelector(".img1")
    touch.on(".img1","touchstart",function(e){
        var even = e || window.event
        // 阻止浏览器默认
        event.preventDefault();
        console.log("------------",e);
        console.log("this:",this);
    })
// swipe
     var x = 0;
     var y = 0;
     touch.on(".img2","swipeleft",function(){
         console.log("swiper left");
        //  模板字符串反引号
        x-=100;
        this.style.transform = `translate3d(${x}px,${y}px,0)`
     })

     touch.on(".img2","swiperight",function(){
         console.log("swiper right");
        //  模板字符串反引号
        x+=100;
        this.style.transform = `translate3d(${x}px,${y}px,0)`
     })

     touch.on(".img2","swipeup",function(){
         console.log("swiper bottom");
        //  模板字符串反引号
       
        y+=100;
        this.style.transform = `translate3d(${x}px,${y}px,0)`
     })
     touch.on(".img2","swipedown",function(){
         console.log("swiper top" );
        //  模板字符串反引号
        
        y-=100;
        this.style.transform = `translate3d(${x}px,${y}px,0)`
     }) 
</script>

2.iscroll.js

1．使用iScroll时候文档的结构
         列表容器>数据容器>数据
         因为这个iScroll是改变的数据容器的位置
2.列表容器添加属性overflow: hidden;
        列表容器的大小是小于内容的
        
     
<script src="./封装js/iscroll.js"></script>
<script>
    // 第一个参数是你的容器
    // 第二个参数 配置信息
    var myscroll = new IScroll(".view",{
        // 是否启用反弹效果
        bounce:true,
    })
    console.log("myscroll:",myscroll);
    var btn = document.querySelector('button')
    btn.addEventListener('touchstart',function(){
        myscroll.scrollTo(600,600,2000)
    })
</script>

3.swiper.js

<style>
        .swiper-container,
        .swiper-warpper,
        img{
            width: 400px;
            height: 300px;
        }
        
       
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./练习6/img/1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./练习6/img/2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./练习6/img/3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./练习6/img/4.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./练习6/img/5.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
</body>
<script src="./练习6/js/swiper.js"></script>

<script>
    // 参数1 swiper 容器  
    // 参数2 配置信息
    new Swiper(".swiper-container",{
        direction: 'vertical',
        loop:true,
        effect:"cube",
        // 分页器 就是轮播图下面那个点
        // 上面轮播分页  写的什么 复制
        pagination:".swiper-pagination",
        // 滚动条
        scrollbar:".swiper-scrollbar",

          // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // 速度
    speed:1000
    })

</script>

4.zepto.js

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
 
</body>
<script src="./练习6/js/zetop.js"></script>
<script src="./练习6/js/animation.js"></script>
<script>
    $("div").html("移动端jq zepto").css({
        border:"1px solid red",
        height:"40px",
        marginBottom:"10px",
        textAlign:"center",
        lineHeight:"40px"
    })
    $("div").click(function(){
       
        $(this).css({
            backgroundColor:"skyblue"
        })
        // 移动端动画需要引入这个动画库animate.js
        // 第一个参数是动画的属性和值
        // 第二个参数是动画持续时间
        // 第三个参数是移动速率 贝塞尔曲线 ease
        // 第四个参数是 动画结束的回调函数
        // 第五个参数延迟时间
        $(this).animate({
            marginBottom:"200px",
            height:"100px",
            lineHeight:"100px"
        },2000,"linear",function(){
            $(this).html("动画结束")
        },200)
    })
</script>

5.zeoto 手势

<body>
    <div>div-1</div>
    <div>div-2</div>
    <div>div-3</div>
    <div>div-4</div>
    <div>div-5</div>
    <div>div-6</div>
    <div>div-7</div>
    <div>div-8</div>
    <div>div-9</div>
    <div>div-10</div>
</body>
<script src="./练习6/js/zetop.js"></script>
<script src="./练习6/js/touch.js"></script>
<script>
    $("div").css({
        border:"1px solid red",
        height:"40px",
        marginBottom:"5px"
    })
    $("div").eq(0).html("测试")
    
    // pc端是click
    // 移动端用tap 切换到手机调试模式
    $("div").eq(1).tap(function(){
        $(this).html("单击事件")
    })
    $("div").eq(2).doubleTap(function(){
        $(this).html("双击事件")
    })
    $("div").eq(3).longTap(function(){
        $(this).html("长按事件")
    })
    $("div").eq(4).swipe(function(){
        $(this).html("清扫事件")
    })
    $("div").eq(5).swipeLeft(function(){
        $(this).html("左清扫事件")
    })
    $("div").eq(6).swipeRight(function(){
        $(this).html("右清扫事件")
    })
    $("div").eq(7).swipeUp(function(){
        $(this).html("上清扫事件")
    })
    $("div").eq(8).swipeDown(function(){
        $(this).html("下清扫事件")
    })
</script>