devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web前端项目-影视网站开发_前端网站项目

作者：Monodyee | 2024-05-31 17:29:39

赞

踩

前端网站项目

影视网站

本项目主要使用到了 HTML；CSS；JavaScript脚本技术；AJAX无刷新技术；jQuery等技术实现了动态影视网页

运行效果：
在这里插入图片描述
在这里插入图片描述

一：index.html

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>蓝网影视</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/AjaxRequest.js"></script>
<script type="text/javascript">
/******************错误处理的函数*******************************/
function onerror(){
	alert("您的操作有误！");
}
/******************实例化Ajax对象的函数*******************************/
function getInfo(){
	var loader=new net.AjaxRequest("check.php?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET");
}
/************************回调函数**************************************/
function deal_getInfo(){
	document.getElementById("showInfo").innerHTML=this.req.responseText;
}
window.onload=function(){
	getInfo();	//调用getInfo()函数获取最新消息
	window.setInterval("getInfo()", 600000);	//每隔10分钟调用一次getInfo()函数
}
</script>
<script type="text/javascript"> 
$(document).ready(function(){
	$(".scroll").hover(function(){//鼠标指向滚动区域
		clearTimeout(timeID);//中止超时，即停止滚动
	},function(){//鼠标离开滚动区域
		timeID=setInterval('autoScroll()',3000);   //设置超时函数，每过3秒执行一次函数
	});
});
function autoScroll(){   
	$(".scroll").find(".list").animate({   //自定义动画效果
 		marginTop : "-25px"   
	},500,function(){   
		$(this).css({"margin-top" : "0px"}).find("li:first").appendTo(this);   //把列表第一行内容移动到列表最后
	})   
}   
var timeID=setInterval('autoScroll()',3000);   //设置超时函数，每过3秒执行一次函数

$(document).ready(function() {		
	$(".tab_content").hide();							//将class值为tab_content的div隐藏
	$("ul.tabs li a:first").addClass("active"); 				//为第一个选项卡添加样式
	$(".tab_content:first").show(); 						//将第一个class值为tab_content的div显示
	$("ul.tabs li a").hover(function() {						//将鼠标移到某选项卡上
		$("ul.tabs li a").removeClass("active"); 				//移除样式
		$(this).addClass("active"); 						//为当前的选项卡添加样式
		$(".tab_content").hide(); 						//将所有class值为tab_content的div隐藏
		var activeTab = $(this).attr("name"); 		//获取当前选项卡的name属性值
		$(activeTab).show();							//将相同id值的div显示
	});
});
</script>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<table class="top_box" width="1206" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
  <tr>
    <td width="860" height="98" style="cursor: pointer" onClick="javascript:location='index.html'"><img src="images/ball.jpg" width="200" height="50"></td>	
  </tr>
  <tr>
	  <td colspan="6" height="1" bgcolor="#e5e5e5"></td>
  </tr>
  <tr>
  	<td colspan="6" align="center" valign="top">
	<!--导航栏-->
<div>
<script type="text/javascript">
function showadv(par,par2){
	document.getElementById("a0").style.display = "none";//隐藏id为a0的元素
	document.getElementById("a0bg").style.backgroundImage="";	//设置id为a0bg的元素的背景图片为空
	document.getElementById("a1").style.display = "none";//隐藏id为a1的元素
	document.getElementById("a1bg").style.backgroundImage="";//设置id为a1bg的元素的背景图片为空
	document.getElementById("a2").style.display = "none";//隐藏id为a2的元素
	document.getElementById("a2bg").style.backgroundImage="";//设置id为a2bg的元素的背景图片为空
	document.getElementById("a3").style.display = "none";//隐藏id为a3的元素
	document.getElementById("a3bg").style.backgroundImage="";//设置id为a3bg的元素的背景图片为空
	document.getElementById("a4").style.display = "none";//隐藏id为a4的元素
	document.getElementById("a4bg").style.backgroundImage="";//设置id为a4bg的元素的背景图片为空
	document.getElementById("a5").style.display = "none";//隐藏id为a5的元素
	document.getElementById("a5bg").style.backgroundImage="";//设置id为a5bg的元素的背景图片为空
	document.getElementById("a6").style.display = "none";//隐藏id为a6的元素
	document.getElementById("a6bg").style.backgroundImage="";//设置id为a6bg的元素的背景图片为空
	document.getElementById(par).style.display = "";	//显示指定的元素
	document.getElementById(par2).style.backgroundImage = "url(images/i13.gif)";	//设置指定元素的背景图片
}
</script>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
      <tr>
        <td><div class="i01w">
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td width="166" height="42" align="center" id="a0bg">
					<span id="a0color" onMouseOver="showadv('a0','a0bg')">
						<a href="index.html">首页</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a1bg" align="center" width="166">
					<span id="a1color" onMouseOver="showadv('a1','a1bg')">
						<a href="love.html">爱情片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a2bg" align="center" width="166">
					<span id="a2color" onMouseOver="showadv('a2','a2bg')">
						<a href="action.html">动作片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a3bg" align="center" width="166">
					<span id="a3color" onMouseOver="showadv('a3','a3bg')">
						<a href="scienceFiction.html">科幻片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a4bg" align="center" width="166">
					<span id="a4color" onMouseOver="showadv('a4','a4bg')">
						<a href="horror.html">恐怖片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
				<td id="a5bg" align="center" width="166">
					<span id="a5color" onMouseOver="showadv('a5','a5bg')">
						<a href="art.html">文艺片</a>
					</span>
				</td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a6bg" align="center" width="166">
					<span id="a6color" onMouseOver="showadv('a6','a6bg')">
						<a href="cartoon.html">动漫</a>
					</span>
				</td>
              </tr>
            </table>
        </div></td>
      </tr>
      <tr>
        <td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0" border="0">
            <tr>
              <td align="left" style="padding-left:12px">欢迎来到蓝网影视</td>
            </tr>
          </table>
            <table id="a1" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td  style="padding-left:97px" align="left"><ul class="i02w">
                    <li>爱情喜剧</li>
                  <li>古典爱情</li>
                  <li>现代爱情</li>
                </ul></td>
              </tr>
            </table>
          <table id="a2" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:292px" align="left"><ul class="i02w">
                    <li><a href="#">枪战片</a></li>
                  <li><a href="#">武侠片</a></li>
				  <li><a href="#">魔幻片</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a3" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:456px"><ul class="i02w">
                    <li><a href="#">外星人</a></li>
                  <li><a href="#">自然灾难</a></li>
				  <li><a href="#">生物变异</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a4" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:636px"><ul class="i02w">
                    <li><a href="#">惊悚片</a></li>
                  <li><a href="#">恐怖片</a></li>
				  <li><a href="#">悬疑片</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a5" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-right:160px"><ul class="i03w">
                  <li>音乐片</li>
                  <li>歌舞片</li>
                  <li>纪录片</li>
                </ul></td>
              </tr>
          </table>
		  <table id="a6" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-right:2px"><ul class="i03w">
                  <li>历史动漫</li>
                  <li>搞笑动漫</li>
                  <li>英雄动漫</li>
                </ul></td>
              </tr>
          </table></td>
      </tr>
    </table>
  </div>
	<!-- ----------------------------------- -->
	</td>
  </tr>
  <tr>
    <td colspan="6"  bgcolor="#e5e5e5" valign="top">
		<div class="banner" style="width: 100%">
			<div id='tabs'>
				<a name="i" href="#"><img src="video/13.png" width="100%" height="320" /></a>
				<a name="i" href="#"><img src="video/14.png" width="100%" height="320" /></a>			
			</div>
		</div>
	</td>
  </tr>
</table>

<div class="top_box">
	<div id="kind">
		<ul class="kind">
			<li onMouseOver="showadv('a1')">按地区</li>
			<li onMouseOver="showadv('a2')">按语言</li>
			<li onMouseOver="showadv('a3')">按明星</li>
		</ul>
		<div class="sibkind">
		<div id="a1">
			<ul class="adv">
				<li>内地</li>
				<li>香港</li>
				<li>美国</li>
				<li>韩国</li>
				<li>欧洲</li>
				<li>泰国</li>
				<li>其他</li>
			</ul>
		</div>
		<div id="a2">
			<ul class="adv">
				<li>中文</li>
				<li>英文</li>
			</ul>
		</div>
		<div id="a3">
			<ul class="adv">
				<li>杰森.斯坦森</li>
				<li>阿兰.德龙</li>
				<li>阿诺德.施瓦辛格</li>
				<li>亚当.桑德勒</li>
				<li>汤姆.克鲁斯</li>
				<li>基努.里维斯</li>
			</ul>
		</div>
		</div>
	</div>
	<span class="hot">热门专题</span>
	<div id="showInfo"></div>
</div>

<table class="top_box" width="1206" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
  <tr>
	<td>&nbsp;</td>
    <td width="920" valign="top">
<!--最新影视-->
	  <table width="100%" height="50" border="0" style="margin-left:0;">
	    <tr>
		  <td align="left" valign="bottom" style="font-size:22px;">电影</td>
		</tr>
	  </table>

      <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:0;">
        <tr>
          <td width="40%">
		  <table width="98%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
		    <tr><td><a target="_blank"><img src="video/1.jpg" width="400" height="420" border="0" /></a></td></tr>
			<tr><td height="40" valign="bottom" style="padding-left:20px; font-size:20px; color: #333333"><a target="_blank">终结者5</a></td></tr>
			<tr><td height="40" valign="middle" style="padding-left:20px; font-size:14px; color: #7a7a7a">未来战争终结者</td></tr>
		  </table>
		  </td>
		  <td width="54%" align="center">
		    <table width="100%" border="0">

        <tr>
          <td width="49%" align="center">
		  <!--显示影视资料 -->
		  <table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;">
		  	<tr>
				<td align="center"><a target="_blank"><img name="news" src="video/2.jpg" width="100%" height="172" alt="" border="0" /></a></td>
			</tr>
			<tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">午夜邂逅</a></td></tr>
			<tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">克里斯.埃文斯导演处女作</td></tr>
		  </table>
		  </td>
		  <td width="49%" align="center">
		  <!--显示影视资料 -->
		  <table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;">
		  	<tr>
				<td align="center"><a target="_blank"><img name="news" src="video/3.jpg" width="100%" height="172" alt="" border="0" /></a></td>
			</tr>
			<tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">我是传奇</a></td></tr>
			<tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">末世科幻动作电影</td></tr>
		  </table>
		  </td>
		</tr>
		<tr>
          <td width="49%" align="center">
		  <!--显示影视资料 -->
		  <table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;">
		  	<tr>
				<td align="center"><a target="_blank"><img name="news" src="video/4.jpg" width="100%" height="172" alt="" border="0" /></a></td>
			</tr>
			<tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">史密斯夫妇</a></td></tr>
			<tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">完美间谍夫妻档</td></tr>
		  </table>
		  </td>
		  <td width="49%" align="center">
		  <!--显示影视资料 -->
		  <table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;">
		  	<tr>
				<td align="center"><a target="_blank"><img name="news" src="video/5.jpg" width="100%" height="172" alt="" border="0" /></a></td>
			</tr>
			<tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">一线声机</a></td></tr>
			<tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">一线声机保持通话</td></tr>
		  </table>
		  </td>
		</tr>
      </table>
	</td>
	</tr>
	</table>
	</td>
	<td width="270" valign="top">
	<!--影视排行 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-top:0px;margin-left:5%;">
	<tr>
		<td align="left" height="50" style="font-size:22px;" valign="bottom">电影排行</td>
		<td align="center" valign="bottom">
		  <ul class="tabs">
		  	<li><a name="#tab1">热播</a></li>
			<li><a name="#tab2">经典</a></li>
		  </ul>
		</td>
	</tr>
</table>
<div id="tab1" class="tab_content">
<table width="95%" border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top: 2px;margin-left:5%;">
<script>
	var num = 1;//定义影片排名变量
    //定义影片名称数组
	var nameArr = new Array("终结者5","飓风营救","我是传奇","一线声机","罗马假日","史密斯夫妇","午夜邂逅");
    //定义影片主演数组
	var dnumArr = new Array("阿诺德.施瓦辛格","连姆.尼森","威尔.史密斯","杰森.斯坦森","格里高利.派克","布拉德.皮特","克里斯.埃文斯");
	for(var i=0; i<nameArr.length; i++){
		document.write('<tr height="43">');
		document.write('<td width="26" align="center" class="f_td">'+(num++)+'</td>');//输出影片排名
		document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArr[i]+'</td>');//输出影片名称
		document.write('<td width="90" align="right" class="f_td">'+dnumArr[i]+'</td></tr>');//输出影片主演
	}
</script>
</table>
</div>
<div id="tab2" class="tab_content">
<table width="95%" border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top: 2px;margin-left:5%;">
<script>
	var num = 1;//定义影片排名变量
	//定义影片名称数组
	var nameArr = new Array("机械师2：复活","变形金刚","暮光之城","怦然心动","电话情缘","超凡蜘蛛侠","雷神");
	//定义影片主演数组
	var dnumArr = new Array("杰森.斯坦森","希亚.拉博夫","克里斯汀.斯图尔特","玛德琳.卡罗尔","杰西.麦特卡尔菲","安德鲁.加菲尔德","克里斯.海姆斯沃斯");
	for(var i=0; i<nameArr.length; i++){
		document.write('<tr height="43">');
		document.write('<td width="26" align="center" class="f_td">'+(num++)+'</td>');//输出影片排名
		document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArr[i]+'</td>');//输出影片名称
		document.write('<td width="90" align="right" class="f_td">'+dnumArr[i]+'</td></tr>');//输出影片主演
	}
</script>
</table>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-top:0px;margin-left:5%;">
	<tr><td align="left" height="50" style="font-size:22px;" valign="bottom">即将上线</td></tr>
</table>
<div class="scroll">   
	<ul class="list">   
 		<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> 
	</ul>   
</div>
	</td>
	  <td>&nbsp;</td>
  </tr>
</table>

<div id="demo" class="top_box" style="overflow: hidden; width: 1206px; height: 264px">
  <table width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td id="demo1"><table cellpadding="0" cellspacing="0">
        <tr>
          <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/6.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">机械师2：复活</a></div>
			  <div class="content">冷面杀手铁汉柔情</div></td>
          <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/7.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">变形金刚</a></div>
			  <div class="content">以动画为基础的创新作品</div></td>
          <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/8.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">暮光之城</a></div>
			  <div class="content">吸血鬼的爱情故事</div></td>
          <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/9.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">怦然心动</a></div>
			  <div class="content">男孩女孩间的有趣战争</div></td>
          <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/10.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">飓风营救</a></div>
			  <div class="content">老特工重新出山</div></td>
		  <td width="191" height="200" style="padding-right:10px">
			  <a target="_blank">
				  <img src="video/11.jpg" width="191" height="200" border="0" />
			  </a>
			  <div class="title"><a target="_blank">罗马假日</a></div>
			  <div class="content">好莱坞黑白电影经典之作</div></td>
        </tr>
      </table></td>
      <td id="demo2"></td>
    </tr>
  </table>
</div>
<script type="text/javascript">
var speed=30;//设置超时时间
demo2.innerHTML=demo1.innerHTML;//设置id为demo2的元素的HTML内容
//设置图片向左滚动
function Marquee(){
	if(demo2.offsetWidth-demo.scrollLeft<=0){
		demo.scrollLeft-=demo1.offsetWidth;
	}else{
		demo.scrollLeft++;
	}
}
var MyMar=setInterval(Marquee,speed);//实现图片滚动
//鼠标移入图片时停止滚动
demo.onmouseover=function(){
	clearInterval(MyMar);
}
//鼠标移出图片时继续滚动
demo.onmouseout=function(){
	MyMar=setInterval(Marquee,speed);
}
</script>

<div align="center">
<!-- <img src="images/call.png" border="0" usemap="#Map" /> -->
<map name="Map" id="Map"><area shape="rect" coords="5,7,60,26" href="call.html" target="_blank" />
</map>
</div>
<table id="float" width="81" cellspacing="0">
  <!-- <tr>
    <td><img src="images/ra_01.png" width="81" height="12" /></td>
  </tr> -->
  <tr>
    <td align="center" background="images/ra_03.gif">
	  <table width="100%" border="0">
      <!--  <tr>
          <td height="65" align="center" valign="top">
		    <a href="#">
			 <img src="images/365App.png" width="59" height="63" border="0"/>
			</a>
		  </td>
        </tr> -->
       <!-- <tr>
          <td height="15" align="center" valign="top"></td>
        </tr> -->
       <!-- <tr>
          <td height="85" align="center" valign="top">
		   <img src="images/erweima.png" width="59" height="81" border="0"/>
		  </td>
        </tr> -->
      </table>
	</td>
  </tr>
 <!-- <tr>
    <td><img src="images/ra_02.png" width="81" height="11" /></td>
  </tr> -->
</table>
<script type="text/javascript" src="js/float.js"></script>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
  • 429
  • 430
  • 431
  • 432
  • 433
  • 434
  • 435
  • 436
  • 437
  • 438
  • 439
  • 440
  • 441
  • 442
  • 443
  • 444
  • 445
  • 446
  • 447
  • 448
  • 449
  • 450
  • 451
  • 452
  • 453
  • 454
  • 455
  • 456
  • 457
  • 458
  • 459
  • 460
  • 461
  • 462
  • 463
  • 464
  • 465
  • 466
  • 467
  • 468
  • 469
  • 470
  • 471
  • 472
  • 473
  • 474
  • 475
  • 476
  • 477
  • 478
  • 479
  • 480
  • 481
  • 482
  • 483
  • 484
  • 485
  • 486
  • 487
  • 488
  • 489
  • 490
  • 491
  • 492
  • 493
  • 494
  • 495
  • 496
  • 497
  • 498
  • 499
  • 500

二：scienceFiction.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<link rel="stylesheet" href="css/style.css" />
<body>

<table class="top_box" width="1212" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
  <tr>
    <td width="860" height="98" style="cursor: pointer" onClick="javascript:location='index.html'"><img src="images/ball.png"></td>	
  </tr>
  <tr>
	  <td colspan="6" height="1" bgcolor="#e5e5e5"></td>
  </tr>
  <tr>
  	<td colspan="6" align="center" valign="top">
	<!--导航栏-->
		<div>
    <script language="JavaScript" type="text/javascript">
function showadv(par,par2)
{
document.getElementById("a0").style.display = "none";
document.getElementById("a0bg").style.backgroundImage="";	
document.getElementById("a1").style.display = "none";
document.getElementById("a1bg").style.backgroundImage="";
document.getElementById("a2").style.display = "none";
document.getElementById("a2bg").style.backgroundImage="";
document.getElementById("a3").style.display = "none";
document.getElementById("a3bg").style.backgroundImage="";
document.getElementById("a4").style.display = "none";
document.getElementById("a4bg").style.backgroundImage="";
document.getElementById("a5").style.display = "none";
document.getElementById("a5bg").style.backgroundImage="";
document.getElementById("a6").style.display = "none";
document.getElementById("a6bg").style.backgroundImage="";
document.getElementById(par).style.display = "";	
document.getElementById(par2).style.backgroundImage = "url(images/i13.gif)";	
}
  </script>
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
      <tr>
        <td><div class="i01w">
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td width="166" height="42" align="center" id="a0bg"><span id="a0color" onMouseOver="showadv('a0','a0bg')"><a href="index.html">首页</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a1bg" align="center" width="166"><span id="a1color" onMouseOver="showadv('a1','a1bg')"><a href="love.html">爱情片</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a2bg" align="center" width="166"><span id="a2color" onMouseOver="showadv('a2','a2bg')"><a href="action.html">动作片</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a3bg" align="center" width="166"><span id="a3color" onMouseOver="showadv('a3','a3bg')"><a href="scienceFiction.html">科幻片</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a4bg" align="center" width="166"><span id="a4color" onMouseOver="showadv('a4','a4bg')"><a href="horror.html">恐怖片</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
				<td id="a5bg" align="center" width="166"><span id="a5color" onMouseOver="showadv('a5','a5bg')"><a href="art.html">文艺片</a></span></td>
                <td width="1"><img src="images/i14.gif" width="1" height="25" /></td>
                <td id="a6bg" align="center" width="166"><span id="a6color" onMouseOver="showadv('a6','a6bg')"><a href="cartoon.html">动漫</a></span></td>
              </tr>
            </table>
        </div></td>
      </tr>
      <tr>
        <td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0"　border="0">
            <tr>
              <td align="left" style="padding-left:12px">欢迎来到365影视网</td>
            </tr>
          </table>
            <table id="a1" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td  style="padding-left:97px" align="left"><ul class="i02w">
                    <li>爱情喜剧</li>
                  <li>古典爱情</li>
                  <li>现代爱情</li>
                </ul></td>
              </tr>
            </table>
          <table id="a2" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:292px" align="left"><ul class="i02w">
                    <li><a href="#">枪战片</a></li>
                  <li><a href="#">武侠片</a></li>
				  <li><a href="#">魔幻片</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a3" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:456px"><ul class="i02w">
                    <li><a href="#">外星人</a></li>
                  <li><a href="#">自然灾难</a></li>
				  <li><a href="#">生物变异</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a4" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-left:636px"><ul class="i02w">
                    <li><a href="#">惊悚片</a></li>
                  <li><a href="#">恐怖片</a></li>
				  <li><a href="#">悬疑片</a></li>
                </ul></td>
              </tr>
          </table>
          <table id="a5" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-right:160px"><ul class="i03w">
                  <li>音乐片</li>
                  <li>歌舞片</li>
                  <li>纪录片</li>
                </ul></td>
              </tr>
          </table>
		  <table id="a6" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
              <tr>
                <td style="padding-right:2px"><ul class="i03w">
                  <li>历史动漫</li>
                  <li>搞笑动漫</li>
                  <li>英雄动漫</li>
                </ul></td>
              </tr>
          </table></td>
      </tr>
    </table>
  </div>
	<!-- ----------------------------------- -->
	</td>
  </tr>
  <tr>
    <td colspan="6"  bgcolor="#e5e5e5" valign="top">
		<!-- <div class="banner" style="width: 100%">
			<div width="100%" style="height: 154px; background: url('images/login_bg.jpg') no-repeat center">
			</div>
		</div> -->
	</td>
  </tr>
</table>

<div class="w_1200" style="height:1px; background-color: #CCCCCC"></div>
<!-- 列表-->



<table class="w_1200 right_table" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr><td align="left" style="font-size:22px; padding-left:0px;">热门推荐</td></tr>
</table>

<div class="w_1200" style="">

<!--显示影视资料 -->
<table width="32%" border="0" cellspacing="0" cellpadding="0" style="float:left; border: 1px solid #dadada; margin-right: 8px;margin-bottom: 8px">
  <tr>
	<td width="52%" align="center" valign="middle"><a target="_blank"><img name="news" src="video/1.jpg" width="100%" height="260" alt="" border="0" style=" border-color:#CCCCCC; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;" /></a></td>
	<td align="left" valign="top">
		<table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin-left: 14px">
		  <tr>
			<td align="left" height="68" colspan="2" style="font-size:20px; padding-left: 0px;"><a target="_blank">终结者5</a></td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">导演：</td>
			<td>艾伦.泰勒</td>
		  </tr>
		  <tr>
			<td width="50" height="35" align="left" valign="middle" style="">主演：</td>
			<td >阿诺德.施瓦辛格</td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">类型：</td>
			<td>科幻片</td>
		  </tr>
		  <tr>
			<td height="35" colspan="2" align="left" valign="middle" style="padding-left:2%;">
				<a target="_blank"><img src="images/online_icon.png" border="0" alt="在线观看" /></a>
				&nbsp;
				<img src="images/show_icon.png" alt="介绍" border="0" style="cursor:pointer;" onClick="javascript:window.open('intro/intro1.html','new','height=640,width=690,top=100,left=400');"/></td>
		  </tr>
		</table>
	</td>
  </tr>
</table>
<table width="32%" border="0" cellspacing="0" cellpadding="0" style="float:left; border: 1px solid #dadada; margin-right: 8px;margin-bottom: 8px">
  <tr>
	<td width="52%" align="center" valign="middle"><a target="_blank"><img name="news" src="video/7.jpg" width="100%" height="260" alt="" border="0" style=" border-color:#CCCCCC; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;" /></a></td>
	<td align="left" valign="top">
		<table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin-left: 14px">
		  <tr>
			<td align="left" height="68" colspan="2" style="font-size:20px; padding-left: 0px;"><a target="_blank">变形金刚</a></td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">导演：</td>
			<td>迈克尔.贝</td>
		  </tr>
		  <tr>
			<td width="50" height="35" align="left" valign="middle" style="">主演：</td>
			<td >希亚.拉博夫</td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">类型：</td>
			<td>科幻片</td>
		  </tr>
		  <tr>
			<td height="35" colspan="2" align="left" valign="middle" style="padding-left:2%;">
				<a target="_blank"><img src="images/online_icon.png"  border="0" alt="在线观看" /></a>
				&nbsp;
				<img src="images/show_icon.png" alt="介绍" border="0" style="cursor:pointer;" onClick="javascript:window.open('intro/intro7.html','new','height=640,width=690,top=100,left=400');"/></td>
		  </tr>
		</table>
	</td>
  </tr>
</table>
<table width="32%" border="0" cellspacing="0" cellpadding="0" style="float:left; border: 1px solid #dadada; margin-right: 8px;margin-bottom: 8px">
  <tr>
	<td width="52%" align="center" valign="middle"><a target="_blank"><img name="news" src="video/14.jpg" width="100%" height="260" alt="" border="0" style=" border-color:#CCCCCC; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;" /></a></td>
	<td align="left" valign="top">
		<table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin-left: 14px">
		  <tr>
			<td align="left" height="68" colspan="2" style="font-size:20px; padding-left: 0px;"><a target="_blank">超凡蜘蛛侠</a></td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">导演：</td>
			<td>马克.韦布</td>
		  </tr>
		  <tr>
			<td width="50" height="35" align="left" valign="middle" style="">主演：</td>
			<td >安德鲁.加菲尔德</td>
		  </tr>
		  <tr>
			<td height="35" align="left" valign="middle">类型：</td>
			<td>科幻片</td>
		  </tr>
		  <tr>
			<td height="35" colspan="2" align="left" valign="middle" style="padding-left:2%;">
				<a target="_blank"><img src="images/online_icon.png"  border="0" alt="在线观看" /></a>
				&nbsp;
				<img src="images/show_icon.png" alt="介绍" border="0" style="cursor:pointer;" onClick="javascript:window.open('intro/intro14.html','new','height=640,width=690,top=100,left=400');"/></td>
		  </tr>
		</table>
	</td>
  </tr>
</table>
</div>
<div align="center">
<img src="images/call.png" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="5,7,60,26" href="call.html" target="_blank" />
</map>
</div>
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247

三：check.php

<?php
header("Content-type:text/html;charset=utf-8");
?>
<div>
	<ul>
	  <li>《愤怒的小鸟》小鸟飞起来</li>
	  <li>《极度惊悚》胆小者勿入</li>
	  <li>《黑海夺金》裘德.洛成摸金校尉</li>
	  <li>《潜伏者》毒师卧底贩毒集团</li>
	</ul>
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

四：CSS文件

（1）intro.css
*{
margin:0px;
padding:0px;
}
.moviedetail{
	font-size: 20px;
	color: #2bb673; 
	border-bottom: 4px solid #2bb673; 
	line-height: 54px; 
	margin: 0 0 6px 0px; 
	padding-bottom: 10px
}
.pic{
margin:15px 0px;
border:1px #CCCCCC solid;
}
body{
font-size:18px;}
.moviename{
font-size:24px; 
font-weight:bolder;
}.movieintro{
font-size:14px; 
line-height:30px;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

五：JS文件

（1）AjaxRequest.js
var net=new Object();		//创建一个自定义对象
//编写构造函数
net.AjaxRequest=function(url,onload,onerror,method,params){
  this.req=null;
  this.onload=onload;
  this.onerror=(onerror) ? onerror : this.defaultError;
  this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate=function(url,method,params){
  if (!method){
    method="GET";	//设置默认的请求方式为GET
  }
  if (window.XMLHttpRequest){	//非IE浏览器
    this.req=new XMLHttpRequest();	//创建XMLHttpRequest对象
  } else if (window.ActiveXObject){//IE浏览器
		try {
			this.req=new ActiveXObject("Microsoft.XMLHTTP");	//创建XMLHttpRequest对象
		} catch (e) {
			try {
				this.req=new ActiveXObject("Msxml2.XMLHTTP");	//创建XMLHttpRequest对象
		   } catch (e) {}
		}
  }
  if (this.req){
    try{
      var loader=this;
      this.req.onreadystatechange=function(){
        net.AjaxRequest.onReadyState.call(loader);
      }

      this.req.open(method,url,true);		// 建立对服务器的调用
	  if(method=="POST"){		// 如果提交方式为POST
		this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 	// 设置请求的内容类型
		this.req.setRequestHeader("x-requested-with", "ajax");	//设置请求的发出者
	  }
      this.req.send(params);			// 发送请求
    }catch (err){
      this.onerror.call(this);			//调用错误处理函数
    }
  }
}

//重构回调函数
net.AjaxRequest.onReadyState=function(){
  var req=this.req;
  var ready=req.readyState;		//获取请求状态
  if (ready==4){							//请求完成
	    if (req.status==200 ){					//请求成功
	    	this.onload.call(this);
	    }else{
    		this.onerror.call(this);		//调用错误处理函数
	    }
  }
}
//重构默认的错误处理函籹
net.AjaxRequest.prototype.defaultError=function(){
	alert("错误数据\n\n回调状态:" + this.req.readyState + "\n状态: " + this.req.status);
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
（2）float.js
var ImgW=parseInt(float.width);						//获取浮动窗口的宽度
function permute(tfloor,Top,left){
	//获取纵向滚动条滚动的距离
	var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
    buyTop=Top+scrollTop;								//获取图片在垂直方向的绝对位置
    document.all[tfloor].style.top=buyTop+"px";			//设置图片在垂直方向的绝对位置
	//获取横向滚动条滚动的距离
	var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
    var buyLeft=scrollLeft+document.body.clientWidth-ImgW;	//获取图片在水平方向的绝对位置
    document.all[tfloor].style.left=buyLeft-left+"px";		//设置图片在水平方向的绝对位置
}
setInterval('permute("float",300,50)',1);			//每隔1毫秒就执行一次permute()函数

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
（3）script.js
// JavaScript Document
var len = document.getElementsByName("i");//获取name属性值为i的元素
var pos = 0;//定义变量值为0
function changeimage(){
    len[pos].style.display = "none";//隐藏元素
    pos++;//变量值加1
    if(pos == len.length) pos=0;//变量值重新定义为0
    len[pos].style.display = "block";//显示元素
}
setInterval("changeimage()",3000);//每隔3秒钟执行一次changeimage()函数
function addclass(id){
    document.getElementById(id).className = 'nav_cur';
}
function removeclass(id){
    document.getElementById(id).className = 'd';
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

六：intro电影详情文件包

1.intro1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<script src="js/chk.js" language="javascript"></script>
<link rel="stylesheet" href="../css/intro.css" />
<body>
<table width="660">
	<tr>
		<td width="34">&nbsp;</td><td colspan="3"><span class="moviedetail">电影详情</span></td>
	</tr>
	<tr><td width="34"></td><td colspan="2" height="1" bgcolor="#e5e5e5"></td></tr>
  	<tr>
		<td></td>
		<td align="left" valign="top" style="padding-top:30px;">
			<table width="98%">
				<tr>
					<td width="20%" align="left" valign="middle"><img src="../video/1.jpg" width="280" height="362" class="pic"/></td>
					<td width="80%" align="left" valign="top">
						<table style="margin-top:10px; padding-left:20px;">
							<tr>
								<td height="60" class="moviename">终结者5</td>
							</tr>
							<tr>
								<td width="280" height="50">导演：艾伦.泰勒</td>
							</tr>
							<tr>
								<td height="50">主演：阿诺德.施瓦辛格</div></td>
							</tr>
							<tr>
								<td height="50">类型：科幻片</td>
							</tr>
							<tr>
								<td height="50">语言：英文</td>
							</tr>
							<tr>
								<td height="50">发行时间：2007-04-01</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
		  			<td height="48" colspan="2">&nbsp;&nbsp;影片详情:</td>
				</tr>
				<tr>
		  			<td colspan="2" class="movieintro">&nbsp;&nbsp;影片讲述了未来战争如火如荼，凯尔发现眼前的世界与预计中完全不同，一场关乎人类未来的“人机”大战正式上演。</td>
				</tr>
	  		</table>
		</td>
  	</tr>
</table>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
2.intro2.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<script src="js/chk.js" language="javascript"></script>
<link rel="stylesheet" href="../css/intro.css" />
<body>
<table width="660">
	<tr>
		<td width="34">&nbsp;</td><td colspan="3"><span class="moviedetail">电影详情</span></td>
	</tr>
	<tr><td width="34"></td><td colspan="2" height="1" bgcolor="#e5e5e5"></td></tr>
  	<tr>
		<td></td>
		<td align="left" valign="top" style="padding-top:30px;">
			<table width="98%">
				<tr>
					<td width="20%" align="left" valign="middle"><img src="../video/2.jpg" width="280" height="362" class="pic"/></td>
					<td width="80%" align="left" valign="top">
						<table style="margin-top:10px; padding-left:20px;">
							<tr>
								<td height="60" class="moviename">午夜邂逅</td>
							</tr>
							<tr>
								<td width="280" height="50">导演：克里斯.埃文斯</td>
							</tr>
							<tr>
								<td height="50">主演：克里斯.埃文斯</div></td>
							</tr>
							<tr>
								<td height="50">类型：爱情片</td>
							</tr>
							<tr>
								<td height="50">语言：英文</td>
							</tr>
							<tr>
								<td height="50">发行时间：2014-09-12</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
		  			<td height="48" colspan="2">&nbsp;&nbsp;影片详情:</td>
				</tr>
				<tr>
		  			<td colspan="2" class="movieintro">&nbsp;&nbsp;故事发生在纽约，一名年轻女子艾比急着去赶1:30开往波士顿的火车却错过。因为在酒吧时手包被盗，所以身无分文打算在中央车站门口等到早晨坐车回家。这时，一名同样感到夜晚难熬的小号手主动提供帮助。两人从陌生，到一起经历了一些轶事到敞开心扉，共度了奇妙的一晚。</td>
			</tr>
	  		</table>
		</td>
  	</tr>
</table>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

​ 注意：

1.所有的电脑详情页面都照着这两个例子这么写就好

2.本篇仅包含前端页面

另外：由于博客字数限制，本篇文章所展示代码并不全面，仅可供参考之用

本项目的完整代码及其素材已上传至资源，大家自行去下载就好

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/653447
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号