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

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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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万次播放&nbsp;&nbsp;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

视频分享网站首页：主体框架完成相关推荐

视频分享网站首页：最新视频特效
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE> <html> <head><title></tit ...
java毕业设计_短视频分享网站
短视频分享网站短视频分享网站mysql数据库创建语句短视频分享网站oracle数据库创建语句短视频分享网站sqlserver数据库创建语句短视频分享网站spring+springMVC+hib ...
基于Web的视频分享网站
<基于Web的视频分享网站的设计与实现>本人参考csdn博主"我笑ta人看不穿"实现的项目,在原功能上做了些许修改. 主要运用技术: 前端: 前台: 1) 开发框架:l ...
在线视频观看系列一：视频分享网站分类
最近的在线视频相当的火,据有关部门统计目前观看视频的月活跃用户数达到了亿级.所以就我自己对在线视频网站的认识,将我所知道的关于在线视频观看中的一些心的写出来.首先介绍一下国内的多家视频网站,后续介绍如 ...
php859微电影短视频分享网站
短视频分享网站采用基于PHP体系结构,PHP技术开发Dreamweaver 页面MYSQL数据库管理系统结合的开发方案.通过一个月的程序设计和制作,于今日完成了在线微电影网站的设计与实现.本系统结合观 ...
比较出名的视频分享网站
下面我列出几个比较出名的视频分享网站: http://www.6rooms.com/ http://www.uume.com/ http://www.tvix.cn/ http://www.yoqoo ...
JAVA计算机毕业设计音乐视频分享网站Mybatis+源码+数据库+lw文档+系统+调试部署
JAVA计算机毕业设计音乐视频分享网站Mybatis+源码+数据库+lw文档+系统+调试部署 JAVA计算机毕业设计音乐视频分享网站Mybatis+源码+数据库+lw文档+系统+调试部署本源码技术栈 ...
快速搭建私有视频播放平台--搭建类YouTube/Youku/BiliBili等视频分享网站
转载来源:http://demo.cumulusclips.org/?preview_theme=newsroom https://hub.docker.com/r/quantumobject/do ...
苹果cms怎么推荐视频到网站首页
今天说下小白经常提到的问题,怎么把想要显示的视频固定在首页不受新采集的影响而更新,也就是如何推荐视频到首页上. 1,来到系统后台根据下面红框所示操作:视频-视频数据-找到你想要推荐的视频点击编辑. 2 ...

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

视频分享网站首页：主体框架完成相关推荐

最新文章

热门文章