![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
JS选项卡特效之仿66影视效果图如下：
JS选项卡特效之仿66影视源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 导入初始样式表 -->
<link rel="stylesheet" href="css/reset.css">
<!-- 导入公共模式表 -->
<link rel="stylesheet" href="css/common.css">
<!-- 导入首页样式表 -->
<link rel="stylesheet" href="css/index.css">
<title>仿66影视</title>
</head>
<body>
<!-- 公共顶部 -->
<div class="header">
<div class="top">
<div class="info">
<p class="left"><font color="#000">电影港启用新地址www.dygang.net,请大家收藏.</font></p>
<p class="right">
│<a href="" target="_blank">喜剧片</a>│
<a href="" target="_blank">动作片</a>│
<a href="" target="_blank">爱情片</a>│
<a href="" target="_blank">恐怖片</a>│
<a href="" target="_blank">悬疑片</a>│
<a href="" target="_blank">科幻片</a>│
<a href="" target="_blank">奇幻片</a>│
<a href="" target="_blank">传记片</a>│
<a href="" target="_blank">战争片</a>│
<a href="" target="_blank">剧情片</a>│
<a href="" target="_blank">印度电影</a>│
<a href=""><font color="0058b0">设为主页</font></a>│
<a href=""><font color="0058b0">加入收藏</font></a>│
<a href=""><font color="0058b0">访客留言</font></a>
</p>
</div>
</div>
<!-- logo -->
<div class="logo">
<div class="info"><a href=""><img src="images/logo.gif" alt="logo"></a></div>
</div>
<!-- 导航 -->
<div class="menu">
<dl>
<li><a href="">首页│</a></li>
<li><a href="">最新电影│</a></li>
<li><a href="">BD高清│</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="">1080P高清区│</a></li>
<li><a href="">720P高清区│</a></li>
<li><a href="">3D电影│</a></li>
<li><a href="">电影专题│</a></li>
<li><a href=""><font color="red">[本站教程]</font></a></li>
</dl>
</div>
<!-- 广告 -->
<div class="gg">
<div class="info"><a href="http://tool.php.cn/" target="_blank"><img src="images/gg.jpg" alt="php中文网"></a></div>
</div>
<!-- 搜索 -->
<div class="suso">
<div class="info">
<p class="left"> 搜索关键字： <input type="text" name="name" style="width: 250px">
范围：
<select name="show">
<option value="title,smalltext" selected>默认
<option value="title">仅搜索标题
</select></option>
<button>搜 索</button></p>
<span>热门搜索：
<a href="">行尸走肉</a>
<a href="">速度与激情</a>
<a href="">变形金刚</a>
<a href="">生活大爆炸</a>
<a href="">复仇者联盟</a>
</span>
</div>
</div>
</div>
<!-- 网站主体 -->
<div class="main"></div>
<!-- 左侧最新 -->
<div class="mleft">
<ul>
<li class="active">最新电影（点这里）</li>
<li>最新电视剧（点这里）</li>
<li>最新高清（点这里）</li>
</ul>
<span><a href="">更多电影>></a></span>
<div style="display: block;">
<ul>
<li>
<a href=""><img src="images/101.jpg" alt="揭幕战"></a>
<p><a href="">揭幕战</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/102.jpg" alt="猎鸟"></a>
<p><a href="">猎鸟</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/103.jpg" alt="2018年03月佳片"></a>
<p><a href="">2018年03月佳片</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/104.jpg" alt="环太平洋2：雷霆"></a>
<p><a href="">环太平洋2：雷霆</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/105.jpg" alt="布里斯比熊"></a>
<p><a href="">布里斯比熊</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/106.jpg" alt="房客"></a>
<p><a href="">房客</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/107.jpg" alt="玉米地的小孩"></a>
<p><a href="">玉米地的小孩</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/108.jpg" alt="通勤营救[高清]"></a>
<p><a href="">通勤营救[高清]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/109.jpg" alt="与神同行"></a>
<p><a href=""></a>与神同行</p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/110.jpg" alt="心灵想要大声呼喊"></a>
<p><a href="">心灵想要大声呼喊</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/111.jpg" alt="门"></a>
<p><a href="">门</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/112.jpg" alt="魔法总动员"></a>
<p><a href="">魔法总动员</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/113.jpg" alt="大世界/好极了"></a>
<p><a href="">大世界/好极了</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/114.jpg" alt="大佛普拉斯"></a>
<p><a href="">大佛普拉斯</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/115.jpg" alt="念力"></a>
<p><a href="">念力</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/116.jpg" alt="杂交种"></a>
<p><a href="">杂交种</a></p>
<p>2018-04-01</p>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href=""><img src="images/201.jpg" alt="职场老妈[第二季]"></a>
<p><a href="">职场老妈[第二季]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/202.jpg" alt="飓风营救[第二季]"></a>
<p><a href="">飓风营救[第二季]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/203.jpg" alt="百战天龙[第二季]"></a>
<p><a href="">百战天龙[第二季]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/204.jpg" alt="雷蒙斯尼奇的不幸"></a>
<p><a href="">雷蒙斯尼奇的不幸</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/205.jpg" alt="神盾局特工[第五季]"></a>
<p><a href="">神盾局特工[第五季]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/206.jpg" alt="住院医师[第一季]"></a>
<p><a href="">住院医师[第一季]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/207.jpg" alt="诡媚海妖[第一季]"></a>
<p><a href="">诡媚海妖[第一季]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/208.jpg" alt="动物系恋人啊"></a>
<p><a href="">动物系恋人啊</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/209.jpg" alt="翻生武林[全集]"></a>
<p><a href="">翻生武林[全集]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/210.jpg" alt="果栏中的江湖大嫂"></a>
<p><a href="">果栏中的江湖大嫂</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/211.jpg" alt="万能图书馆"></a>
<p><a href="">万能图书馆</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/212.jpg" alt="南方有乔木"></a>
<p><a href="">南方有乔木</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/213.jpg" alt="老男孩"></a>
<p><a href="">老男孩</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/214.jpg" alt="好久不见"></a>
<p><a href="">好久不见</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/215.jpg" alt="绿箭[第六季16]"></a>
<p><a href="">绿箭[第六季16]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/216.jpg" alt="芝加哥烈焰[第六季]"></a>
<p><a href="">芝加哥烈焰[第六季]</a></p>
<p>2018-04-01</p>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href=""><img src="images/301.jpg" alt="我只认识你"></a>
<p><a href="">我只认识你</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/302.jpg" alt="生门[全集]"></a>
<p><a href="">生门[全集]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/303.jpg" alt="源味中国"></a>
<p><a href="">源味中国</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/305.jpg" alt="影星永驻利物浦"></a>
<p><a href="">影星永驻利物浦</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/305.jpg" alt="影星永驻利物浦"></a>
<p><a href="">影星永驻利物浦</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/307.jpg" alt="谜巢[720p]"></a>
<p><a href="">谜巢[720p]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/307.jpg" alt="谜巢[720p]"></a>
<p><a href="">谜巢[720p]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/309.jpg" alt="窥镜[1080p]"></a>
<p><a href="">窥镜[1080p]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/309.jpg" alt="窥镜[1080p]"></a>
<p><a href="">窥镜[1080p]</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/311.jpg" alt="第三度嫌疑人"></a>
<p><a href="">第三度嫌疑人</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/311.jpg" alt="第三度嫌疑人"></a>
<p><a href="">第三度嫌疑人</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/313.jpg" alt="今晚打丧尸"></a>
<p><a href="">今晚打丧尸</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/313.jpg" alt="今晚打丧尸"></a>
<p><a href="">今晚打丧尸</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/315.jpg" alt="请以你的名字呼唤"></a>
<p><a href="">请以你的名字呼唤</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/315.jpg" alt="请以你的名字呼唤"></a>
<p><a href="">请以你的名字呼唤</a></p>
<p>2018-04-01</p>
</li>
<li>
<a href=""><img src="images/316.jpg" alt="加勒比海盗五部曲"></a>
<p><a href="">加勒比海盗五部曲</a></p>
<p>2018-04-01</p>
</li>
</ul>
</div>
</div>
<!-- 右侧推荐 -->
<div class="mright">
<div class="mrbox">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title" >
<TR>
<TD align=left><a href="" class="tl">最新电影</a></TD>
<TD align=right><a href="" class="maon">更多...</a></TD>
</TR>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">环太平洋2：雷霆再起</a></td>
<td width="50%">.<a href="">校花与野出租</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">史前超人</a></td>
<td width="50%">.<a href="">时空偷渡少女</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">祖宗十九代</a></td>
<td width="50%">.<a href="">魅影缝匠</a></td>
</table></td></tr>
</table>
</div>
<div class="mrbox">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title" >
<TR>
<TD align=left><a href="" class="tl">BD高清</a></TD>
<TD align=right><a href="" class="maon">更多...</a></TD>
</TR>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">揭幕战</a></td>
<td width="50%">.<a href="">猎鸟</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">布里斯比熊</a></td>
<td width="50%">.<a href="">房客</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">玉米地的小孩:大逃亡</a></td>
<td width="50%">.<a href="">通勤营救[高清]</a></td>
</table></td></tr>
</table>
</div>
<div class="mrbox">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title" >
<TR>
<TD align=left><a href="" class="tl">国配电影</a></TD>
<TD align=right><a href="" class="maon">更多...</a></TD>
</TR>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">敦刻尔克[国语]</a></td>
<td width="50%">.<a href="">猩球崛起3[国语]</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">加勒比海盗5[国语]</a></td>
<td width="50%">.<a href="">守护者：世纪战元[国语]</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">神奇女侠[国语]</a></td>
<td width="50%">.<a href="">怒火保镖[国语]</a></td>
</table></td></tr>
</table>
</div>
<div class="mrbox">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title" >
<TR>
<TD align=left><a href="" class="tl">经典港片</a></TD>
<TD align=right><a href="" class="maon">更多...</a></TD>
</TR>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">跛豪</a></td>
<td width="50%">.<a href="">绝代双骄</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">破事儿</a></td>
<td width="50%">.<a href="">奇门遁甲</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">失业生</a></td>
<td width="50%">.<a href=""爆裂刑警></a></td>
</table></td></tr>
</tr>
</table>
</div>
<div class="mrbox">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title" >
<TR>
<TD align=left><a href="" class="tl">国剧</a></TD>
<TD align=right><a href="" class="maon">更多...</a></TD>
</TR>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">动物系恋人啊</a></td>
<td width="50%">.<a href="">翻生武林[全集]</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">果栏中的江湖大嫂</a></td>
<td width="50%">.<a href="">万能图书馆</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">南方有乔木</a></td>
<td width="50%">.<a href="">老男孩</a></td>
</table></td></tr>
</tr>
</table>
</div>
<div class="mrbox">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title" >
<TR>
<TD align=left><a href="" class="tl">日韩剧</a></TD>
<TD align=right><a href="" class="maon">更多...</a></TD>
</TR>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">我的大叔</a></td>
<td width="50%">.<a href="">[日剧]记忆</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">黑色五叶草[全集]</a></td>
<td width="50%">.<a href="">小松先生[全集]</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">电影少女～VIDEO GIRL</a></td>
<td width="50%">.<a href="">Live</a></td>
</table></td></tr>
</tr>
</table>
</div>
<div class="mrbox">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title" >
<TR>
<TD align=left><a href="" class="tl">美剧</a></TD>
<TD align=right><a href="" class="maon">更多...</a></TD>
</TR>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">职场老妈[第二季11]</a></td>
<td width="50%">.<a href="">飓风营救[第二季09]</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">新百战天龙[第二季18]</a></td>
<td width="50%">.<a href="">雷蒙斯尼奇的不幸历险</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">神盾局特工[第五季15]</a></td>
<td width="50%">.<a href="">住院医师[第一季09]</a></td>
</table></td></tr>
</tr>
</table>
</div>
<div class="mrbox">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title" >
<TR>
<TD align=left><a href="" class="tl">综艺</a></TD>
<TD align=right><a href="" class="maon">更多...</a></TD>
</TR>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">第90届奥斯卡颁奖典礼</a></td>
<td width="50%">.<a href="">2018央视春晚会</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">第60届格莱美颁奖典礼</a></td>
<td width="50%">.<a href="">汪峰2017岁月巡回演唱</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">维多利亚的秘密时尚内</a></td>
<td width="50%">.<a href="">第45届全美音乐大奖</a></td>
</table></td></tr>
</tr>
</table>
</div>
<div class="mrbox">
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="box">
<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title" >
<TR>
<TD align=left><a href="" class="tl">动漫</a></TD>
<TD align=right><a href="" class="maon">更多...</a></TD>
</TR>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">魔法总动员</a></td>
<td width="50%">.<a href="">大世界/好极了</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">玛丽与魔女之花</a></td>
<td width="50%">.<a href="">哥斯拉：怪兽行星</a></td>
</table></td></tr>
<tr><td><table width='100%' border='0' cellspacing='0' cellpadding='0' class="btxt">
<td width="50%">.<a href="">我的邻居山田君</a></td>
<td width="50%">.<a href="">乐高幻影忍者大电影</a></td>
</table></td></tr>
</table>
</div>
</div>
<!-- 公共底部 -->
<div class="footer">
<!-- 链接 -->
<div class="link">
<dl>
<p><strong>友情链接：</strong></p>
<li><a href="">6v电影下载网</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="">百度baidu</a></li>
<li><a href="">66影视</a></li>
<li><a href="">6v电影</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="">快播qvod电影</a></li>
<li><a href="">最新电视剧</a></li>
<li><a href="">第五季影院</a></li>
<li><a href="">第一影院</a></li>
<li><a href="">php中文网</a></li>
</dl>
</div>
<hr color="#dadada" size="4" width="1000px">
<!-- 声明 -->
<div class="bottom">
<p>©2015-2020 电影港 WWW.dygang.net .All Rights Reserved 苏ICP备09009508号 </p>
<p>本站免费电影的所有内容都由网友提供，本站仅为网友提供信息的交流平台，所有电影版权归原权利人,请下载后24小时内删除.</p>
<p>请勿将下载的免费电影用于商业用途，因此造成的任何责任与本站无关! </p>
<p><font color="#ff0000">本站拒绝一切非法，淫秽电影，发现请立即向管理员举报：</font><img src="images/email.jpg" alt="站长邮箱"><a href="http://www.cnzz.com/stat/website.php?web_id=1260802455">站长统计</a></p>
</div>
</div>
<script type="text/javascript">
var box = document.getElementsByClassName('mleft')[0]
var ul = box.getElementsByTagName('ul')[0]
var tab = ul.getElementsByTagName('li')
var list = box.getElementsByTagName('div')
for (var i=0; i<tab.length; i++) {
tab[i].index = i
tab[i].onmouseover = function (){
for (var i=0; i<tab.length; i++) {
tab[i].className = ''
list[i].style.display = 'none'
}
this.className = 'active'
list[this.index].style.display = 'block'
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
JS选项卡特效之仿66影视初始样式reset.CSS：
/*样式初始设置 */
html {
overflow-y: auto;
overflow-x: hidden;
}
body,h1,h2,h3,h4,h5,ul,li,p {
margin: 0;
padding: 0;
font-family: 'microsoft yehei', verdana ,Arial; /*默认字体*/
color: #505050;
}
p,li,a {
font-size: 12px;
}
ul, li {
list-style-type: none; /*去默认样式*/
}
a:link, a:visited, a:active {
color: #505050; /*去文本下划线*/
}
a:hover {
text-decoration: none;
color: #f00;
}点击 "运行实例" 按钮查看在线实例
JS选项卡特效之仿66影视公共样式common.CSS：
/*公共顶部*/
.header {
width: 100%;
height: 290px;
}
.header .top {
height: 30px;
margin: auto;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
background-color: #fbfbfb;
}
.info {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.top {
height: 30px;
line-height: 30px;
display: block;
}
.info .left {
float: left;
}
.info .right {
float: right;
}
.top a {
color: #33c;
}
.logo {
width: 1000px;
height: 94px;
margin: auto;
}
.logo img {
width: 200px;
height: 90px;
}
/*导航菜单*/
.menu {
width: 1000px;
height: 30px;
margin: auto;
background-color: #0068b2;
}
.menu dl {
padding-left: 50px;
text-align: center;
}
.menu dl li {
float: left;
line-height: 30px;
}
.menu dl li a {
color: #fff;
font-size: 1.1em;
text-decoration: none;
}
.gg img {
width: 1000px;
height:70px;
}
.suso{
margin: auto;
width: 1000px;
height: 36px;
border: 1px solid #c0c0c0;
line-height: 36px;
}
.suso a {
color: #0058b0;
}
/*公共底部*/
.footer {
width: 1000px;
margin: auto;
padding-top: 20px;
overflow: hidden;
}
.footer p {
font-size: 0.8em;
}
.footer .link {
width: 1000px;
height: 70px;
margin:auto;
}
.link dl li {
float: left;
}
.link dl li a {
height: 100%;
padding:0 20px;
color: #0062c4;
text-align: center;
line-height: 25px;
}
.bottom {
width: 100%;
height: 80px;
text-align: center;
}
.bottom p {
line-height: 18px;
}
.bottom p a {
color: #000;
}点击 "运行实例" 按钮查看在线实例
JS选项卡特效之仿66影视首页专用样式index.CSS：
.main {
width: 1000px;
/*margin: auto;*/
background-color: #696969;
}
.mleft {
width: 598px;
height: 880px;
float: left;
margin-left: 258px;
border:1px solid #ADDFF7;
}
.mleft > ul {
margin: 0;
padding: 0;
background-color: #f8f8f8;
overflow: hidden;
}
.mleft >ul li {
list-style-type: none;
width: 150px;
height:26px;
float: left;
text-align: center;
line-height: 26px;
border-right: 1px solid #ADDFF7;
border-bottom: 1px solid #ADDFF7;
}
.mleft ul + span {
float:right;
width:90px;
height: 26px;
line-height: 26px;
margin-top: -28px;
}
.mleft ul + span >a {
color: #696969;
text-decoration: none;
}
.mleft li.active {
background-color: #fff;
font-weight: bolder;
border-bottom: none;
border-top: 3px solid orangered;
}
.mleft div {
display: none;
}
.mleft div ul {
margin: 0;
padding: 10px;
list-style-type: none;
}
.mleft div ul li {
float: left;
text-align: center;
padding:6px;
}
.mleft div ul li a {
color: red;
}
.mleft div ul li p {
padding-top: 2px;
}
.mleft div ul li img {
width: 120px;
height: 150px;
border:1px solid #c0c0c0;
padding: 5px;
}
.mright {
width: 396px;
height: 880px;
float: left;
margin-left: 5px;
}
.mrbox {
padding-bottom: 11px;
}
.mright .box {
width: 396px;
height: 88px;
border:1px solid #ADDFF7;
}
.title {
background-color: #f0f8ff;
border-bottom:1px solid #ADDFF7;
}
.tl {
padding-left: 10px;
font-weight:bold;
}
.maon {
padding-right:10px;
}
.maon {
text-decoration: none;
}
.btxt td {
padding-left: 10px;
}
.btxt a {
padding-left: 10px;
}点击 "运行实例" 按钮查看在线实例
总结：仿这个网站 也花了一天时间 JS部分马马虎虎过的 还是以HTML为复习点
重点复习了一下 用列表写右边栏 还有边框单方向使用
开始用DIV UL LI 写完了 但是排版实在排不整齐
最后看看原站源代码 根着用列表写出来了
最后发现 HTML 真的很好玩 一个效果能用多种方式写出来 直到做到最满意为止，
