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'); }