一阶段项目问题整理

1.引入网页标志：

<link rel="shortcut icon" href="图片路径" type="image/x-icon"/>

2.最大最小宽(兼容问题)：

   mix-width（最小）  max-width（最大）

3.插入视频：

 <video src="视频路径" ></video>

 controls="controls"视频的播放按钮和进度条

 loop=”loop“ 循环播放

 autoplay="autoplay"自动播放

 自适应div：width=100%； height=100%； object-fit: fill；

4.overflow：hidden；超出部分隐藏

5.background:rgba(255,255,255,0.5)：前三个是颜色最后一个是透明度；（他不会影响子div）

6.opacity: 0.5;设置透明度 （会影响子div）

7.    display: none;    display: block;  div隐藏 显示

8.图片轮播和移入下面文字停止定时器：

<div id="Middle_tp">
    <div id="Middle_tp_tu"></div>
    <div id="0" class="Middle_tp_wz" onMouseOver="yr(1)" onMouseOut="yc()">
        鸡里奥宝典
    </div>
    <div id="1" class="Middle_tp_wz" onMouseOver="yr(2)" onMouseOut="yc()">
        武装战姬幸运武装
    </div>
    <div id="2" class="Middle_tp_wz" onMouseOver="yr(3)" onMouseOut="yc()">
        武装战姬全新上架
    </div>
    <div id="3" class="Middle_tp_wz" onMouseOver="yr(4)" onMouseOut="yc()">
        LPL常规赛收官战
    </div>
    <div id="4" class="Middle_tp_wz" onMouseOver="yr(5)" onMouseOut="yc()">
        五折皮肤限时销售
    </div>
</div>
js部分
<script>
var aa = ["url(../image/1522980091.png)","url(../image/1522376192.jpg)","url(../image/1522635210.jpg)","url(../image/1523153069.jpg)","url(../image/1522981233.jpg)"];
    var bb = document.getElementById('Middle_tp_tu');
    var cc = document.getElementsByClassName('Middle_tp_wz');
    var i =-1;
    var ff = null;
     ff=setInterval(function(){
        i++;
        if(i==aa.length){
             i=0;
        }
        bb.style.backgroundImage=aa[i];
        for(var k=0;k<cc.length;k++){
            cc[k].style.backgroundColor= null;
            cc[k].style.color= null;
        }
        cc[i].style.backgroundColor= "#303030";
        cc[i].style.color= "#E9C054";    
    },1500);
    function yc(){
    ff=setInterval(function(){
        i++;
        if(i==aa.length){
             i=0;
        }
        bb.style.backgroundImage=aa[i];
        for(var k=0;k<cc.length;k++){
            cc[k].style.backgroundColor= null;
            cc[k].style.color= null;
        }
        cc[i].style.backgroundColor= "#303030";
        cc[i].style.color= "#E9C054";
    },1500);
}
    function yr(num){
        clearInterval(ff);
        for(var i = 0;i<cc.length;i++){
                cc[i].style.background = "black";
                cc[i].style.color = "white";
        }
        if(num==1){
            bb.style.backgroundImage=aa[0];
            cc[0].style.background = "#303030";
            cc[0].style.color = "#E9C054";
        }else if(num==2){
            bb.style.backgroundImage=aa[1];
            cc[1].style.background = "#303030";
            cc[1].style.color = "#E9C054";
        }else if(num==3){
            bb.style.backgroundImage=aa[2];
            cc[2].style.background = "#303030";
            cc[2].style.color = "#E9C054";
        }else if(num==4){
            bb.style.backgroundImage=aa[3];
            cc[3].style.background = "#303030";
            cc[3].style.color = "#E9C054";
        }else if(num==5){
            bb.style.backgroundImage=aa[4];
            cc[4].style.background = "#303030";
            cc[4].style.color = "#E9C054";
        }
    }
</script>

9.鼠标移入父div操作子div：

（鼠标移入从底部出来一个div）

<div id="top_tu">
        <div id="content">武装战姬 厄运小姐</div>
    </div>



#top_tu{
         400px;
        height: 145px;
        background-image: url(../image/01.jpg);
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }
    #content{
         400px;
        height: 145px;
        color: white;
        position: absolute;
        bottom: -145px;
        background-color: rgba(0,0,0,0.5);
        transition: transform ease 1.3s;
        text-align: center;
        line-height: 70px;
    }
    #top_tu:hover #content{
        transform: translate3d(0,-100%,0);（x轴，y轴，z轴）

10.鼠标移入div背景图放大：（transform: scale(1.1); 等倍放大默认是1）

<div class="wai_div">
        <div class="tu2" style="margin-top: 0px; background-image: url(../image/10.htm)"></div>
</div>



    .tu2{
         195px;
        height: 70px;
        float: left;
        margin-top: 10px;
        cursor: pointer;
        transition:1s;
    }
    .tu2:hover{
        transform: scale(1.1);
    }
    .wai_div{
         195px;
        height: 70px;
        overflow: hidden;
        float: left;
    }

11.transition: 2s; 延迟2s显示

12.点击刷新页面

 <div id="shuaxin" onClick="replaceDoc()"></div>


js部分
function replaceDoc()
{
    window.location.replace('Untitled-fuwen1.html');
}