大二学生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模板 、等!

以上内容技术相关问题欢迎一起交流学习

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/p305114466/article/details/126918227

智能推荐

koa如何进行token设置和进行token过期验证_koa token-程序员宅基地

文章浏览阅读1.4k次。koa如何进行token设置和进行token过期验证_koa token

DPDK中文编程指南_dpdk编程指南-程序员宅基地

文章浏览阅读2.2k次,点赞4次,收藏15次。编程指南1. 简介 1.1. 文档地图 1.2. 相关刊物 2. 概述 2.1. 开发环境 2.2. 环境适配层EAL 2.3. 核心组件 2.3.1. 环形缓冲区管理(librte_ring) 2.3.2. 内存池管理(librte_mempool) 2.3.3. 网络报文缓冲区管理(librte_mbuf) 2.3.4. 定时器管理(librte_timer) 2.4. 以太网轮询驱动架构 2.5. 报文转发算法支持 2.6. 网络协议_dpdk编程指南

CSI300 ARIMA模型走势分析源程序_可能遇到了收斂问题:optim信息code=1-程序员宅基地

文章浏览阅读2.3k次。R语言CSI数据的ARIMA模型建立过程。有ARIMA模型调整的方法。_可能遇到了收斂问题:optim信息code=1

linux sudo 命令详解_sudo hraddr=-程序员宅基地

文章浏览阅读2.1k次。“Sudo”是Unix/Linux平台上的一个非常有用的工具,它允许系统管理员分配给普通用户一些合理的“权利”,让他们执行一些只有超级用户或其他 特许用户才能完成的任务,比如:运行一些像mount,halt,su之类的命令,或者编辑一些系统配置文件,像/etc/mtab,/etc /samba/smb.conf等。这样以来,就不仅减少了root用户的登陆次数和管理时间,也提高了系统安全性。_sudo hraddr=

win7安装python3.7_解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题-程序员宅基地

文章浏览阅读95次。错误提示图片首先,我的操作系统是win7旗舰版,安装Python3.7.1之后启动时,提示如图错误,网上比较多的是两种处理方法:(1)安装Windows补丁程序(2)安装VC redit.exe第一种方案我这边下载了KB3118401、KB2999226,但是双击安装的时候安装不了;第二种方案大家都推荐的是安装v++2015,也安装成功了,但是安装后仍然报错。然后看着网上的推荐时间都比较早,我这边..._win7 python 3.86提示缺少.dll

Oracle学习(1)-程序员宅基地

文章浏览阅读122次。1、 数据库的简介英文DabaBase,是一种软件产品,用于存储数据,管理数据的存储仓库(容器)。把数据库理解为U盘。U盘或者硬盘是实物,数据库是软件产品。Java语言的应用领域(1) 桌面级程序应用开发Client客户端-架构 Client/Server服务器-架构的程序(2)互联网程序应用开发Browser浏览器/Server服务器-架构的程序淘宝网页 www.tao...

随便推点

贝壳钱包sig分析_pws/8.3.1.0.8-程序员宅基地

文章浏览阅读1.3k次。15951088268 147852lj18031529044----18031529044.. 随便输了条帐号,分析登陆sig===========================================POST https://api.account.meitu.com/oauth/access_token.json HTTP/1.1Unlogin-Tok..._pws/8.3.1.0.8

YOLOV5 训练自己的数据集_torchvision0.9.2-程序员宅基地

文章浏览阅读688次。1.环境Ubuntu 20.04显卡驱动 470.74CUDA 11.5查看Ubuntu版本号cat /proc/version查看显卡驱动版本nvidia-smi查看CUDA版本nvcc --version2.代码模型下载下载模型git clone https://github.com/ultralytics/yolov5下载预训练模型建议在模型文件夹下新建一个weights,放置下载的预训练模型权重..._torchvision0.9.2

支持串口上传图片和数据到服务器的4G低功耗摄像头方案_串口摄像头接入平台-程序员宅基地

文章浏览阅读1.6k次。当今网络信息自动化的时代,通过网络进行远程监控和远程数据采集成为一种最经济最可靠的方式。但由于部分场景现场监控并不需要过多的检测,只需定时返回现场环境即可,4G串口摄像头极大的方便这方面的需求。不需过多的流量,及能反馈现场环境。针对目前野外的环境,无电无网情况下,需要使用全网通的4G网络,低功耗也是4G模块的硬伤,寻觅了很久,朋友介绍过合方圆的4G低功耗模块G8100B,该模块的特点是功耗同比其它模块降低了%50的功耗,能很好地控制整个产品的功耗。刚好合方圆原厂也提供有4G低功耗摄像头方案,在厂家的技_串口摄像头接入平台

安卓开发用红米手机进行调试_红米手机配合安卓开发-程序员宅基地

文章浏览阅读1.5k次。要想要红米手机连接电脑并被91助手、360手机助手等成功识别,手机必须打开USB调试模式,但是在安卓4.2版本中,系统的USB调试模式不是非常简单地被打开的。对于红米手机,其预装的就是4.2操作系统,故不能直接打开USB调试模式。_红米手机配合安卓开发

QML BOOK 第十章 Networking_qmlscene 一次只能加载一个文件吗-程序员宅基地

文章浏览阅读1.9k次,点赞2次,收藏6次。11. NetworkingQt5在C++中有丰富的网络相关的类。例如在http协议层上使用请求回答方式的高级封装类如QNetworkRequest,QNetworkReply,QNetworkAccessManageer。也有在TCP/IP或者UDP协议层封装的低级类如QTcpSocket,QTcpServer和QUdpSocket。还有一些额外的类用来管理代理,网络缓冲和系统网络配置。_qmlscene 一次只能加载一个文件吗

java.lang.IndexOutOfBoundsException: Inconsistency detected. Invalid item position 6(offset:6).state-程序员宅基地

文章浏览阅读2.3k次。如果你在界面中使用了RecyclerView,并且添加了上拉加载和下拉刷新的功能的话,一定对这个异常不会陌生。因为这个异常就时常发生在刷新清除数据的时候,刚好上拉加载的也调用了notifyDataSetChange();然后就会跑出如下异常:java.lang.IndexOutOfBoundsException: Inconsistency detected. Invalid item_inconsistency detected. invalid item position 6(offset:6)

推荐文章

热门文章

相关标签