这个作业在2017年7月份开始做的，不是持续一段时间，是断断续续的学习jq的时候一边练习的一个作业。主要是练习我对界面的排版能力，因为优酷是一个很多图片累计的一个排版界面，需要我去对每一个模块去分析是装在哪里。有一个需求与样式分离的过程。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/goodteacher.css" type="text/css" rel="stylesheet" />
<link href="css/LoginAndRegister.css" type="text/css" rel="stylesheet" />
<title>优酷仿站</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var oBtnLeft = document.getElementById("goleft");
var oBtnRight = document.getElementById("goright");
var oDiv = document.getElementById("indexmaindiv");
var oDiv1 = document.getElementById("maindiv1");
var oUl = oDiv.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
var now = -5 * (aLi[0].offsetWidth + 13);
oUl.style.width = aLi.length * (aLi[0].offsetWidth + 13) + 'px';
oBtnRight.onclick = function () {
var n = Math.floor((aLi.length * (aLi[0].offsetWidth + 13) + oUl.offsetLeft) / aLi[0].offsetWidth);
if (n<= 5) {
move(oUl, 'left', 0);
}
else {
move(oUl, 'left', oUl.offsetLeft + now);
}
}
oBtnLeft.onclick = function () {
var now1 = -Math.floor((aLi.length / 5)) * 5 * (aLi[0].offsetWidth + 13);
if (oUl.offsetLeft >= 0) {
move(oUl, 'left', now1);
}
else {
move(oUl, 'left', oUl.offsetLeft - now);
}
}
var timer = setInterval(oBtnRight.onclick, 5000);
oDiv.onmouseover = function () {
clearInterval(timer);
}
oDiv.onmouseout = function () {
timer = setInterval(oBtnRight.onclick, 5000);
}
};
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
}
else {
return getComputedStyle(obj, false)[name];
}
}
function move(obj, attr, iTarget) {
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
}
else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (iTarget == cur) {
clearInterval(obj.timer);
}
else if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;
}
else {
obj.style[attr] = cur + speed + 'px';
}
}, 30);
}
</script>
<SCRIPT type="text/javascript">
var sina={$:function(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}},isIE:navigator.appVersion.indexOf("MSIE")!=-1?true:false,addEvent:function(l,i,I){if(l.attachEvent){l.attachEvent("on"+i,I)}else{l.addEventListener(i,I,false)}},delEvent:function(l,i,I){if(l.detachEvent){l.detachEvent("on"+i,I)}else{l.removeEventListener(i,I,false)}},readCookie:function(O){var o="",l=O+"=";if(document.cookie.length>0){var i=document.cookie.indexOf(l);if(i!=-1){i+=l.length;var I=document.cookie.indexOf(";",i);if(I==-1)I=document.cookie.length;o=unescape(document.cookie.substring(i,I))}};return o},writeCookie:function(i,l,o,c){var O="",I="";if(o!=null){O=new Date((new Date).getTime()+o*3600000);O="; expires="+O.toGMTString()};if(c!=null){I=";domain="+c};document.cookie=i+"="+escape(l)+O+I},readStyle:function(I,l){if(I.style[l]){return I.style[l]}else if(I.currentStyle){return I.currentStyle[l]}else if(document.defaultView&&document.defaultView.getComputedStyle){var i=document.defaultView.getComputedStyle(I,null);return i.getPropertyValue(l)}else{return null}}};
function ScrollPic(scrollContId,arrLeftId,arrRightId,dotListId){this.scrollContId=scrollContId;this.arrLeftId=arrLeftId;this.arrRightId=arrRightId;this.dotListId=dotListId;this.dotClassName="dotItem";this.dotOnClassName="dotItemOn";this.dotObjArr=[];this.pageWidth=0;this.frameWidth=0;this.speed=10;this.space=10;this.pageIndex=0;this.autoPlay=true;this.autoPlayTime=5;var _autoTimeObj,_scrollTimeObj,_state="ready";this.stripDiv=document.createElement("DIV");this.listDiv01=document.createElement("DIV");this.listDiv02=document.createElement("DIV");if(!ScrollPic.childs){ScrollPic.childs=[]};this.ID=ScrollPic.childs.length;ScrollPic.childs.push(this);this.initialize=function(){if(!this.scrollContId){throw new Error("必须指定scrollContId.");return};this.scrollContDiv=sina.$(this.scrollContId);if(!this.scrollContDiv){throw new Error("scrollContId不是正确的对象.(scrollContId = \""+this.scrollContId+"\")");return};this.scrollContDiv.style.width=this.frameWidth+"px";this.scrollContDiv.style.overflow="hidden";this.listDiv01.innerHTML=this.listDiv02.innerHTML=this.scrollContDiv.innerHTML;this.scrollContDiv.innerHTML="";this.scrollContDiv.appendChild(this.stripDiv);this.stripDiv.appendChild(this.listDiv01);this.stripDiv.appendChild(this.listDiv02);this.stripDiv.style.overflow="hidden";this.stripDiv.style.zoom="1";this.stripDiv.style.width="32766px";this.listDiv01.style.cssFloat="left";this.listDiv02.style.cssFloat="left";sina.addEvent(this.scrollContDiv,"mouseover",Function("ScrollPic.childs["+this.ID+"].stop()"));sina.addEvent(this.scrollContDiv,"mouseout",Function("ScrollPic.childs["+this.ID+"].play()"));if(this.arrLeftId){this.arrLeftObj=sina.$(this.arrLeftId);if(this.arrLeftObj){sina.addEvent(this.arrLeftObj,"mousedown",Function("ScrollPic.childs["+this.ID+"].rightMouseDown()"));sina.addEvent(this.arrLeftObj,"mouseup",Function("ScrollPic.childs["+this.ID+"].rightEnd()"));sina.addEvent(this.arrLeftObj,"mouseout",Function("ScrollPic.childs["+this.ID+"].rightEnd()"))}};if(this.arrRightId){this.arrRightObj=sina.$(this.arrRightId);if(this.arrRightObj){sina.addEvent(this.arrRightObj,"mousedown",Function("ScrollPic.childs["+this.ID+"].leftMouseDown()"));sina.addEvent(this.arrRightObj,"mouseup",Function("ScrollPic.childs["+this.ID+"].leftEnd()"));sina.addEvent(this.arrRightObj,"mouseout",Function("ScrollPic.childs["+this.ID+"].leftEnd()"))}};if(this.dotListId){this.dotListObj=sina.$(this.dotListId);if(this.dotListObj){var pages=Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4),i,tempObj;for(i=0;i<pages;i++){tempObj=document.createElement("span");this.dotListObj.appendChild(tempObj);this.dotObjArr.push(tempObj);if(i==this.pageIndex){tempObj.className=this.dotClassName}else{tempObj.className=this.dotOnClassName};tempObj.title="第"+(i+1)+"页";sina.addEvent(tempObj,"click",Function("ScrollPic.childs["+this.ID+"].pageTo("+i+")"))}}};if(this.autoPlay){this.play()}};this.leftMouseDown=function(){if(_state!="ready"){return};_state="floating";_scrollTimeObj=setInterval("ScrollPic.childs["+this.ID+"].moveLeft()",this.speed)};this.rightMouseDown=function(){if(_state!="ready"){return};_state="floating";_scrollTimeObj=setInterval("ScrollPic.childs["+this.ID+"].moveRight()",this.speed)};this.moveLeft=function(){if(this.scrollContDiv.scrollLeft+this.space>=this.listDiv01.scrollWidth){this.scrollContDiv.scrollLeft=this.scrollContDiv.scrollLeft+this.space-this.listDiv01.scrollWidth}else{this.scrollContDiv.scrollLeft+=this.space};this.accountPageIndex()};this.moveRight=function(){if(this.scrollContDiv.scrollLeft-this.space<=0){this.scrollContDiv.scrollLeft=this.listDiv01.scrollWidth+this.scrollContDiv.scrollLeft-this.space}else{this.scrollContDiv.scrollLeft-=this.space};this.accountPageIndex()};this.leftEnd=function(){if(_state!="floating"){return};_state="stoping";clearInterval(_scrollTimeObj);var fill=this.pageWidth-this.scrollContDiv.scrollLeft%this.pageWidth;this.move(fill)};this.rightEnd=function(){if(_state!="floating"){return};_state="stoping";clearInterval(_scrollTimeObj);var fill=-this.scrollContDiv.scrollLeft%this.pageWidth;this.move(fill)};this.move=function(num,quick){var thisMove=num/5;if(!quick){if(thisMove>this.space){thisMove=this.space};if(thisMove<-this.space){thisMove=-this.space}};if(Math.abs(thisMove)<1&&thisMove!=0){thisMove=thisMove>=0?1:-1}else{thisMove=Math.round(thisMove)};var temp=this.scrollContDiv.scrollLeft+thisMove;if(thisMove>0){if(this.scrollContDiv.scrollLeft+thisMove>=this.listDiv01.scrollWidth){this.scrollContDiv.scrollLeft=this.scrollContDiv.scrollLeft+thisMove-this.listDiv01.scrollWidth}else{this.scrollContDiv.scrollLeft+=thisMove}}else{if(this.scrollContDiv.scrollLeft-thisMove<=0){this.scrollContDiv.scrollLeft=this.listDiv01.scrollWidth+this.scrollContDiv.scrollLeft-thisMove}else{this.scrollContDiv.scrollLeft+=thisMove}};num-=thisMove;if(Math.abs(num)==0){_state="ready";if(this.autoPlay){this.play()};this.accountPageIndex();return}else{this.accountPageIndex();setTimeout("ScrollPic.childs["+this.ID+"].move("+num+","+quick+")",this.speed)}};this.next=function(){if(_state!="ready"){return};_state="stoping";this.move(this.pageWidth,true)};this.play=function(){if(!this.autoPlay){return};clearInterval(_autoTimeObj);_autoTimeObj=setInterval("ScrollPic.childs["+this.ID+"].next()",this.autoPlayTime*1000)};this.stop=function(){clearInterval(_autoTimeObj)};this.pageTo=function(num){if(_state!="ready"){return};_state="stoping";var fill=num*this.frameWidth-this.scrollContDiv.scrollLeft;this.move(fill,true)};this.accountPageIndex=function(){this.pageIndex=Math.round(this.scrollContDiv.scrollLeft/this.frameWidth);if(this.pageIndex>Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4)-1){this.pageIndex=0};var i;for(i=0;i<this.dotObjArr.length;i++){if(i==this.pageIndex){this.dotObjArr[i].className=this.dotClassName}else{this.dotObjArr[i].className=this.dotOnClassName}}}};
</SCRIPT>
</head>
<body>
<header>
<div id="logo"><a href="index.html"><img src="picture/yk-logo-1220.png"></a></div>
<div id="top_choice">
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a>发现</a></li>
<li><a>订阅</a></li>
<li><a>会员</a></li>
<li><a>我的</a></li>
</ul>
</div>
<div id="symbol">
<a id="example"><p>登录</p></a>
<a id="example2"><p>注册</p></a>
<i class="symbol_i1"></i><b class="symbol_b"></b>
<i class="symbol_i2"></i><b class="symbol_b"></b>
<i class="symbol_i3"> </i><b class="symbol_b"></b>
</div>
<div id="search">
<form class="search-form" id="search-form" method="get" role="search">
<input type="text" class="search-text" name="q" id="search_input" /><input type="submit" class="search-button" value="搜库"/>
</form>
</div>
<!--登录弹出窗口-->
<div id="LoginBox">
<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
<div class="row1">
登录账号<a οnclick="showPhoneBox()">手机快捷登录></a>
</div>
<div class="row2">
<span class="inputBox">
<input type="text" id="txtName" placeholder="账号/邮箱" />
</span><a href="javascript:void(0)" title="提示" class="warning" id="warn">*</a>
</div>
<div class="row2">
<span class="inputBox">
<input type="text" id="txtPwd" placeholder="密码" />
</span><a href="javascript:void(0)" title="提示" class="warning" id="warn2">*</a>
</div>
<div class="row2 row2_5">
<input type="checkbox"/><p>记住我</p><p>忘记密码| <a> 帮助</a></p>
</div>
<div class="row2">
<a href="#" id="loginbtn">登录</a>
</div>
<div class="login_way">
<p>登录方式</p>
<ul>
<li><img src="picture/QQ.png"> </li>
<li><img src="picture/weixin.png"></li>
<li><img src="picture/weibo.png"></li>
<li><img src="picture/zhifubao.png"></li>
<li><img src="picture/taobao.png"></li>
</ul>
<a οnclick="showRegister()">注册</a>
</div>
</div>
<script type="text/javascript">
$(function ($) {
//弹出登录
$("#example").hover(function () {
$(this).stop().animate({
opacity: '1'
}, 600);
}, function () {
$(this).stop().animate({
opacity: '0.6'
}, 1000);
}).on('click', function () {
$("body").append("<div id='mask'></div>");
$("#mask").addClass("mask").fadeIn("slow");
$("#LoginBox").fadeIn("slow");
});
//
//按钮的透明度
$("#loginbtn").hover(function () {
$(this).stop().animate({
opacity: '1'
}, 600);
}, function () {
$(this).stop().animate({
opacity: '0.8'
}, 1000);
});
//文本框不允许为空---按钮触发
$("#loginbtn").on('click', function () {
var txtName = $("#txtName").val();
var txtPwd = $("#txtPwd").val();
if (txtName == "" || txtName == undefined || txtName == null) {
if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
$(".warning").css({ display: 'block' });
}
else {
$("#warn").css({ display: 'block' });
$("#warn2").css({ display: 'none' });
}
}
else {
if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
$("#warn").css({ display: 'none' });
$(".warn2").css({ display: 'block' });
}
else {
$(".warning").css({ display: 'none' });
window.location.href="default.html"
}
}
});
//文本框不允许为空---单个文本触发
$("#txtName").on('blur', function () {
var txtName = $("#txtName").val();
if (txtName == "" || txtName == undefined || txtName == null) {
$("#warn").css({ display: 'block' });
}
else {
$("#warn").css({ display: 'none' });
}
});
$("#txtName").on('focus', function () {
$("#warn").css({ display: 'none' });
});
//
$("#txtPwd").on('blur', function () {
var txtName = $("#txtPwd").val();
if (txtName == "" || txtName == undefined || txtName == null) {
$("#warn2").css({ display: 'block' });
}
else {
$("#warn2").css({ display: 'none' });
}
});
$("#txtPwd").on('focus', function () {
$("#warn2").css({ display: 'none' });
});
//关闭
$(".close_btn").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () {
$("#LoginBox").fadeOut("fast");
$("#mask").css({ display: 'none' });
});
});
</script>
<!--窗口切换的第二个-->
<div id="phoneLogin" style="display: none;">
<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="phonecloseBtn">×</a>
<div class="row1">
登录账号<a οnclick="showLoginBox()">电脑登录></a>
</div>
<div class="row2">
<span class="inputBox">
<input type="text" id="phonetxtName" placeholder="手机号" />
</span><a href="javascript:void(0)" title="提示" class="warning" id="phonewarn">*</a>
</div>
<div class="row2">
<span class="inputBox2">
<input type="text" id="phonecheck" class="phonecheck" placeholder="请输入验证码" />
<input type="button" value="点击发送验证码" οnclick="sendCode(this)" id="phonecheck_button" class="phonecheck_button" />
</span><a href="javascript:void(0)" title="提示" class="warning2" >*</a>
<script type="text/javascript">
var clock = '';
var nums = 10;
var btn;
function sendCode(thisBtn)
{
btn = thisBtn;
btn.disabled = true; //将按钮置为不可点击
btn.value = nums+'秒后可重新获取';
clock = setInterval(doLoop, 1000); //一秒执行一次
}
function doLoop()
{
nums--;
if(nums > 0){
btn.value = nums+'秒后可重新获取';
}else{
clearInterval(clock); //清除js定时器
btn.disabled = false;
btn.value = '点击发送验证码';
nums = 10; //重置时间
}
}
</script>
</div>
<div class="row2 row2_5">
<input type="checkbox"/><p>记住我</p><p>忘记密码| <a> 帮助</a></p>
</div>
<div class="row2">
<a href="#" id="phonebtn">登录</a>
</div>
<div class="login_way">
<p>登录方式</p>
<ul>
<li><img src="picture/QQ.png"> </li>
<li><img src="picture/weixin.png"></li>
<li><img src="picture/weibo.png"></li>
<li><img src="picture/zhifubao.png"></li>
<li><img src="picture/taobao.png"></li>
</ul>
<a οnclick="showRegister()">注册</a>
</div>
</div>
<script type="text/javascript">
$(function ($) {
//文本框不允许为空---按钮触发
$("#phonebtn").on('click', function () {
var txtName = $("#phonetxtName").val();
var txtPwd = $("#phonetxtPwd").val();
if (txtName == "" || txtName == undefined || txtName == null) {
if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
$(".warning").css({ display: 'block' });
}
else {
$("#warn").css({ display: 'block' });
$("#warn2").css({ display: 'none' });
}
}
else {
if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
$("#warn").css({ display: 'none' });
$(".warn2").css({ display: 'block' });
}
else {
$(".warning").css({ display: 'none' });
window.location.href="default.html"
}
}
});
//文本框不允许为空---单个文本触发
$("#phonetxtName").on('blur', function () {
var txtName = $("#phonetxtName").val();
if (txtName == "" || txtName == undefined || txtName == null) {
$("#warn").css({ display: 'block' });
}
else {
$("#warn").css({ display: 'none' });
}
});
$("#phonetxtName").on('focus', function () {
$("#warn").css({ display: 'none' });
});
//
$("#phonetxtPwd").on('blur', function () {
var txtName = $("#phonetxtPwd").val();
if (txtName == "" || txtName == undefined || txtName == null) {
$("#warn2").css({ display: 'block' });
}
else {
$("#warn2").css({ display: 'none' });
}
});
$("#phonetxtPwd").on('focus', function () {
$("#warn2").css({ display: 'none' });
});
//关闭
$(".close_btn").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () {
$("#phoneLogin").fadeOut("fast");
$("#mask").css({ display: 'none' });
});
});
</script>
<script type="text/javascript">
function showLoginBox(){
document.getElementById("LoginBox").style.display = "block";
document.getElementById("phoneLogin").style.display = "none";
}
function showPhoneBox(){
document.getElementById("LoginBox").style.display = "none";
document.getElementById("phoneLogin").style.display = "block";
}
</script>
<!--窗口切换-->
<!--登录弹出窗口结束-->
<!--注册弹出窗口-->
<div id="RegisterBox">
<a href="javascript:void(0)" title="关闭窗口" class="close_btn2" id="closeBtn2">×</a>
<div class="row3">
<span>手机注册</span>
</div>
<div class="row4">
<select name="messagePick" OnChange="messageReveal()">
<option value="0">请选择</option>
<option>+86</option>
<option>+886</option>
<option>+81</option>
<option>+152</option>
<option>+1</option>
</select>
<span class="inputBox2">
<input type="text" id="number" class="number" placeholder="手机号码" />
</span> <a href="javascript:void(0)" title="提示" class="warning2" id="warning2">*</a>
</div>
<div class="row4">
<span class="inputBox2">
<input type="text" id="txtName2" class="txtName" placeholder="密码" />
</span> <a href="javascript:void(0)" title="提示" class="warning2" >*</a>
<span class="inputBox2">
<input type="text" id="txtPwd2" class="txtName" placeholder="再次输入密码" />
</span><a href="javascript:void(0)" title="提示" class="warning2" >*</a>
<span class="inputBox2">
<input type="text" id="check" class="check" placeholder="请输入验证码" />
<input type="button" value="点击发送验证码" οnclick="sendCode(this)" id="check_button" class="check_button" />
<script type="text/javascript">
var clock = '';
var nums = 10;
var btn;
function sendCode(thisBtn)
{
btn = thisBtn;
btn.disabled = true; //将按钮置为不可点击
btn.value = nums+'秒后可重新获取';
clock = setInterval(doLoop, 1000); //一秒执行一次
}
function doLoop()
{
nums--;
if(nums > 0){
btn.value = nums+'秒后可重新获取';
}else{
clearInterval(clock); //清除js定时器
btn.disabled = false;
btn.value = '点击发送验证码';
nums = 10; //重置时间
}
}
</script>
</span><a href="javascript:void(0)" title="提示" class="warning2" >*</a>
<a href="#" id="registerbtn">注册</a>
</div>
<div class="row5">
<input type="checkbox"/><p>同意用户的协定</p><p>已有账号？<a οnclick="showLogin()">登录</a></p>
</div>
</div>
<script type="text/javascript">
$(function ($) {
//弹出注册
$("#example2").hover(function () {
$(this).stop().animate({
opacity: '1'
}, 600);
}, function () {
$(this).stop().animate({
opacity: '0.6'
}, 1000);
}).on('click', function () {
$("body").append("<div id='mask2'></div>");
$("#mask2").addClass("mask").fadeIn("slow");
$("#RegisterBox").fadeIn("slow");
});
//
//按钮的透明度
$("#registerbtn").hover(function () {
$(this).stop().animate({
opacity: '1'
}, 600);
}, function () {
$(this).stop().animate({
opacity: '0.8'
}, 1000);
});
//文本框不允许为空---按钮触发
$("#registerbtn").on('click', function () {
var txtName = $("#txtName2").val();
var txtPwd = $("#txtPwd2").val();
var check= $("#check").val();
var number=$("#number").val();
if (txtName == "" || txtName == undefined || txtName == null|| check==null||number==null) {
if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
$(".warning2").css({ display: 'block' });
}
else {
$("#warn3").css({ display: 'block' });
$("#warn4").css({ display: 'none' });
}
}
else {
if (txtPwd == "" || txtPwd == undefined || txtPwd == null) {
$("#warn3").css({ display: 'none' });
$(".warn4").css({ display: 'block' });
}
else {
$(".warning2").css({ display: 'none' });
}
}
if(txtName != "" && txtName != undefined && txtName != null&& check!=null&&number!=null&&txtPwd != "" && txtPwd != undefined && txtPwd != null){
window.location.href="default.html"
}
});
//文本框不允许为空---单个文本触发
$("#txtName2").on('blur', function () {
var txtName = $("#txtName2").val();
if (txtName == "" || txtName == undefined || txtName == null) {
$("#warn3").css({ display: 'block' });
}
else {
$("#warn3").css({ display: 'none' });
}
});
$("#txtName2").on('focus', function () {
$("#warn3").css({ display: 'none' });
});
//
$("#txtPwd2").on('blur', function () {
var txtName = $("#txtPwd2").val();
if (txtName == "" || txtName == undefined || txtName == null) {
$("#warn4").css({ display: 'block' });
}
else {
$("#warn4").css({ display: 'none' });
}
});
$("#txtPwd2").on('focus', function () {
$("#warn4").css({ display: 'none' });
});
//关闭
$(".close_btn2").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () {
$("#RegisterBox").fadeOut("fast");
$("#mask2").css({ display: 'none' });
});
});
</script>
<!--注册弹出窗口结束-->
<!--登录注册切换的JS-->
<script type="text/javascript">
function showLogin(){
document.getElementById("LoginBox").style.display = "block";
document.getElementById("RegisterBox").style.display = "none";
}
function showRegister(){
document.getElementById("LoginBox").style.display = "none";
document.getElementById("RegisterBox").style.display = "block";
}
</script>
</header>
<section id="page01">
<ul class="page01_ul">
<li class="page01_li_active"><a href="#">首页</a></li>
<li><a href="#">剧集</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">综艺</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">少儿</a></li>
<li><a href="#">来疯</a></li>
<li><a href="#">直播</a></li>
<li><a href="#">片库</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">纪实</a></li>
<li><a href="#">公益</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">汽车</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">搞笑</a></li>
<li><a href="#">旅游</a></li>
<li><a href="#">时尚</a></li>
<li><a href="#">亲子</a></li>
<li><a href="#">教育</a></li>
<li><a href="#">游戏</a></li>
<li><a>更多<i></i></a></li>
<li class="page01_li_last"><a href="#">下载</a></li>
</ul>
</section>
<section id="page02">
<script type="text/javascript">
$(function(){
function showLists(cid){
$("div.black_symbol[cid="+cid+"]").hide();
$("div.black_symbol_none[cid="+cid+"]").show();
}
function hideLists(cid){
$("div.black_symbol[cid="+cid+"]").show();
$("div.black_symbol_none[cid="+cid+"]").hide();
}
$(function(){
$("div.box_01").mouseenter(function(){
var cid = $(this).attr("cid");
showLists(cid);
});
$("div.box_01").mouseleave(function(){
var cid = $(this).attr("cid");
hideLists(cid);
});
});
$(function(){
$("div.box_02").mouseenter(function(){
var cid = $(this).attr("cid");
showLists(cid);
});
$("div.box_02").mouseleave(function(){
var cid = $(this).attr("cid");
hideLists(cid);
});
});
$(function(){
$("div.box_03").mouseenter(function(){
var cid = $(this).attr("cid");
showLists(cid);
});
$("div.box_03").mouseleave(function(){
var cid = $(this).attr("cid");
hideLists(cid);
});
});
$(function(){
$("div.box_05").mouseenter(function(){
var cid = $(this).attr("cid");
showLists(cid);
});
$("div.box_05").mouseleave(function(){
var cid = $(this).attr("cid");
hideLists(cid);
});
});
});
</script>
<div class="row">
<div class="col_01">
<div class="box_01" cid="1">
<div class="black_symbol" cid="1">《寒武纪》全网独播</div>
<div class="black_symbol_none" style="display: none; " cid="1">
<p>《寒武纪》全网独播</p>
<i>《电视剧》这里是电视剧的描述</i>
<input type="button" value="立即播放" οnclick="location='user.html'" style="cursor:pointer">
</div>
</div>
<div class="box_02" cid="2" >
<div class="red_symbol">独播</div>
<img src="images/box01_2.jpg">
<div class="black_symbol" cid="2">《新闻》公交车上的一幕</div>
<div class="black_symbol_none" style="display:none" cid="2">
<p>《新闻》公交车上的一幕</p>
<a>这里是对影视的描述</a>
<i>12456次评论</i>
<input type="button" value="立即播放" οnclick="location='user.html'" style="cursor:pointer">
</div>
</div>
<div class="box_02" cid="3">
<div class="red_symbol">独播</div>
<img src="images/box01_3.jpg">
<div class="black_symbol" cid="3">《孤芳不自赏》两美大比拼</div>
<div class="black_symbol_none" style="display:none" cid="3">
<p>《孤芳不自赏》两美大比拼</p>
<a>这里是对影视的描述</a>
<i>12456次评论</i>
<input type="button" value="立即播放" οnclick="location='user.html'" style="cursor:pointer">
</div>
</div>
</div>
<div class="col_02">
<div class="box_03" cid="4">
<div class="red_symbol">独播</div>
<img src="images/box01_04.jpg"/>
<div class="black_symbol" cid="4">《电视剧》这里是电视剧的描述</div>
<div class="black_symbol_none" style="display:none" cid="4">
<p>《电视剧》这里是电视剧的描述</p>
<a>这里是对影视的描述</a>
<i>12456次评论</i>
<input type="button" value="立即播放" οnclick="location='user.html'" style="cursor:pointer">
</div>
</div>
<div class="box_03" cid="5">
<div class="red_symbol">首播</div>
<img src="images/box01_05.jpg"/>
<div class="black_symbol" cid="5">《电视剧》这里是电视剧的描述</div>
<div class="black_symbol_none" style="display:none" cid="5">
<p>《电视剧》这里是电视剧的描述</p>
<a>这里是对影视的描述</a>
<i>12456次评论</i>
<input type="button" value="立即播放" οnclick="location='user.html'" style="cursor:pointer">
</div>
</div>
<div class="box_03" cid="6">
<div class="red_symbol">独播</div>
<img src="images/box01_06.jpg"/>
<div class="black_symbol" cid="6">《电视剧》这里是电视剧的描述</div>
<div class="black_symbol_none" style="display:none" cid="6">
<p>《电视剧》这里是电视剧的描述</p>
<a>这里是对影视的描述</a>
<i>12456次评论</i>
<input type="button" value="立即播放" οnclick="location='user.html'" style="cursor:pointer">
</div>
</div>
<div class="box_03" cid="7">
<div class="red_symbol">独播</div>
<img src="images/box01_07.jpg"/>
<div class="black_symbol" cid="7">《电视剧》这里是电视剧的描述</div>
<div class="black_symbol_none" style="display:none" cid="7">
<p>《电视剧》这里是电视剧的描述</p>
<a>这里是对影视的描述</a>
<i>12456次评论</i>
<input type="button" value="立即播放" οnclick="location='user.html'" style="cursor:pointer">
</div>
</div>
<div class="box_03" cid="8">
<div class="red_symbol">独播</div>
<img src="images/box01_08.jpg"/>
<div class="black_symbol" cid="8">《电视剧》这里是电视剧的描述</div>
<div class="black_symbol_none" style="display:none" cid="8">
<p>《电视剧》这里是电视剧的描述</p>
<a>这里是对影视的描述</a>
<i>12456次评论</i>
<input type="button" value="立即播放" οnclick="location='user.html'" style="cursor:pointer">
</div>
</div>
<div class="box_03" cid="9">
<div class="red_symbol">花絮</div>
<img src="images/box01_09.jpg"/>
<div class="black_symbol" cid="9">《电视剧》这里是电视剧的描述</div>
<div class="black_symbol_none" style="display:none" cid="9">
<p>《电视剧》这里是电视剧的描述</p>
<a>这里是对影视的描述</a>
<i>12456次评论</i>
<input type="button" value="立即播放" οnclick="location='user.html'" style="cursor:pointer">
</div>
</div>
</div>
<div class="col_03">
<div class="box_04">
<img src="images/box01_adv1.jpg"><p>广告</p>
</div>
<div class="box_05_box" >
<div class="box_05" cid="10">
<img src="images/box01_10.gif">
<div class="black_symbol" cid="10">这里是电视剧的描述</div>
<div class="black_symbol_none" style="display:none" cid="10">
<p>这里是电视剧的描述</p>
<a>这里是对影视的描述</a>
<i>12456次评论</i>
<input type="button" value="立即播放" οnclick="location='user.html'" style="cursor:pointer">
</div>
</div>
<div class="box_05" cid="11">
<img src="images/box01_11.jpg">
<div class="black_symbol" cid="11">这里是电视剧的描述</div>
<div class="black_symbol_none" style="display:none" cid="11">
<p>这里是电视剧的描述</p>
<a>这里是对影视的描述</a>
<i>12456次评论</i>
<input type="button" value="立即播放" οnclick="location='user.html'" style="cursor:pointer">
</div>
</div>
</div>
<div class="box_06">
<img src="images/box01_adv2.jpg"><p>广告</p>
</div>
</div>
</div>
</section>
<section id="page03">
<div class="left">
<div class="tittle">
<img src="picture/de377f3631664c9a93b6af4acb92dda1.gif">
<h1>优酷懂你</h1>
<h2>猜的不准吗?<a>登录</a>之后会更准确哦~~</h2>
<h3>换一换</h3>
</div>
<script type="text/javascript">
$(function(){
function showLists(cid){
$("div.small_time[cid="+cid+"]").hide();
$("div.black_symbol_none[cid="+cid+"]").show();
}
function hideLists(cid){
$("div.small_time[cid="+cid+"]").show();
$("div.black_symbol_none[cid="+cid+"]").hide();
}
$(function(){
$("div.box_07").mouseenter(function(){
var cid = $(this).attr("cid");
showLists(cid);
});
$("div.box_07").mouseleave(function(){
var cid = $(this).attr("cid");
hideLists(cid);
});
});
});
</script>
<div class="button">
<div class="box_07">
<img src="images/box07_1.jpg">
<div class="small_time">11:45</div>
<a>这里是对影视的描述这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div>
<div class="box_07">
<img src="images/box07_2.jpg">
<div class="small_time">11:45</div>
<a>这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div> <div class="box_07">
<img src="images/box07_3.jpg">
<div class="small_time">23:30</div>
<a>这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div> <div class="box_07">
<img src="images/box07_4.jpg">
<div class="small_time">40:00</div>
<a>这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div> <div class="box_07">
<img src="images/box07_5.jpg">
<div class="small_time">50:00</div>
<a>这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div> <div class="box_07">
<img src="images/box07_6.jpg">
<div class="small_time">60:00</div>
<a>这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div> <div class="box_07">
<img src="images/box07_7.jpg">
<div class="small_time">123：00</div>
<a>这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div> <div class="box_07">
<img src="images/box07_8.jpg">
<div class="small_time">1:12</div>
<a>这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div> <div class="box_07">
<img src="images/box07_9.jpg">
<div class="small_time">0:30</div>
<a>这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div> <div class="box_07">
<img src="images/box07_10.jpg">
<div class="small_time">50:45</div>
<a>这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div>
</div>
<img src="images/0707-1300-100.jpg" />
</div>
<div class="right">
<div class="tittle">
<h1>产品大全</h1>
<i></i>
</div>
<div class="right_list">
<ul>
<li><img src="picture/laifeng_logo_min_v2.png"> <div class="right_list_left">来 疯</div><i>热门主播</i><i>来疯APP</i></li>
<li><img src="picture/3a83f974daf3448eaf3d4bd27b6b4c6d.gif"> <div class="right_list_left">话 题</div><i>热门话题</i><i>创建话题</i></li>
<li><img src="picture/11ebcd21e9b54b3a976ee101fd717394.gif"> <div class="right_list_left">直 播</div><i>优酷直播</i><i>全部直播</i></li>
<li><img src="picture/faa10db601cd414d94cd6016af564e38.gif"> <div class="right_list_left">自频道</div><i>社区论坛</i><i>视频学院</i></li>
<li><img src="picture/c766c7f0ec7c48c1912b368e599dcc86.gif"> <div class="right_list_left">众 筹</div><i>最新项目</i><i>发起众筹</i></li>
<li><img src="picture/356aa1f2212849579922841139bdfdd1.gif"> <div class="right_list_left">玩游戏</div><i>青云志</i><i>蓝月传奇</i></li>
<li><img src="picture/88750119127f49368d52bb13b1281323.gif"> <div class="right_list_left">优酷VR</div><i>VR APP</i><i>精彩内容</i></li>
<li><img src="picture/2455ce3be9954aa88a339369ea042e54.gif"> <div class="right_list_left">其 他</div><i>小小优酷</i><i>玩剧APP</i></li>
</ul>
</div>
</div>
</section>
<section id="page04">
<div class="tittle">
<img src="picture/a9bf943459d54ddba976859d1ed4ea8f.gif">
<h1> 剧集</h1>
<i></i>
<ul>
<li class="active"><a>最新</a></li>
<li><a>大陆剧</a></li>
<li><a>日韩剧</a></li>
<li><a>英美剧</a></li>
<li><a>港台剧</a></li>
</ul>
<h3>剧集排行<img src="picture/f9cfc47354504e0c9e4e7912f14f1659.gif"></h3>
</div>
<div class="pic_up">
<div class="pic_up_big">
<img src="images/050C00005963A694ADC0AE0E7C090977.jpg">
<div class="small_time">更新至第十五集</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="pic_up_small">
<div class="box_07">
<img src="images/05150000594C82BFADC0AED3780BDEA2.jpg">
<div class="small_time">更新至第十五集</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/05150000595DA6C3ADC0B0ADA702C26B.jpg">
<div class="small_time">更新至第十五集</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/05150000595DA6F4ADC0B0C9AC001B71.jpg">
<div class="small_time">更新至第十五集</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/05150000595DA712ADC0B09BBB0E6386.jpg">
<div class="small_time">更新至第十五集</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/05150000596309D2ADC0AE0E600E1336.jpg">
<div class="small_time">更新至第十五集</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/05150000596427E3AD9E0790A7029969.jpg">
<div class="small_time">更新至第十五集</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/0510000059642784ADC0B0A40D07C3B4.gif">
<div class="small_time">更新至第十五集</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/0515000059642810ADB9129D9309691D.jpg">
<div class="small_time">更新至第十五集</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
</div>
</div>
<div class="pic_down">
<!--滚动图片 start-->
<div class=rollphotos>
<DIV class=blk_29>
<DIV class=LeftBotton id=LeftArr></DIV>
<DIV class=Cont id=ISL_Cont_1><!-- 图片列表 begin -->
<DIV class=box>
<A class=imgBorder href="/" target=_blank>
<IMG src="images/200-110.——4jpg.jpg">
<a>这里是对影视的描述</a>
</A>
</DIV>
<DIV class=box>
<A class=imgBorder href="/" target=_blank>
<IMG src="images/200-110.jpg" >
<a>这里是对影视的描述</a>
</A>
</DIV>
<DIV class=box>
<A class=imgBorder href="/" target=_blank>
<IMG src="images/200-110-1.jpg" >
<a>这里是对影视的描述</a>
</A>
</DIV>
<DIV class=box>
<A class=imgBorder href="/" target=_blank>
<IMG src="images/200-110-3.j——4pg.jpg" >
<a>这里是对影视的描述</a>
</A>
</DIV>
<DIV class=box>
<A class=imgBorder href="/" target=_blank>
<IMG src="images/200-110——3.jpg">
<a>这里是对影视的描述</a>
</A>
</DIV>
<DIV class=box>
<A class=imgBorder href="/" target=_blank>
<IMG src="images/200x110.jpg">
<a>这里是对影视的描述</a>
</A>
</DIV>
<DIV class=box>
<A class=imgBorder href="/" target=_blank>
<IMG src="images/200X110——2.jpg" >
<a>这里是对影视的描述</a>
</A>
</DIV>
<DIV class=box>
<A class=imgBorder href="/" target=_blank>
<IMG src="images/200X110——5.jpg" >
<a>这里是对影视的描述</a>
</A>
</DIV>
<!-- 图片列表 end --></DIV>
<DIV class=RightBotton id=RightArr></DIV></DIV>
<SCRIPT language=javascript type=text/javascript>
<!--//--><![CDATA[//><!--
var scrollPic_02 = new ScrollPic();
scrollPic_02.scrollContId = "ISL_Cont_1";
//左箭头ID
scrollPic_02.arrLeftId = "LeftArr";
//右箭头ID
scrollPic_02.arrRightId = "RightArr";
//显示框宽度
scrollPic_02.frameWidth = 1250;
//翻页宽度
scrollPic_02.pageWidth = 152;
//移动速度(毫秒，越小越快)
scrollPic_02.speed = 10;
//每次移动像素(单位px，越大越快)
scrollPic_02.space = 10;
//自动播放
scrollPic_02.autoPlay = true;
//自动播放间隔时间(秒)
scrollPic_02.autoPlayTime = 3;
//初始化
scrollPic_02.initialize();
//--><!]]>
</SCRIPT>
</div>
<!--滚动图片 end-->
</div>
<div class="pic_adv">
<img src="images/1300-100.jpg">
</div>
</div>
</section>
<section id="page05">
<div class="tittle">
<img src="picture/051000005942580DADC0AE06AE09C7E3.png">
<h1>超级网剧</h1>
<h3>网剧排行<img src="picture/f9cfc47354504e0c9e4e7912f14f1659.gif"></h3>
</div>
<div class="pic_list">
<ul>
<li>
<div class="box_07">
<img src="images/box07_1.jpg">
<div class="small_time">45:16</div>
<a>这里是对影视的描述这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div>
</li>
<li>
<div class="box_07">
<img src="images/box07_2.jpg">
<div class="small_time">45:16</div>
<a>这里是对影视的描述这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div>
</li>
<li>
<div class="box_07">
<img src="images/box07_3.jpg">
<div class="small_time">45:16</div>
<a>这里是对影视的描述这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div>
</li>
<li>
<div class="box_07">
<img src="images/box07_4.jpg">
<div class="small_time">45:16</div>
<a>这里是对影视的描述这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div>
</li>
<li>
<div class="box_07">
<img src="images/box07_5.jpg">
<div class="small_time">45:16</div>
<a>这里是对影视的描述这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div>
</li>
<li>
<div class="box_07">
<img src="images/box07_6.jpg">
<div class="small_time">45:16</div>
<a>这里是对影视的描述这里是对影视的描述</a>
<i>12456次评论</i><i>123456次播放</i>
</div>
</li>
</ul>
</div>
<div class="pic_adv">
<img src="images/0707-1300-100.jpg">
</div>
</section>
<section id="page06">
<div class="tittle">
<img src="picture/6fe88961d340487dbac59d34f56c5129.gif">
<h1>综艺</h1>
<ul>
<li class="active"><a>热播综艺</a></li>
<li><a>快乐男声</a></li>
<li><a>热门网综</a></li>
<li><a>大陆综艺</a></li>
</ul>
<h3>综艺排行<img src="picture/f9cfc47354504e0c9e4e7912f14f1659.gif"></h3>
</div>
<div class="pic_up">
<div class="pic_up_big">
<img src="images/050C000059611041ADC0AE17B80BB2FE.jpg">
<div class="small_time">七集全</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="pic_up_small">
<div class="box_07">
<img src="images/0515000059633DF7ADC0AE08BD06F04B.jpg">
<div class="small_time">七集全</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/05150000596104B1ADC0B0BA8A0966A3.jpg">
<div class="small_time">七集全</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/05150000596110A9ADC0B08FE30BCDB2.jpg">
<div class="small_time">七集全</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/0515000059633E37ADC0B0AD820BEE8E.jpg">
<div class="small_time">七集全</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/0515000059610E34ADB912B50D0A41E1.jpg">
<div class="small_time">更新至07-07</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/0515000059625AACADC0AE196604D826.jpg">
<div class="small_time">更新至07-08</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/0515000059610523ADC0AE0E5F0C1331.jpg">
<div class="small_time">更新至07-09</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
<div class="box_07">
<img src="images/05150000596589CEAD9E07601E0E120A.jpg">
<div class="small_time">更新至07-10</div>
<a>电视剧的名字</a>
<i>电视剧的描述</i>
</div>
</div>
</div>
</section>
<section id="page07">
<div class="tittle">
<img src="picture/a9bf943459d54ddba976859d1ed4ea8f.gif">
<h1>电影</h1>
<i></i>
<ul>
<li><a>最新</a></li>
<li><a>好莱坞</a></li>
<li><a>预告片</a></li>
<li><a>网络电影</a></li>
<li class="active"><a>独播影院</a></li>
</ul>
<h3>电影排行<img src="picture/f9cfc47354504e0c9e4e7912f14f1659.gif"></h3>
</div>
<div class="indexmaindiv" id="indexmaindiv">
<div class="indexmaindiv1 clearfix" >
<div class="stylesgoleft" id="goleft"></div>
<div class="maindiv1 " id="maindiv1">
<ul id="count1">
<li>
<div class="playerdetail">
<div class="detailimg"><img src="images/51501s.jpg" /></div>
<div class="teanames">电影名字1</div>
<div class="teadetail">这里是对电影的描述</div>
<a class="checkdetail" href="#"></a>
</div>
</li>
<li>
<div class="playerdetail">
<div class="detailimg"><img src="images/51502s.jpg" /></div>
<div class="teanames">电影名字2</div>
<div class="teadetail">这里是对电影的描述</div>
<a class="checkdetail" href="#"></a>
</div>
</li>
<li>
<div class="playerdetail">
<div class="detailimg"><img src="images/51503s.jpg" /></div>
<div class="teanames">电影名字3</div>
<div class="teadetail">这里是对电影的描述</div>
<a class="checkdetail" href="#"></a>
</div>
</li>
<li>
<div class="playerdetail">
<div class="detailimg"><img src="images/51504s.jpg" /></div>
<div class="teanames">电影名字4</div>
<div class="teadetail">这里是对电影的描述</div>
<a class="checkdetail" href="#"></a>
</div>
</li>
<li>
<div class="playerdetail">
<div class="detailimg"><img src="images/51505s.jpg" /></div>
<div class="teanames">电影名字5</div>
<div class="teadetail">这里是对电影的描述</div>
<a class="checkdetail" href="#"></a>
</div>
</li>
<li>
<div class="playerdetail">
<div class="detailimg"><img src="images/51506.jpg" /></div>
<div class="teanames">电影名字6</div>
<div class="teadetail">这里是对电影的描述</div>
<a class="checkdetail" href="#"></a>
</div>
</li>
<li>
<div class="playerdetail">
<div class="detailimg"><img src="images/51507s.jpg" /></div>
<div class="teanames">电影名字7</div>
<div class="teadetail">这里是对电影的描述</div>
<a class="checkdetail" href="#"></a>
</div>
</li>
<li>
<div class="playerdetail">
<div class="detailimg"><img src="images/51508s.jpg" /></div>
<div class="teanames">电影名字8</div>
<div class="teadetail">这里是对电影的描述</div>
<a class="checkdetail" href="#"></a>
</div>
</li>
<li>
<div class="playerdetail">
<div class="detailimg"><img src="images/51509s.jpg" /></div>
<div class="teanames">电影名字9</div>
<div class="teadetail">这里是对电影的描述</div>
<a class="checkdetail" href="#"></a>
</div>
</li>
<li>
<div class="playerdetail">
<div class="detailimg"><img src="images/51510s.jpg" /></div>
<div class="teanames">电影名字10</div>
<div class="teadetail">这里是对电影的描述</div>
<a class="checkdetail" href="#"></a>
</div>
</li>
<li>
<div class="playerdetail">
<div class="detailimg"><img src="images/51511s.jpg" /></div>
<div class="teanames">电影名字11</div>
<div class="teadetail">这里是对电影的描述</div>
<a class="checkdetail" href="#"></a>
</div>
</li>
</ul>
</div>
<div class="stylesgoright" id="goright"></div>
</div>
</div>
</section>
<footer>
<dl class="g-w1">
<dt>
<a target="_blank" href="//c.youku.com/aboutcn/youtu">大优酷事业群</a>
<a target="_blank" href="//c.youku.com/aboutcn/youku">关于优酷</a>
</dt>
<dd>
<a target="_blank" href="//c.youku.com/abouteg/youtu">Youku Tudou Inc.</a>
<a target="_blank" href="//c.youku.com/abouteg/youku">Youku.com</a>
</dd>
<dd>
<a target="_blank" href="//c.youku.com/link">友情链接</a>
<a target="_blank" href="//c.youku.com/aboutcn/adservice/">广告服务</a>
</dd>
</dl>
<dl class="g-w2">
<dt>
优酷热门
</dt>
<dd>
<a target="_blank" href="//tv.youku.com/">剧集</a>
<a target="_blank" href="//movie.youku.com/">电影</a>
<a target="_blank" href="//zy.youku.com/">综艺</a>
<a target="_blank" href="//music.youku.com/">音乐</a>
<a target="_blank" href="//child.youku.com/">少儿</a>
<a target="_blank" href="//news.youku.com/">资讯</a>
<a target="_blank" href="//jilupian.youku.com/">纪实</a>
<a target="_blank" href="//gongyi.youku.com/">公益</a>
</dd>
<dd>
<a target="_blank" href="//sports.youku.com/">体育</a>
<a target="_blank" href="//auto.youku.com/">汽车</a>
<a target="_blank" href="//tech.youku.com/">科技</a>
<a target="_blank" href="//finance.youku.com/">财经</a>
<a target="_blank" href="//ent.youku.com/">娱乐</a>
<a target="_blank" href="http://culture.youku.com/">文化</a>
<a target="_blank" href="//comic.youku.com/">动漫</a>
<a target="_blank" href="//fun.youku.com/">搞笑</a>
</dd>
<dd>
<a target="_blank" href="//travel.youku.com/">旅游</a>
<a target="_blank" href="//fashion.youku.com/">时尚</a>
<a target="_blank" href="//baby.youku.com/">亲子</a>
<a target="_blank" href="//edu.youku.com/">教育</a>
<a target="_blank" href="//game.youku.com/">游戏</a>
<a target="_blank" href="http://vip.youku.com/">会员</a>
<a target="_blank" href="//faxian.youku.com/?from=PC_main_nav">发现</a>
<a target="_blank" href="http://list.youku.com/category/video">片库</a>
</dd>
</dl>
<dl class="g-w3">
<dt>产品中心</dt>
<dd>
<a href="javascript:void(0);" class="ikuDownLoad" data-down-href="http://iku.youku.com/channelinstall/ywebbottom" data-down-mac="http://iku.youku.com/channelinstall/macyweb">PC客户端</a>
</dd>
<dd>
<a target="_blank" href="//mobile.youku.com/index/wireless">手机客户端</a>
</dd>
<dd>
<a target="_blank" href="http://yj.youku.com/?hmsr=1119youku&hmpl=&hmcu=&hmkw=&hmci=">智能硬件</a>
<a target="_blank" href="http://cloud.youku.com/">视频云</a>
</dd>
</dl>
<dl class="g-w4">
<dt>用户</dt>
<dd>
<a target="_blank" href="http://rz.tudou.com/">开通大鱼号</a>
</dd>
<dt>支持</dt>
<dd>
<a id="sttrans" href="javascript:void(0);">繁體版</a>
<a target="_blank" href="//csc.youku.com/feedback-web/web/">在线反馈</a>
<!-- <a target="_blank" href="http://www.youku.com/help/">帮助中心 </a> -->
</dd>
</dl>
<br>
<dl class="g-w1">
<dd><a target="_blank" href="//mapp.youku.com/service/licence/">网络文化经营许可证 京网文[2014]0934-236号</a></dd>
<dd><a target="_blank" href="//mapp.youku.com/service/20130209">京卫网审[2013]第0209号 </a> <a target="_blank" href="http://www.bj.cyberpolice.cn/index.htm">网络110报警服务</a></dd>
<dd> 药品服务许可证(京)-经营-2015-0029</dd>
<dd><a target="_blank" href="//mapp.youku.com/service/gbdsjmzzjyxkz">节目制作经营许可证京字670号</a></dd>
<dd><a target="_blank" href="//mapp.youku.com/service/yingyezhizhao">营业执照</a></dd>
</dl>
<dl class="g-w2">
<dd>请使用者仔细阅读优酷<a target="_blank" href="//mapp.youku.com/service/agreement" class="mr0">使用协议</a>、<a target="_blank" href="//mapp.youku.com/service/banquan" class="mr0">版权声明</a>、<a target="_blank" href="//mapp.youku.com/service/piracy" class="mr0">反盗版盗链声明</a></dd>
<dd>Copyright©2017 优酷 youku.com 版权所有</dd>
<dd>不良信息举报电话: 4008100580</dd>
<dd><a target="_blank" href="//mapp.youku.com/service/0108283">信息网络传播视听节目许可证0108283号</a></dd>
<dd><a target="_blank" href="//mapp.youku.com/service/chubanwu">出版物经营许可证</a></dd>
</dl>
<dl class="g-w3">
<dd><a target="_blank" href="http://www.miibeian.gov.cn/">京ICP证060288号</a></dd>
<dd><a target="_blank" href="//mapp.youku.com/service/chuban">新出网证(京)字160号</a></dd>
<dd><a target="_blank" href="http://www.bjjubao.org/">北京互联网举报中心</a></dd>
<dd><a target="_blank" href="http://www.bjwhzf.gov.cn/accuse.do">北京12318文化市场举报热线</a></dd>
</dl>
<dl class="g-w4">
<a class="qcode" target="_blank" href="//mobile.youku.com/index/wireless"><img src="picture/2821957ebf174aec90e8b359c84d7722.gif" width="80px"></a>
</dl>
<div class="g-authentication">
<a class="aut-1" target="_blank" href="http://www.hd315.gov.cn/beian/view.asp?bianhao=010202006082400023">经营性网站<br>备案信息</a>
<a class="aut-2" target="_blank" href="http://www.itrust.org.cn/yz/pjwx.asp?wm=1786197705">中国互联网<br>诚信联盟</a>
<a class="aut-3" target="_blank" href="http://www.12377.cn/">中国互联网<br>举报中心</a>
<a class="aut-4" target="_blank" href="http://www.12377.cn/node_548446.htm">网络举报<br>APP下载</a>
<a class="aut-5" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000017">京公网安备<br>11000002000017</a>
<a class="aut-6" target="_blank" href="http://sq.ccm.gov.cn/ccnt/sczr/service/business/emark/toDetail/0D76560AE65141FF9FEFE3481D205C50">网络文化<br>经营单位</a>
<a class="aut-7" target="_blank" href="http://www.12377.cn/">暴恐音视频<br>举报专区</a><img src="picture/0510000059479119ADC0B05C010B4454.png" width="80px" style="margin: auto 0">
<div style="text-align: center;margin-top:8px;">
<a style="padding-left:0;" href="https://credit.szfw.org/CX20170616038883280388.html" target="_blank"></a>
</div>
</div>
</footer>
</body>
</html>像是网页脚这样的我直接就去优酷网站按个F12直接复制了。
还有一个小工具叫仿站小工具，一键可以获取到该网页的所有图片，虽然很多网站名字长一点的就不行或者有保护机制的网站就不可以了，但是练习还是很好用的。
登录和注册做了弹出框，第一次尝试弹出框，觉得这个界面是蛮好看的
然后就是点进去看视频的界面
这是我第一次接触将视频放进网页里面去，所以一开始我以为是需要下载到本地，后面发现单纯的靠前端是去实现视频的上传好像是不可能的事情所以就百度了一下其他的办法，优酷的话是最方便的一种，视频下方会有一个分享，复制那个就可以了，缺点是需要更新，视频被删掉就没有了，还有必须联网。
还有一个用户中心的网站，但是是直接复制人家优酷的，就没必要拿出来放在这里了。因为只有这上面几个网页是我纯手敲以及加上网友的贡献。
909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
