本套大作业共计8个HTML页面，网页中包含：DIV+CSS、下拉菜单栏、banner轮播图、图片放大效果、鼠标滑过效果、视频、小图标及按钮设计、登录注册页等，同时设计了logo；本作品花费大量时间去整理素材，大部分素材均使用PhotoShop裁切或调色，各个子页面的图文混排版式也各不相同，期末作业所需的知识点全覆盖，美观度、充实度极高。
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>电影资讯网</title>
<link href="css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="css/banner.css">
<script type="text/javascript" src="js/banner.js"></script>
<style>
.banquan {
height: 36px;
width: 1000px;
margin-right: auto;
margin-left: auto;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #f2f2f2;
background-image: url(http://cdn.psdhtml.cn/wx_images/wx_lxidw7.svg);
background-color: #FFF;
}
</style>
</head>
<body>
<div class="banquan"><a href="http://www.psdhtml.cn/index.php?c=thread&fid=18?wx01sy" target="_blank"><img src="http://cdn.psdhtml.cn/wx_images/wx_lxidw7.svg" width="1000" height="36"></a></div>
<!-- 此源码由 http://www.psdhtml.cn/ 大设计师论坛独家编写，禁止转售 -->
<div id="header">
<div id="login"><a href="html/register.html">注册本站</a></div>
<div id="logo"><a href="index.html"><img src="images/LOGO.png" width="264" height="71"></a></div>
</div>
<!-- 横向导航开始 -->
<div id="bar" class="clear">
<ul>
<li><a href="index.html" class="white">网站主页</a></li>
<li><a href="html/list.html" class="white">高分电影</a></li>
<li><a href="html/recommend1.html" class="white">知名导演</a></li>
<li><a href="html/recommend2.html" class="white">华语电影</a></li>
<li><a href="html/news.html" class="white">电影资讯</a></li>
<li><a href="#" class="white">更多相关 <img src="images/down.svg" width="10" height="10"></a>
<ul>
<li><a href="html/video.html" class="white">在线视频</a></li>
<li><a href="html/login.html" class="white">登录本站</a></li>
</ul></li>
</ul>
</div>
<!-- 横向导航END -->
<!-- banner代码开始 -->
<div class="banner">
<div class="banner_pic" id="banner_pic">
<div class="current"><img src="images/01.jpg" alt="tp" /></div>
<div class="pic"><img src="images/02.jpg" alt="tp" /></div>
<div class="pic"><img src="images/03.jpg" alt="tp" /></div>
<div class="pic"><img src="images/04.jpg" alt="tp" /></div>
</div>
<ol id="button">
<li class="current"></li>
<li class="but"></li>
<li class="but"></li>
<li class="but"></li>
</ol>
</div>
<!-- banner代码END -->
<div class="s-banner">
<div class="s-banner-text">搜索你想要的...</div>
<div class="search">
<div class="search-input"><input name="textfield" type="text" id="textfield" size="67"></div>
<div class="search-button"><input type="submit" name="button33" id="button33" value="搜索"></div>
</div>
</div>
<div class="tubiao-box">
<div id="situbiao">
<div id="tubiao01">
<div id="tubiaoup"><a href="#"><img src="images/tubiao01.png" alt=" " width="85" height="85" border="0" /></a></div>
<div id="tubiaodown"><a href="#">影迷交流</a></div>
</div>
<div id="tubiao01">
<div id="tubiaoup"><a href="#"><img src="images/tubiao02.png" alt=" " width="85" height="85" border="0" /></a></div>
<div id="tubiaodown"><a href="#">我的收藏</a></div>
</div>
<div id="tubiao01">
<div id="tubiaoup"><a href="#"><img src="images/tubiao03.png" alt=" " width="85" height="85" border="0" /></a></div>
<div id="tubiaodown"><a href="#">巨制大片</a></div>
</div>
<div id="tubiao01">
<div id="tubiaoup"><a href="#"><img src="images/tubiao04.png" alt=" " width="85" height="85" border="0" /></a></div>
<div id="tubiaodown"><a href="#">获奖作品</a></div>
</div>
<div id="tubiao01">
<div id="tubiaoup"><a href="#"><img src="images/tubiao05.png" alt=" " width="85" height="85" border="0" /></a></div>
<div id="tubiaodown"><a href="#">影视原声</a></div>
</div>
</div>
</div>
<div class="home">
<div class="home-text"> 电影资讯网分享最新电影新闻、电影预告片、电影幕后制作特辑,展播最新精彩微电影,长期举办影片首映、全国高校影展、青年电影投资扶持项目。我们的新闻频道拥有最新最全面的内地、港台、欧美、日韩明星八卦、电影资讯、娱乐视频等海量娱乐新闻资讯娱乐事件,还拥有独家策划的视频、图片、写真等娱乐专题。免费VIP影视观看网站,专业全网收集分享全球最新电影资讯,体验最近热播的喜剧片、惊悚片、奇幻片、巨制片、全集免费、最新高清日剧、字幕等资源分享...电影的魅力在于它能够通过图像、音乐、对白等多种元素，将观众带入一个全新的世界，让我们感受到不同于现实生活的情感和体验。电影不仅令观众感到震撼，也能够更好地表达...</div>
<div class="home-vidoe"><video id="video" src="media/video.mp4" width="500" autoplay muted="muted"></video></div>
</div>
<div id="tuijian-new">
<div id="tuijian-new01">
<div id="tuijian-newtu"><img src="images/suggest1.jpg" width="587" height="210"></div>
<div id="tuijian-newwenzi">
<p><span class="bbiaoti">肖申克的救赎</span>-当年的奥斯卡颁奖礼上，被如日中天的《阿甘正传》掩盖了...</p>
<p class="a-wenzi">了解更多</p>
</div>
</div>
<div id="tuijian-new01">
<div id="tuijian-newtu"><img src="images/suggest2.jpg" alt="" width="587" height="210"></div>
<div id="tuijian-newwenzi">
<p><span class="bbiaoti">泰坦尼克号</span>-号称 "世界工业史上的奇迹"的豪华客轮泰坦尼克号开始了自己...</p>
<p class="a-wenzi">了解更多</p>
</div>
</div>
</div>
<div id="tuijian">
<div id="tuijian01">
<div id="tuijiantu"><img src="images/tuijian01.jpg" width="281" height="210"></div>
<div id="tuijianwenzi">
<p>这个杀手不太冷</p>
<p class="a-wenzi">了解更多</p>
</div>
</div>
<div id="tuijian01">
<div id="tuijiantu"><img src="images/tuijian02.jpg" width="281" height="210"></div>
<div id="tuijianwenzi">
<p>美丽人生</p>
<p class="a-wenzi">了解更多</p>
</div>
</div>
<div id="tuijian01">
<div id="tuijiantu"><img src="images/tuijian03.jpg" width="281" height="210"></div>
<div id="tuijianwenzi">
<p>盗梦空间</p>
<p class="a-wenzi">了解更多</p>
</div>
</div>
<div id="tuijian01">
<div id="tuijiantu"><img src="images/tuijian04.jpg" width="281" height="210"></div>
<div id="tuijianwenzi">
<p>海上钢琴师</p>
<p class="a-wenzi">了解更多</p>
</div>
</div>
</div>
<div id="footer">
<img src="images/LOGO-down.png" alt="" width="118" height="32">
<h4><a href="#top" class="white">返回顶部</a> Copyright 电影资讯网</h4>
</div>
</body>
</html>