當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

视频分享网站首页：主体框架完成

發布時間：2023/12/20 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了视频分享网站首页：主体框架完成小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

html代碼：

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/> <title>index</title> <link?type="text/css"?rel="stylesheet"?href="index.css"/> </head> <body> <div?id="head">網頁頭部?總高96px???顏色是?#FDFDFD</div> <div?id="menu">導航條???總高48px???顏色是?#FF6600</div>  <div?class="hotBox"><div?class="bigHotVideo"><div?class="bigHotVideoImg">????<img?src="big.jpg"?style="width:432px;?height:248px;"?title="行車記錄儀"/><img?src="BigHot.png"?class="videoMark"/><div?class="bigLonger"><font?class="hotVideomeg2_5"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br></div></div></div><div?class="hotVideo"><div?class="hotVideoImg">????<img?src="drfIMG.jpg"?class="hotImg"/><img?src="hot.png"?class="videoMark"/><img?src="shenmask.png"?class="hotMask"/><div?class="hotLonger"><font?class="hotVideomeg2_5"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br></div><div?style="display:none"?class="hotVideoMeg">????????<font?class="hotVideomeg2"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br><font?class="hotVideomeg3">無節操上演男男“擁吻"</font><br><font?class="hotVideomeg3">1453次播放</font>??</div><div?style="position:absolute;display:none"?class="hotPlay">????????<img?src="play.png"/>??</div><div?style="position:absolute;?display:none;"?class="hotAdd"><img?src="add.png"/>??</div></div></div><div?class="hotVideo"><div?class="hotVideoImg">????<img?src="drfIMG.jpg"?class="hotImg"/><img?src="hot.png"?class="videoMark"/><img?src="shenmask.png"?class="hotMask"/><div?class="hotLonger"><font?class="hotVideomeg2_5"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br></div><div?style="display:none"?class="hotVideoMeg">????????<font?class="hotVideomeg2"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br><font?class="hotVideomeg3">無節操上演男男“擁吻"</font><br><font?class="hotVideomeg3">1453次播放</font>??</div><div?style="position:absolute;display:none"?class="hotPlay">????????<img?src="play.png"/>??</div><div?style="position:absolute;?display:none;"?class="hotAdd"><img?src="add.png"/>??</div></div></div><div?class="hotVideo"><div?class="hotVideoImg">????<img?src="drfIMG.jpg"?class="hotImg"/><img?src="hot.png"?class="videoMark"/><img?src="shenmask.png"?class="hotMask"/><div?class="hotLonger"><font?class="hotVideomeg2_5"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br></div><div?style="display:none"?class="hotVideoMeg">????????<font?class="hotVideomeg2"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br><font?class="hotVideomeg3">無節操上演男男“擁吻"</font><br><font?class="hotVideomeg3">1453次播放</font>??</div><div?style="position:absolute;display:none"?class="hotPlay">????????<img?src="play.png"/>??</div><div?style="position:absolute;?display:none;"?class="hotAdd"><img?src="add.png"/>??</div></div></div><div?class="hotVideo"><div?class="hotVideoImg">????<img?src="drfIMG.jpg"?class="hotImg"/><img?src="hot.png"?class="videoMark"/><img?src="shenmask.png"?class="hotMask"/><div?class="hotLonger"><font?class="hotVideomeg2_5"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br></div><div?style="display:none"?class="hotVideoMeg">????????<font?class="hotVideomeg2"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br><font?class="hotVideomeg3">無節操上演男男“擁吻"</font><br><font?class="hotVideomeg3">1453次播放</font>??</div><div?style="position:absolute;display:none"?class="hotPlay">????????<img?src="play.png"/>??</div><div?style="position:absolute;?display:none;"?class="hotAdd"><img?src="add.png"/>??</div></div></div><div?class="hotVideo"><div?class="hotVideoImg">????<img?src="drfIMG.jpg"?class="hotImg"/><img?src="hot.png"?class="videoMark"/><img?src="shenmask.png"?class="hotMask"/><div?class="hotLonger"><font?class="hotVideomeg2_5"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br></div><div?style="display:none"?class="hotVideoMeg">????????<font?class="hotVideomeg2"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br><font?class="hotVideomeg3">無節操上演男男“擁吻"</font><br><font?class="hotVideomeg3">1453次播放</font>??</div><div?style="position:absolute;display:none"?class="hotPlay">????????<img?src="play.png"/>??</div><div?style="position:absolute;?display:none;"?class="hotAdd"><img?src="add.png"/>??</div></div></div><div?class="hotVideo"><div?class="hotVideoImg">????<img?src="drfIMG.jpg"?class="hotImg"/><img?src="hot.png"?class="videoMark"/><img?src="shenmask.png"?class="hotMask"/><div?class="hotLonger"><font?class="hotVideomeg2_5"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br></div><div?style="display:none"?class="hotVideoMeg">????????<font?class="hotVideomeg2"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br><font?class="hotVideomeg3">無節操上演男男“擁吻"</font><br><font?class="hotVideomeg3">1453次播放</font>??</div><div?style="position:absolute;display:none"?class="hotPlay">????????<img?src="play.png"/>??</div><div?style="position:absolute;?display:none;"?class="hotAdd"><img?src="add.png"/>??</div></div></div><div?class="hotVideo"><div?class="hotVideoImg">????<img?src="drfIMG.jpg"?class="hotImg"/><img?src="hot.png"?class="videoMark"/><img?src="shenmask.png"?class="hotMask"/><div?class="hotLonger"><font?class="hotVideomeg2_5"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br></div><div?style="display:none"?class="hotVideoMeg">????????<font?class="hotVideomeg2"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br><font?class="hotVideomeg3">無節操上演男男“擁吻"</font><br><font?class="hotVideomeg3">1453次播放</font>??</div><div?style="position:absolute;display:none"?class="hotPlay">????????<img?src="play.png"/>??</div><div?style="position:absolute;?display:none;"?class="hotAdd"><img?src="add.png"/>??</div></div></div><div?class="hotVideo"><div?class="hotVideoImg">????<img?src="drfIMG.jpg"?class="hotImg"/><img?src="hot.png"?class="videoMark"/><img?src="shenmask.png"?class="hotMask"/><div?class="hotLonger"><font?class="hotVideomeg2_5"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br></div><div?style="display:none"?class="hotVideoMeg">????????<font?class="hotVideomeg2"><strong><大鍋fun>歪果仁玩壞西游</strong></font><br><font?class="hotVideomeg3">無節操上演男男“擁吻"</font><br><font?class="hotVideomeg3">1453次播放</font>??</div><div?style="position:absolute;display:none"?class="hotPlay">????????<img?src="play.png"/>??</div><div?style="position:absolute;?display:none;"?class="hotAdd"><img?src="add.png"/>??</div></div></div> </div><p><div?style="width:100%;?height:100px;?background-color:#FF6600;"></div>  <hr?class="hr1"?/> <div?class="newBox"><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div></div><div?style="width:100%;?height:100px;?background-color:#FF6600;"></div>  <hr?class="hr1"?/> <div?class="newBox"><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div><div?class="newVideo"><div?class="newVideoImg">????<img?src="drfIMG.jpg"?class="newImg"/><img?src="mask.png"?class="newMask"?title="行車記錄儀"/><div?class="newVideoMeg">????????<font?class="hotsLonger">20:19</font></div><div?style="display:none"?class="newAdd"><img?src="add.png"/></div><div?class="newLonger"><font?class="newVideomeg4">[VICE?報道]?探秘薩林納斯谷州</font><br><font?class="newVideomeg5">上傳者：<span?class="newVideomeg4">何洪波</span></font><br><font?class="newVideomeg5">4.49萬次播放  11次評論</font><br></div></div></div></div><div?style="width:100%;?height:100px;?background-color:#FF6600;"></div> <hr?class="hr1"?/> <div?id="end"?style="width:100%;?height:90px;?background-color:#EDEDED;">底部logo??高：90px???顏色是?#EDEDED</div> <hr?class="hr1"?/> <div?id="end"?style="width:100%;?height:225px;?background-color:#F5F5F5;">底部信息?高：225px??顏色是?#F5F5F5</div><script?type="text/javascript"?src="index.js"></script></body> </html>

javascript代碼：

//?JavaScript?Document /*?最新視頻特效?*/ (function(){//?檢測瀏覽器寬度，需要在頁面加載的時候執行一次//?在瀏覽器尺寸變化的時候，也要執行check();window.onresize?=?check;//?瀏覽器寬度改變的時候再執行檢測函數//?根據瀏覽器寬度控制視頻增減函數function?check(){var?width=document.documentElement.clientWidth;//?得到瀏覽器寬度if(width?>?701?&&?width?<?900){//?中等var?newVideo?=?document.getElementsByClassName("newVideo");//?隱藏最后兩個層newVideo[newVideo.length-1].style.display?=?"none";//?隱藏第二個盒子里的層newVideo[newVideo.length-2].style.display?=?"none";newVideo[(newVideo.length/2)-1].style.display?=?"none";//?隱藏第一個盒子里的層newVideo[(newVideo.length/2)-2].style.display?=?"none";var?newBox?=?document.getElementsByClassName("newBox");//?改變盒子的padingnewBox[0].style.padding?="0px?0px?190px?0px";//?第一個盒子newBox[1].style.padding?="0px?0px?190px?0px";//?第二個盒子}else?if(width?<?700){//?最小var?newVideo?=?document.getElementsByClassName("newVideo");//?顯示最后兩個層newVideo[newVideo.length-1].style.display?=?"";//?顯示第二個盒子里的層newVideo[newVideo.length-2].style.display?=?"";newVideo[(newVideo.length/2)-1].style.display?=?"";//?顯示第一個盒子里的層newVideo[(newVideo.length/2)-2].style.display?=?"";var?newBox?=?document.getElementsByClassName("newBox");//?改變盒子的padingnewBox[0].style.padding?="0px?0px?582px?0px";//?第一個盒子newBox[1].style.padding?="0px?0px?582px?0px";//?第二個盒子}else{//?最大var?newVideo?=?document.getElementsByClassName("newVideo");//?顯示最后兩個層newVideo[newVideo.length-1].style.display?=?"";//?顯示第二個盒子里的層newVideo[newVideo.length-2].style.display?=?"";newVideo[(newVideo.length/2)-1].style.display?=?"";//?顯示第一個盒子里的層newVideo[(newVideo.length/2)-2].style.display?=?"";var?newBox?=?document.getElementsByClassName("newBox");//?改變盒子的padingnewBox[0].style.padding?="0px?0px?190px?0px";//?第一個盒子newBox[1].style.padding?="0px?0px?190px?0px";//?第二個盒子}}//?監測頭部window.onscroll?=?function?()?{?var?top?=?document.documentElement.scrollTop?||?document.body.scrollTop;//?獲取下拉條和瀏覽器頂部的距離var?head?=?document.getElementById("head");if(top>20){//?大于20px就浮動head.style.position="fixed";//?浮動head.style.borderBottom="4px?solid?#eb7429";//?浮動的時候，底部出現4px的邊框head.style.height="64px";//?除去下邊框高度64px}else{//?小于20px就固定head.style.position="";head.style.height="96px";//?固定的時候高度恢復到96pxhead.style.borderBottom="";}} /*?最新視頻特效?*/ var?newVideo?=?document.getElementsByClassName("newVideo"); var?newMask?=?document.getElementsByClassName("newMask"); var?newVideoMeg?=?document.getElementsByClassName("newVideoMeg"); var?newAdd?=?document.getElementsByClassName("newAdd"); for(var?i=0;i<newVideo.length;i++){/*之所以用到閉包，原因是：內部函數在使用外部變量時使用引用的方式，其實相當于java中的引用傳遞，而非值傳遞。傳遞進來的引用只相當于一個指針，指向的是一個內存地址，這個內存地址存放的才是具體的值，而外面的循環會不斷的修改這個存放地址中的值，所以最后循環結束之后，參數的值只能找到最后一個。?*/(function(){var?p?=?i;newVideo[p].onmouseover?=?function(){newVideoMeg[p].style.display?=?"none";newAdd[p].style.display?=?"";newMask[p].style.opacity?=?"1";newMask[p].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)"}newVideo[p].onmouseout?=?function(){newVideoMeg[p].style.display?=?"";newAdd[p].style.display?=?"none";newMask[p].style.opacity?=?"0";newMask[p].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)"}})();? } /*?最熱視頻特效?*/ var?hotVideo?=?document.getElementsByClassName("hotVideo"); var?hotMask?=?document.getElementsByClassName("hotMask"); var?hotLonger?=?document.getElementsByClassName("hotLonger"); var?hotAdd?=?document.getElementsByClassName("hotAdd"); var?hotPlay?=?document.getElementsByClassName("hotPlay"); var?hotVideoMeg?=?document.getElementsByClassName("hotVideoMeg"); for(var?i=0;i<hotVideo.length;i++){/*之所以用到閉包，原因是：內部函數在使用外部變量時使用引用的方式，其實相當于java中的引用傳遞，而非值傳遞。傳遞進來的引用只相當于一個指針，指向的是一個內存地址，這個內存地址存放的才是具體的值，而外面的循環會不斷的修改這個存放地址中的值，所以最后循環結束之后，參數的值只能找到最后一個。?*/(function(){var?p?=?i;hotVideo[p].onmouseover?=?function(){hotLonger[p].style.display?=?"none";hotAdd[p].style.display?=?"";hotPlay[p].style.display?=?"";hotVideoMeg[p].style.display?=?"";hotMask[p].style.opacity?=?"1";hotMask[p].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=50)"}hotVideo[p].onmouseout?=?function(){hotLonger[p].style.display?=?"";hotAdd[p].style.display?=?"none";hotPlay[p].style.display?=?"none";hotVideoMeg[p].style.display?=?"none";hotMask[p].style.opacity?=?"0";hotMask[p].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=0)"}})();? } })();

css代碼：

/*?CSS?Document?*/ /*?網頁主題樣式?*/ @media?(min-width:?901px){.hotBox{width:900px;?height:200px;?margin:0px?auto;padding:0px?0px?173px?0px;max-height:900px;?min-width:450px;}.newBox{width:900px;?height:200px;?margin:0px?auto;padding:0px?0px?189px?0px;max-height:900px;?min-width:450px;} } @media?(max-width:?900px)?and?(min-width:?701px){.hotBox{width:700px;?height:200px;?margin:0px?auto;padding:0px?0px?305px?0px;?max-height:890px;?min-width:450px;}.newBox{width:700px;?height:200px;?margin:0px?auto;padding:0px?0px?386px?0px;?max-height:890px;?min-width:450px;}/*瀏覽器寬度在這個階段還需要將最新和推薦里面的div刪除兩個*/ } @media?(max-width:?700px){.hotBox{width:50%;height:200px;?margin:0px?auto;?padding:0px?0px?569px?0px;max-height:880px;?min-width:450px;}.newBox{width:50%;height:200px;?margin:0px?auto;?padding:0px?0px?583px?0px;max-height:880px;?min-width:450px;}#head{display:none;}#menu{display:none;}#end{display:none;} } /*?全局標簽?*/ body{padding:0;margin:0?auto; } #head?{top:0;left:0;z-index:2000;width:100%;height:96px;?background-color:#FDFDFD; } #menu{width:100%;?height:48px;?background-color:#FF6600;?color:#FFFFFF; } .hr1{?height:1px;border:none;border-top:1px?solid?#E6E9ED; } /*?最熱視頻?*/ .hotVideo{padding:?8px;?float:left; } /*首頁大圖片*/ .bigHotVideo{padding:?8px;?float:left; } .bigHotVideoImg{cursor:pointer;position:relative;width:432px;height:248px; } .bigLonger{position:absolute;z-indent:2;left:7px;top:200px;font-size:25px; } /*首頁大圖片*/ .hotVideoImg{cursor:pointer;position:relative;width:208px;height:116px; } .hotImg{width:100%;?height:100%; } .hotMask{position:absolute;left:0;?top:0;?width:100%;?height:100%;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0; } .hotLonger{position:absolute;z-indent:2;left:7px;top:91px; } .hotVideomeg2{font-style:Tahoma,?Helvetica,?sans-serif;font-weight:400;?font-size:14px;color:#FFFFFF;line-height:20px; } .hotVideomeg2_5{font-style:Tahoma,?Helvetica,?sans-serif;font-weight:400;?color:#FFFFFF; } .hotVideomeg3{font:Tahoma,?Helvetica,?sans-serif;?font-size:13px;?color:#B2B2B2;line-height:20px; } .hotAdd{z-indent:2;left:188px;top:95px;?background-color:#737372; } .hotPlay{z-indent:2;left:7px;top:85px;?background-color:#737372; } .hotVideoMeg{position:absolute;z-indent:2;left:7px;top:6px; } /*?最新視頻?*/ .newVideo{width:208px;height:180px;border:0px?solid?#000;?position:relative;cursor:pointer;padding:?8px;?float:left; } .newVideoImg{position:relative;width:100%;height:100%; } .newImg{width:208px;height:116px; } .newMask{position:absolute;left:0;?top:0;?width:208px;height:116px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity:0; } .newLonger{position:absolute;z-indent:2;top:127px;} .newVideomeg4{font-style:Tahoma,?Helvetica,?sans-serif;font-size:14px;color:#2F3B49;line-height:20px; } .newVideomeg5{font-style:Tahoma,?Helvetica,?sans-serif;font-size:13px;color:#858E93;line-height:20px; } .hotsLonger{font-weight:bolder;?font-size:12px;color:#FFFFFF; } .newAdd{position:absolute;z-indent:2;left:188px;top:95px;?background-color:#737372; } .newVideoMeg{position:absolute;z-indent:2;left:163px;top:91px;?background-color:#737372;?padding:3px; } /*?都能使用標簽?*/ .videoMark{position:absolute;left:0;top:0; }

轉載于:https://my.oschina.net/hehongbo/blog/352314

總結

以上是生活随笔為你收集整理的视频分享网站首页：主体框架完成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：浅学socket及iOS中的AsyncS
下一篇： Docker进阶实战