网页内容介绍
仿照1905电影网站写的网页，包含1个首页，1个注册页面，1个登录页面，1个模拟播放页面，1个分类页面，6个类别详情页面，
技术介绍
HTML5 + CSS + JavaScript
可做为大作业，实训等。
特点
轮播图（CSS实现），导航栏，鼠标悬浮，Form表单，多页面，多图片，纯原生代码，无第三方框架。
效果图展示
首页
类别推荐页
类别页
类别详情页
模拟播放页面
代码展示
<!-- 首页代码 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/movie.css" />
</head>
<!-- 完整代码请联系作者 -->
<body>
<div id="top">
<h2>院线影视电影网
<a href="login.html">登陆</a> <a href="register.html">注册</a>
<input type="search" name="" id="serch" placeholder=" 搜索影片" />
</h2>
</div>
<!-- 导航 -->
<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li>
<a href="dp.html">大片</a>
<ul class="dh">
<li><a href="play.html">百鸟朝凤</a></li>
<li><a href="play.html">开罗宣言</a></li>
<li><a href="play.html">澳门风云3</a></li>
<li><a href="play.html">分手再说我爱你</a></li>
<li><a href="sylb.html">查看更多>></a></li>
</ul>
</li>
<li>
<a href="gp.html">港片</a>
<ul class="dh">
<li><a href="play.html">杀破狼2</a></li>
<li><a href="play.html">澳门风云2</a></li>
<li><a href="play.html">冲上云霄</a></li>
<li><a href="sylb.html">查看更多>></a></li>
</ul>
</li>
<li>
<a href="om.html">欧美</a>
<ul class="dh">
<li><a href="play.html">囚室211</a></li>
<li><a href="play.html">太空救援</a></li>
<li><a href="play.html">《007：幽灵党》</a></li>
<li><a href="sylb.html">查看更多>></a></li>
</ul>
</li>
<li>
<a href="dj.html">独家</a>
<ul class="dh">
<li><a href="play.html">狼来了</a></li>
<li><a href="play.html">特警狙击手</a></li>
<li><a href="play.html">拆弹英雄</a></li>
<li><a href="sylb.html">查看更多>></a></li>
</ul>
</li>
<li>
<a href="nd.html">内地</a>
<ul class="dh">
<li><a href="play.html">勇士</a></li>
<li><a href="play.html">开罗宣言</a></li>
<li><a href="play.html">剑河</a></li>
<li><a href="sylb.html">查看更多>></a></li>
</ul>
</li>
<li>
<a href="ssqp.html">收视强片</a>
<ul class="dh">
<li><a href="play.html">绣春刀</a></li>
<li><a href="play.html">血滴子</a></li>
<li><a href="play.html">露水红颜</a></li>
<li><a href="play.html">冰封：重生之门</a></li>
<li><a href="sylb.html">查看更多>></a></li>
</ul>
</li>
</ul>
</div>
<!-- 导航end -->
<!-- ------------------------- -->
<!-- 轮播图 -->
<div class="pic-focus">
<!-- 图片内容区 -->
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
<!-- 底部进度提示 -->
<div class="page">
<em></em>
<em></em>
<em></em>
<em></em>
<em></em>
<em></em>
</div>
</div>
<!-- 轮播图end -->
<!-- ------------------------- -->
<!-- 主体 -->
<div id="cen">
<div class="fenlei">
<h4>按热播排行</h4>
<ul>
<li><a href="sylb.html">本周最火</a></li>
<li><a href="sylb.html">历史最火</a></li>
<li><a href="sylb.html">最新上映</a></li>
<li><a href="sylb.html">评分最高</a></li>
<li><a href="sylb.html">最新上映</a></li>
<li><a href="sylb.html">评分最高</a></li>
</ul>
</div>
<div class="fenlei">
<h4>按热播排行</h4>
<ul>
<li><a href="sylb.html">本周最火</a></li>
<li><a href="sylb.html">历史最火</a></li>
<li><a href="sylb.html">最新上映</a></li>
<li><a href="sylb.html">评分最高</a></li>
<li><a href="sylb.html">最新上映</a></li>
<li><a href="sylb.html">评分最高</a></li>
</ul>
</div>
<div class="fenlei">
<h4>按热播排行</h4>
<ul>
<li><a href="sylb.html">本周最火</a></li>
<li><a href="sylb.html">历史最火</a></li>
<li><a href="sylb.html">最新上映</a></li>
<li><a href="sylb.html">评分最高</a></li>
<li><a href="sylb.html">最新上映</a></li>
<li><a href="sylb.html">评分最高</a></li>
</ul>
</div>
</div>
<hr style="width: 55%;margin: 20px auto;">
<div class="content">
<a href="dp.html">
<h2>最新大片</h2>
</a>
<div class="jieshao">
<a href="dp.html">
<img src="img/zx1.jpg">
<h3>热土
<span id="score">
8.0
</span>
</h3>
<p>改革春风吹入乡土</p>
</a>
</div>
<div class="jieshao">
<a href="dp.html">
<img src="img/zx2.jpg">
<h3>爱无痕
<span id="score">
6.7
</span>
</h3>
<p>普通民警英雄凯歌</p>
</a>
</div>
<div class="jieshao">
<a href="dp.html">
<img src="img/zx3.jpg">
<h3>好小子，好功夫
<span id="score">
6.4
</span>
</h3>
<p>庆澳门回归20周年</p>
</a>
</div>
<div class="jieshao">
<a href="dp.html">
<img src="img/zx4.jpg">
<h3>陵水谣
<span id="score">
6.6
</span>
</h3>
<p>庆中俄建交70周年</p>
</a>
</div>
<div class="jieshao">
<a href="dp.html">
<img src="img/zx5.jpg">
<h3>北斗风云
<span id="score">
6.7
</span>
</h3>
<p>潘虹领衔献礼大片</p>
</a>
</div>
<div class="jieshao">
<a href="dp.html">
<img src="img/zx6.jpg">
<h3>卧虎藏龙
<span id="score">
6.3
</span>
</h3>
<p>奥斯卡最佳外语片</p>
</a>
</div>
</div>
<hr style="width: 55%;margin: 0 auto;">
<div class="content">
<div class="leibie">
<h2>VIP影院</h2>
<div class="jieshao">
<img src="img/vip1.jpg">
<h3>一出好戏
<span id="score">
8.3
</span>
</h3>
<p>黄渤艺兴荒岛求生</p>
</div>
<div class="jieshao">
<img src="img/vip2.jpg">
<h3>来电狂响
<span id="score">
8.3
</span>
</h3>
<p>话题喜剧爆笑贺岁</p>
</div>
<div class="jieshao">
<img src="img/vip3.jpg">
<h3>我不是药神
<span id="score">
8.3
</span>
</h3>
<p>警世良片神级演技</p>
</div>
<div class="jieshao">
<img src="img/vip4.jpg">
<h3>中国蓝盔
<span id="score">
8.3
</span>
</h3>
<p>中国担当守卫和平</p>
</div>
</div>
<div class="hot sp">
<h2>点播排行</h2>
<ul>
<li><span id="one">1</span> 天极</li>
<li><span id="two">2</span> 叶问</li>
<li><span id="three">3</span> 勇者游戏</li>
<li><span>4</span> 南京1937</li>
<li><span>5</span> 杀生</li>
</ul>
<ul>
<li><span>6</span> 少林寺</li>
<li><span>7</span> 神话</li>
<li><span>8</span> 举起手来</li>
<li><span>9</span> 新龙门客栈</li>
<li><span>10</span> 极盗车神</li>
</ul>
<img src="img/vip5.jpg">
</div>
</div>
<hr style="width: 55%;margin: 0 auto;">
<div class="content">
<div class="leibie">
<h2>港台片场</h2>
<div class="jieshao">
<img src="img/gt1.jpg">
<h3>拆弹专家
<span id="score">
8.3
</span>
</h3>
<p>刘德华宋佳组CP</p>
</div>
<div class="jieshao">
<img src="img/gt2.jpg">
<h3>侠盗联盟
<span id="score">
8.3
</span>
</h3>
<p>刘德华对决让雷诺</p>
</div>
<div class="jieshao">
<img src="img/gt3.jpg">
<h3>保持通话
<span id="score">
8.3
</span>
</h3>
<p>大S惨被悍匪绑架</p>
</div>
<div class="jieshao">
<img src="img/gt4.jpg">
<h3>龙在少林
<span id="score">
8.3
</span>
</h3>
<p>释小龙搭档郝邵文</p>
</div>
</div>
<div class="hot sp">
<h2>港台排行</h2>
<ul>
<li><span id="one">1</span> 天极</li>
<li><span id="two">2</span> 叶问</li>
<li><span id="three">3</span> 勇者游戏</li>
<li><span>4</span> 南京1937</li>
<li><span>5</span> 杀生</li>
</ul>
<ul>
<li><span>6</span> 少林寺</li>
<li><span>7</span> 神话</li>
<li><span>8</span> 举起手来</li>
<li><span>9</span> 新龙门客栈</li>
<li><span>10</span> 极盗车神</li>
</ul>
<img src="img/gt5.jpg">
</div>
</div>
<div class="content">
<div class="jieshao">
<img src="img/zx1.jpg">
<h3>热土
<span id="score">
8.0
</span>
</h3>
<p>改革春风吹入乡土</p>
</div>
<div class="jieshao">
<img src="img/zx2.jpg">
<h3>爱无痕
<span id="score">
6.7
</span>
</h3>
<p>普通民警英雄凯歌</p>
</div>
<div class="jieshao">
<img src="img/zx3.jpg">
<h3>好小子，好功夫
<span id="score">
6.4
</span>
</h3>
<p>庆澳门回归20周年</p>
</div>
<div class="jieshao">
<img src="img/zx4.jpg">
<h3>陵水谣
<span id="score">
6.6
</span>
</h3>
<p>庆中俄建交70周年</p>
</div>
<div class="jieshao">
<img src="img/zx5.jpg">
<h3>北斗风云
<span id="score">
6.7
</span>
</h3>
<p>潘虹领衔献礼大片</p>
</div>
<div class="jieshao">
<img src="img/zx6.jpg">
<h3>卧虎藏龙
<span id="score">
6.3
</span>
</h3>
<p>奥斯卡最佳外语片</p>
</div>
</div>
<hr style="width: 55%;margin: 0 auto;">
<div class="content">
<div class="leibie">
<h2>内地片场</h2>
<div class="jieshao">
<img src="img/nd1.jpg">
<h3>拆弹专家
<span id="score">
8.3
</span>
</h3>
<p>刘德华宋佳组CP</p>
</div>
<div class="jieshao">
<img src="img/nd2.jpg">
<h3>侠盗联盟
<span id="score">
8.3
</span>
</h3>
<p>刘德华对决让雷诺</p>
</div>
<div class="jieshao">
<img src="img/nd3.jpg">
<h3>保持通话
<span id="score">
8.3
</span>
</h3>
<p>大S惨被悍匪绑架</p>
</div>
<div class="jieshao">
<img src="img/nd4.jpg">
<h3>龙在少林
<span id="score">
8.3
</span>
</h3>
<p>释小龙搭档郝邵文</p>
</div>
</div>
<div class="hot sp">
<h2>内地排行</h2>
<ul>
<li><span id="one">1</span> 天极</li>
<li><span id="two">2</span> 叶问</li>
<li><span id="three">3</span> 勇者游戏</li>
<li><span>4</span> 南京1937</li>
<li><span>5</span> 杀生</li>
</ul>
<ul>
<li><span>6</span> 少林寺</li>
<li><span>7</span> 神话</li>
<li><span>8</span> 举起手来</li>
<li><span>9</span> 新龙门客栈</li>
<li><span>10</span> 极盗车神</li>
</ul>
<img src="img/nd5.jpg">
</div>
</div>
<!-- 主体end -->
<!-- ------------------------- -->
<!-- 底部 -->
<footer>
<div id="footer">
<div id="">
<ul>
<li>帮助中心</li>
<li>热点问题</li>
<li>使用教程</li>
<li>咨询热线</li>
</ul>
</div>
<hr style="width: 55%;margin: 0 auto;">
<ul>
<li>关于我们</li>
<li>供应商平台</li>
<li>版本更新</li>
<li>热点新闻</li>
<li>联系我们</li>
</ul>
<p>
design by：<br> Alex 联系作者请私信或email：437867002@qq.com
<br> Copyright ©Alex Inc.All Rights Reserved.
</p>
</div>
</footer>
<!-- 底部end -->
</body>
<!-- 完整代码请联系作者 -->
</html>
联系作者
私信作者或者如下方式
E-mail：437867002@qq.com
V：634836927
3335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
