【HTML】HTML网页设计---模仿电影网站

coding加油站

已于 2023-02-20 20:24:04 修改

阅读量2.4k

点赞数 3

分类专栏： web前端作业 Html+Css+JavaScript期末大作业文章标签： html 前端 javascript

于 2022-08-15 20:34:45 首次发布

本文链接：https://blog.csdn.net/pandas23/article/details/126354221

版权

web前端作业同时被 2 个专栏收录

58 篇文章 63 订阅

订阅专栏

Html+Css+JavaScript期末大作业

31 篇文章 21 订阅

订阅专栏

1、引言

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

模仿电影网站系统采用html，css技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

电影网站采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

3、作品演示

3.1、首页

相关代码：

	<div id="top">
		<div class="top_main">
			<div class="top_main_left">
				<p>欢迎来到迅影网，一起分享电影给我们带来的快乐。</p>
			</div>
			<div class="top_main_right">
				<a class="top_main_right_1" href="">保存到桌面</a>
				<a class="top_main_right_2" href="">Ctrl+D 加入收藏夹</a>
			</div>
		</div>
	</div>
	<header>
		<div class="logo">
			<h1><a href="#"><img src="./images/logo.png" alt="这里改网站名字"></a></h1>
		</div>
		<div class="search">
			<form action="" method="post">
				<input type="search" name="search" placeholder="请输入电影名字">
				<input type="submit" name="anniu" value="搜索">
			</form>
			<div class="tj">
				<a href="#">星际迷航3</a>
				<a href="#">谍影重重5</a>
				<a href="#">使徒行者</a>
				<a href="#">盗墓笔记</a>
				<a href="#">喊·山</a>
			</div>
		</div>
	</header>
	<nav>
		<div class="nav">
			<div class="nav_item">
				<a href="#">
					<p>首页</p>
					<p>Home</p>
				</a>
			</div>
			<div class="nav_item">
				<a href="#">
					<p>电影</p>
					<p>Movie</p>
				</a>
			</div>
			<div class="nav_item">
				<a href="#">
					<p>电视剧</p>
					<p>Teleplay</p>
				</a>
			</div>
			<div class="nav_item">
				<a href="#">
					<p>动漫</p>
					<p>Cartoon</p>
				</a>
			</div>
			<div class="nav_item">
				<a href="#">
					<p>交流圈</p>
					<p>BBS</p>
				</a>
			</div>
			<li><a href="#">注册</a></li>
			<li><a href="#">登录</a></li>
		</div>
	</nav>

3.2、movie页

效果图：

相关代码：

<div class="tag-box">
				<table class="table" style="margin-bottom:10px;">
					<tbody>
						<tr>
							<td class="tag-span2">年份：</td>
							<td class="tags">
								" href="/movie/?year=2011" data-value="2011">2011</a>
								<a class="tag" href="/movie/?year=2010" data-value="2010">2010</a>
								<a class="tag" href="/movie/?year=2009" data-value="2009">2009</a>
								<a class="tag" href="/movie/?year=2008" data-value="2008">2008</a>
								<a class="tag" href="/movie/?year=2007" data-value="2007">2007</a>
								<a class="tag" href="/movie/?year=2006" data-value="2006">2006</a>
								<a class="tag" href="/movie/?year=2005" data-value="2005">2005</a>
								<a class="tag" href="/movie/?year=ten_years_ago" data-value="十年前">十年前</a>
							</td>
						</tr>
						<tr>
							<td class="tag-span2">评分排序：</td>
							<td class="tags">
								<a class="tag active" href="/movie/" data-value="全部">全部</a>
								<a class="tag" href="/movie/?rating=10" data-value="9 ~ 10分">9 ~ 10分</a>
								<a class="tag" href="/movie/?rating=9" data-value="8 ~ 9分">8 ~ 9分</a>
								<a class="tag" href="/movie/?rating=8" data-value="7 ~ 8分">7 ~ 8分</a>
								<a class="tag" href="/movie/?rating=7" data-value="6 ~ 7分">6 ~ 7分</a>
								<a class="tag" href="/movie/?rating=6" data-value="5 ~ 6分">5 ~ 6分</a>
							</td>
						</tr>
						<tr>
							<td class="tag-span2">国家地区：</td>
							<td class="tags">
								<a class="tag active" href="/movie/" data-value="全部">全部</a>
								<a class="tag" href="/movie/?country=中国" data-value="中国">中国</a>
								<a class="tag" href="/movie/?country=美国" data-value="美国">美国</a>
								<a class="tag" href="/movie/?country=日本" data-value="日本">日本</a>
								<a class="tag" href="/movie/?country=韩国" data-value="韩国">韩国</a>
								<a class="tag" href="/movie/?country=印度" data-value="印度">印度</a>
								<a class="tag" href="/movie/?country=法国" data-value="法国">法国</a>
								<a class="tag" href="/movie/?country=泰国" data-value="泰国">泰国</a>
								<a class="tag" href="/movie/?country=英国" data-value="英国">英国</a>
								<a class="tag" href="/movie/?country=俄罗斯" data-value="俄罗斯">俄罗斯</a>
								<a class="tag" href="/movie/?country=加拿大" data-value="加拿大">加拿大</a>
								<a class="tag" href="/movie/?country=意大利" data-value="意大利">意大利</a>
							</td>
						</tr>
						<tr style="border-bottom:1px solid #DDD;">
							<td class="tag-span2">影视类型：</td>
							<td class="tags">
								<a class="tag active" href="/movie/" data-value="全部">全部</a>
								<a class="tag" href="/movie/?tag=传记" data-value="传记">传记</a>
								<a class="tag" href="/movie/?tag=喜剧" data-value="喜剧">喜剧</a>
								<a class="tag" href="/movie/?tag=剧情" data-value="剧情">剧情</a>
								<a class="tag" href="/movie/?tag=枪战" data-value="枪战">枪战</a>
								<a class="tag" href="/movie/?tag=恐怖" data-value="恐怖">恐怖</a>
								<a class="tag" href="/movie/?tag=励志" data-value="励志">励志</a>
								<a class="tag" href="/movie/?tag=动画" data-value="动画">动画</a>
								<a class="tag" href="/movie/?tag=歌舞" data-value="歌舞">歌舞</a>
								<a class="tag" href="/movie/?tag=罪案" data-value="罪案">罪案</a>
								<a class="tag" href="/movie/?tag=偶像" data-value="偶像">偶像</a>
								<a class="tag" href="/movie/?tag=悬疑" data-value="悬疑">悬疑</a>
								<a class="tag" href="/movie/?tag=爱情" data-value="爱情">爱情</a>
								<a class="tag" href="/movie/?tag=惊悚" data-value="惊悚">惊悚</a>
								<a class="tag" href="/movie/?tag=综艺" data-value="综艺">综艺</a>
								<a class="tag" href="/movie/?tag=纪录" data-value="纪录">纪录</a>
								<a class="tag" href="/movie/?tag=青春" data-value="青春">青春</a>
								<a class="tag" href="/movie/?tag=科幻" data-value="科幻">科幻</a>
								<a class="tag" href="/movie/?tag=冒险" data-value="冒险">冒险</a>
								<a class="tag" href="/movie/?tag=魔幻" data-value="魔幻">魔幻</a>
								<a class="tag" href="/movie/?tag=丧尸" data-value="丧尸">丧尸</a>
								<a class="tag" href="/movie/?tag=动作" data-value="动作">动作</a>
								<a class="tag" href="/movie/?tag=幻想" data-value="幻想">幻想</a>
								<a class="tag" href="/movie/?tag=战争" data-value="战争">战争</a>
								<a class="tag" href="/movie/?tag=情色" data-value="情色">情色</a>
								<a class="tag" href="/movie/?tag=血腥" data-value="血腥">血腥</a>
								<a class="tag" href="/movie/?tag=西部" data-value="西部">西部</a>
								<a class="tag" href="/movie/?tag=童话" data-value="童话">童话</a>
								<a class="tag" href="/movie/?tag=暴力" data-value="暴力">暴力</a>
								<a class="tag" href="/movie/?tag=古装" data-value="古装">古装</a>
								<a class="tag" href="/movie/?tag=灾难" data-value="灾难">灾难</a>
								<a class="tag" href="/movie/?tag=谍战" data-value="谍战">谍战</a>
								<a class="tag" href="/movie/?tag=生活" data-value="生活">生活</a>
								<a class="tag" href="/movie/?tag=讽刺" data-value="讽刺">讽刺</a>
								<a class="tag" href="/movie/?tag=其他" data-value="其他">其他</a>
								<a class="tag" href="/movie/?tag=同性" data-value="同性">同性</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>

3.3、详情页

相关代码：

<h1>
						28岁未成年
						<span class="year">(2016)</span>
					</h1>
					<div class="row">
						<div class="col-xs-4 padding-right-0">
							<a class="movie-post" href="http://www.saaee.com/movie/201186.html" style="display:block;position:relative;">
								<img class="img-thumbnail" alt="28岁未成年" src="http://ww2.sinaimg.cn/mw690/006xTuHMgw1fbdk0yamdrj30bw0gogpv.jpg" width="100%">
								<span class="qtag hdtag">高清</span>
							</a>
							<em>最后更新：2017-01-03</em>
							<div style="height:28px;">
								<div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1484045781392">
								<a class="bds_more" href="#" data-cmd="more"></a>
								<a class="bds_qzone" title="分享到QQ空间" href="#" data-cmd="qzone"></a>
								<a class="bds_tsina" title="分享到新浪微博" href="#" data-cmd="tsina"></a>
								<a class="bds_tqq" title="分享到腾讯微博" href="#" data-cmd="tqq"></a>
								<a class="bds_renren" title="分享到人人网" href="#" data-cmd="renren"></a>
								<a class="bds_weixin" title="分享到微信" href="#" data-cmd="weixin"></a>
								</div>
								<script>
								window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
								</script>
							</div>
						</div>
						<div class="col-xs-8">
							<table class="table table-striped table-condensed table-bordered" style="margin-bottom:10px;font-size:12px;">
								<tbody>
									<tr>
										<td class="span2">
										<span class="info-label">导演</span>
										</td>
										<td>
										<a target="_blank" href="">张末</a>
										</td>
									</tr>
									<tr>
										<td class="span2">
										<span class="info-label">编剧</span>
										</td>
										<td>
										<a target="_blank" href="">张末</a>
										/
										<a target="_blank" href="">张弘毅</a>
										/
										<a target="_blank" href="">张影</a>
										/
										<a target="_blank" href="">翟嘟</a>
										/
										<a target="_blank" href="">田金</a>
										</td>
									</tr>
									<tr>
										<td class="span2">
										<span class="info-label">主演</span>
										</td>
										<td>
										<a target="_blank" href="">张末</a>
										/
										<a target="_blank" href="">张弘毅</a>
										/
										<a target="_blank" href="">张影</a>
										/
										<a target="_blank" href="">翟嘟</a>
										/
										<a target="_blank" href="">田金</a>
										</td>
									</tr>
									<tr>
										<td class="span2">
										<span class="info-label">类型</span>
										</td>
										<td>
										<a target="_blank" href="">喜剧</a>
										/
										<a target="_blank" href="">爱情</a>
										/
										<a target="_blank" href="">奇幻</a>
										</td>
									</tr>
									<tr>
										<td class="span2">
										<span class="info-label">地区</span>
										</td>
										<td>
										<a target="_blank" href="">中国大陆</a>
										</td>
									</tr>
									<tr>
										<td class="span2">
										<span class="info-label">语言</span>
										</td>
										<td>汉语普通话</td>
									</tr>
									<tr>
										<td class="span2">
										<span class="info-label">上映时间</span>
										</td>
										<td>2016-12-09(中国大陆)</td>
									</tr>
									<tr>
										<td class="span2">
										<span class="info-label">片长</span>
										</td>
										<td>109分钟</td>
									</tr>
									<tr>
										<td class="span2">
										<span class="info-label">又名</span>
										</td>
										<td>二十八岁未成年 / Suddenly Seventeen</td>
									</tr>
									<tr>
										<td class="span2">
										<span class="info-label">评分</span>
										</td>
										<td>
										<a class="score" rel="nofollow" target="_blank" href="">豆瓣 6.0</a>
										/
										<a class="imdb" rel="nofollow" target="_blank" href="">IMDB 6.9</a>
										</td>
									</tr>
								</tbody>
							</table>
							<div class="btn-group " role="group" aria-label="" style="margin-top:5px;">
								<a id="down-btn" class="btn btn-default btn-sm" href="#down" role="button">
								<span class="glyphicon glyphicon-download-alt"></span>
								下载
								</a>
								<a id="plan_btn" class="btn btn-default btn-sm" href="javascript:;" onclick="plan(this,201186)" role="button">
								<span class="glyphicon glyphicon-time"></span>
								想看
								</a>
								<a id="watched_btn" class="btn btn-default btn-sm" href="javascript:;" onclick="watched(this,201186)" role="button">
								<span class="glyphicon glyphicon-check"></span>
								看过
								</a>
								<a id="like_btn" class="btn btn-default btn-sm" href="javascript:;" onclick="like(this,201186)" role="button">
								<span class="glyphicon glyphicon-heart"></span>
								喜欢
								</a>
							</div>
						</div>
					</div>

3.4、注册页

相关代码：

<form class="main-box" role="form" action="" method="post">
    <h3 class="form-header">用户注册</h3>
    <div class="form-group">
        <label for="email">邮箱：</label>
        <input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="email">昵称：</label>
        <input type="email" class="form-control" id="email" name="email" placeholder="Name">
    </div>
    <div class="form-group">
        <label for="pwd">密码：</label>
        <input type="password" class="form-control" id="pwd" name="password" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="pwd">确认密码：</label>
        <input type="password" class="form-control" id="pwd" name="password" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary btn-block">提交信息</button>
    <a class="extra" href="">登录</a><a class="extra" href="">找回密码？</a><a class="extra" href="">回到首页</a>
</form>

以上就是本次项目的全部内容，需要交流或者获取代码请关注公众号：coding加油站，获取