大二学生web期末大作业 在线电影网站 HTML+CSS+JS_期末作业电影网页-程序员宅基地
技术标签： css HTML网页设计 期末作业 html 网页设计 html在线电影网页设计
️ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
web前端期末大作业： 【HTML5网页期末作业 (1000套) 】
程序员有趣的告白方式：【HTML七夕情人节表白网页制作 (110套) 】
二、网站介绍
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2） css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、网站效果
️1.视频演示
电影网页设计
2.图片演示
四、 网站代码
HTML结构代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>叮当电影 - 搜罗全网好电影</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<header class="header">
<div class="container">
<!--logo-->
<a href="index.html" class="logo"></a>
<!--导航标签-->
<div class="nav">
<ul class="navbar">
<li><a href="index.html" class="active">首页</a></li>
<li><a href="movie.html">购票</a></li>
<li><a href="javascript:;">影院</a></li>
<li><a href="javascript:;">社区</a></li>
</ul>
</div>
<!--购物车-->
<div class="headcart">
<i class="cart-icon"></i>
<b class="card-num"></b>
<div class="card-tip"></div>
</div>
<!--用户登陆注册-->
<div class="user">
<div class="userout">
<a href="login.html" class="login cur">登录</a>
<a href="register.html" class="register cur">注册</a>
</div>
<div class="userin">
<a href="javascript:;" class="menu-item-user">
<img class="user-face" src="./imgs/userface.jpg" alt="userface">
<span class="user-name"></span>
</a>
<span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="javascript:;">个人中心</a></li>
<li><a href="javascript:;">退出登录</a></li>
</ul>
</div>
</div>
<ul>
<li>
<table class="slidey-list-table">
<tr>
<td rowspan="2" class="slidey-list-img">
<div></div>
</td>
<td class="slidey-list-title"></td>
</tr>
<tr>
<td class="slidey-list-description"></td>
</tr>
</table>
</li>
<li>
<table class="slidey-list-table">
<tr>
<td rowspan="2" class="slidey-list-img">
<div></div>
</td>
<td class="slidey-list-title"></td>
</tr>
<tr>
<td class="slidey-list-description"></td>
</tr>
</table>
</li>
<li>
<table class="slidey-list-table">
<tr>
<td rowspan="2" class="slidey-list-img">
<div></div>
</td>
<td class="slidey-list-title"></td>
</tr>
<tr>
<td class="slidey-list-description"></td>
</tr>
</table>
</li>
<li>
<table class="slidey-list-table">
<tr>
<td rowspan="2" class="slidey-list-img">
<div></div>
</td>
<td class="slidey-list-title"></td>
</tr>
<tr>
<td class="slidey-list-description"></td>
</tr>
</table>
</li>
</ul>
</div>
</div>
<div class="movie-grid">
<div class="panel">
<div class="main">
<div class="panel-header">
<span class="panel-title">正在热映（<span>20</span>部）</span>
<a href="javascript:;" class="panel-more">更多</a>
</div>
<div class="movie-list">
<ul>
<li>
<a href="movie.html" class="movie-poster">
<img src="./imgs/poster/bingxueqiyuan2.jpg" alt="" class="poster">
<span class="movie-score">8.0</span>
</a>
<span class="movie-title">冰雪奇缘2</span>
<a href="movie.html" class="movie-ticket-buy">选座购票</a>
</li>
<li>
<a href="movie.html" class="movie-poster">
<img src="./imgs/poster/chuixiaoren.jpg" alt="" class="poster">
<span class="movie-score">8.5</span>
</a>
<span class="movie-title">吹哨人</span>
<a href="movie.html" class="movie-ticket-buy">选座购票</a>
</li>
<li>
<li>
<a href="javascript:;">
<span class="movie-rank-num">4</span>
<p class="movie-rank-name">吹哨人</p>
<span class="box-office">900人想看</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="movie-rank-num">5</span>
<p class="movie-rank-name">大约在冬季</p>
<span class="box-office">800人想看</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="movie-rank-num">6</span>
<p class="movie-rank-name">吹哨人</p>
<span class="box-office">700人想看</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="movie-rank-num">7</span>
<p class="movie-rank-name">天·火</p>
<span class="box-office">600人想看</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="movie-rank-num">8</span>
<p class="movie-rank-name">一生有你</p>
<span class="box-office">550人想看</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="movie-rank-num">9</span>
<p class="movie-rank-name">冰雪奇缘2</p>
<span class="box-office">450人想看</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="link-nav">
<ul>
<li><a href="javascript:;">关于叮当</a></li>
<li><a href="javascript:;">加入我们</a></li>
<li><a href="javascript:;">联系我们</a></li>
<li><a href="javascript:;">隐私政策</a></li>
<li><a href="javascript:;">问题反馈</a></li>
</ul>
<div class="copyright">Copyright 2019 叮当电影</div>
</div>
<div class="sns">
<a href="javascript:;" class="sina-icon icon"></a>
<a href="javascript:;" class="wechat-icon icon"></a>
<a href="javascript:;" class="rss-icon icon"></a>
</div>
</div>
</footer>
<div id="toTop"></div>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/slidey.js"></script>
<script type="text/javascript">
window.onload = function () {
setPage("index.html");
initPublic();
initScrollToTop();
new initSlidey();
};
</script>
</body>
</html>
CSS样式代码
@charset "UTF-8";
/*******************************************************************/
/* 底部 - 页脚 */
.footer {
height: 100px;
width: 100%;
overflow: hidden;
background-color: #2d3237;
color: #778088;
}
.footer a {
color: #778088;
}
.footer .link-nav {
float: left;
margin: 20px 0;
}
.footer .link-nav a:hover {
color: #FF8D1B;
}
.footer .sns {
float: right;
margin-top: 30px;
}
.footer .link-nav li {
display: inline-block;
margin-right: 20px;
}
.footer .copyright {
margin-top: 10px;
}
.footer .sns a.icon {
display: inline-block;
width: 36px;
height: 36px;
margin-left: 10px;
border-radius: 50%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all .2s ease;
}
.footer .sns a.icon:hover {
width: 42px;
height: 42px;
background-color: #FF8D1B;
border: 1px solid #FF8D1B;
}
.footer .sns .sina-icon {
background-image: url("../imgs/icons/sina-icon.png");
}
.footer .sns .wechat-icon {
background-image: url("../imgs/icons/wechat_icon.png");
}
.footer .sns .rss-icon {
background-image: url("../imgs/icons/rss-icon.png");
}
五、更多源码
1.如果我的博客对你有帮助 请 “点赞” “️评论” “收藏” 一键三连哦！
2.【关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
以上内容技术相关问题欢迎一起交流学习
智能推荐
汽车行业常见术语英文缩写（持续更新...）_汽车专业术语缩写-程序员宅基地
文章浏览阅读2.3k次，点赞2次，收藏18次。序号缩写中文英文1ABS防抱死制动系统Anti-lock Braking System2EVAP蒸发排放系统Evaporative Emission System3EGR废气再循环Exhaust Gas Recirculation4ESIM蒸发系统完整性监测Evapor System Integraty Monitor5EPB电子驻车制动系统Electrical Park Brake6EBD电子制动力分配Electro..._汽车专业术语缩写
寻找...-程序员宅基地
文章浏览阅读280次。菜鸟程序员寻找人教我会很虚心学习的希望有人愿意教我
opencv cv2.imread()报错： error: (-215:Assertion failed) !_src.empty() in function ‘cv::cvtColor‘_cv2.error: opencv(4.7.0) /io/opencv/modules/imgpro-程序员宅基地
文章浏览阅读2.2k次，点赞2次，收藏3次。v2.error: OpenCV(4.7.0) D:\a\opencv-python\opencv-python\opencv\modules\imgproc\src\color.cpp:182: error: (-215:Assertion failed) !_src.empty() in function 'cv::cvtColor'_cv2.error: opencv(4.7.0) /io/opencv/modules/imgproc/src/color.cpp:182: error
推荐Windows电脑上最好用的3个mobi阅读器-程序员宅基地
文章浏览阅读9.3k次。mobi格式之所以流行，主要是源于亚马逊官网的电子书格式以及Kindle，但由于存在较多缺陷逐渐被azw3格式替代，mobi格式的文件无法直接用电脑打开，需要阅读器才能打开阅读。今天小编就为大家推荐3个在Windows电脑上最好用的mobi阅读器。第一款： neat reader neat reader是一款跨平台阅读器，可以支持azw3/azw/mobi/epub/pdf/txt等常见文档格式，也同时支持在Windows/Mac/Android/iOS系统上使用。 neat reader阅读..
生活经验_生活经验博客-程序员宅基地
文章浏览阅读212次。坚持原则1、背后不议论他人是非，拒绝人身攻击。2、坚持宁缺毋滥原则，重要事情坚决不将就或迁就。3、抵制诱惑，坚决不为新奇而体验令人上瘾的不好事物。4、坚持独立思考，明辨是非，科学评判，拒绝听风就是雨，跟风，为舆论绑架。5、若想人不知，除非己莫为。方法论1、做事讲究成本：包括经济成本，时间成本，体能成本。譬如在一下破解应用上，往往找破解方法会花费大量的时间成本，破解应用，往往也可能..._生活经验博客
RK3399平台入门到精通系列讲解 - 总目录_rk3399平台开发系列讲解(内核入门篇)1.20、container_of 获取结构体首地址原理-程序员宅基地
文章浏览阅读8.7w次，点赞261次，收藏1.1k次。欢迎大家来到内核笔记的《RK3399平台开发入门到精通系列讲解》，开始前博主先列出RK3399平台学习的大纲，同时这也可以作为大家学习RK3399内核与安卓框架的参考。下面蓝字都是传送门，点击进入即可：..._rk3399平台开发系列讲解(内核入门篇)1.20、container_of 获取结构体首地址原理
随便推点
字节跳动高频100道核心前端面试题解析-程序员宅基地
文章浏览阅读3.4k次。字节跳动的前端一直是大热之选，薪资和技术都是国内的最前沿。本文将为大家简单介绍一下字节技术岗的职级体系和相应的技术要求。并给大家分享一套高质量面试题：「由字节资深前端大佬整理的100道高频..._字节跳动前端面试题
HTML-Emmet（神器）_html 神器-程序员宅基地
文章浏览阅读709次。使用Emmet必须先安装插件，我用atom 安装插件翻墙什么的我就不写了 在这里我推荐两个学习emmet语法的网页 日常链接嘻嘻 前人总结的emmet语法使用，有动态图演示，新手推荐 官方语法_html 神器
Zigbee入门概念及背景知识_zigbee背景-程序员宅基地
文章浏览阅读700次。在学习Zigbee之前，需要了解与单片机学习的方法不同之处以及难点所在。学习Zigbee需要掌握协议栈和网络等相关知识，任务量较大。Zigbee的资料相对较少，初学者学习起来比较费劲，学习效果不理想。学习过程中需要利用软件和硬件工具，提高学习效率。Zigbee是一种无线通信方式，用于构建无线局域网，可以用于家居、工业、矿产、农业、医疗等领域。相比蓝牙和WIFI，Zigbee可以组建大规模网络，功耗低，但通信速率较小。Zigbee和以太网组网技术有所不同，用途、拓扑结构和通信特性等方面存在差异。Zigbee的_zigbee背景
HTTP中的GET和POST方法详解_http post get-程序员宅基地
文章浏览阅读1.4w次，点赞18次，收藏100次。一般来说GET是获取数据，POST是提交数据的。但是因为GET和POST都是HTTP的方法，HTTP又是是基于TCP/IP的关于数据在万维网中如何让通讯的协议。从本质上讲，GET和POST都是HTTP请求，都是TCP链接，是无区别的。但是HTTP协议既然有了这两个方法，就是为了在特定的情况下区分应用。1、GET是获取数据，POST是提交数据的。GET方法通常用于请求服务器发送某个资源，而且应该是安全的和幂等的。仅仅是获取资源信息，就像数据库查询一样，不会修改和增加数据，不会影响资源的状态。POST_http post get
初识 MongoDB_本关任务:根据编程要求启动 mongodb 服务。-程序员宅基地
文章浏览阅读2.6k次，点赞3次，收藏28次。第1关：启动 MongoDB本关任务：根据编程要求启动 MongoDB 服务。第2关：启动 MongoDB 多实例本关任务：根据第一关单实例（服务）的启动教程，按照编程要求，启动两组实例（服务）。第3关：退出客户端和关闭 MongoDB 服务本关任务：关闭端口为27017的 MongoDB 服务。标题..._本关任务:根据编程要求启动 mongodb 服务。
ClusterStorage-236-4-客户端配置挂载与授权控制（ACL&Quota）_acl_enable 和 quota-程序员宅基地
文章浏览阅读225次。0.实验环境图1.客户端配置挂载在workstation上，安装glusterfs文件客户端，创建挂载目录，编辑挂载配置文件，进行挂载，查看文件系统。[root@workstation ~]# yum install -y glusterfs-fuse[root@workstation ~]# mkdir /test[root@workstation ~]# mkdir ..._acl_enable 和 quota