HTML期末学生作业 HTML+CSS+JavaScript仿猫眼电影在线网站 Hbuilder网页制作

IT芷君

已于 2022-07-18 22:56:10 修改

阅读量3.1k

点赞数 5

分类专栏： html网页设计 web前端期末大作业 dw静态网页设计与制作文章标签： javascript html css

于 2022-07-18 22:55:52 首次发布

本文链接：https://blog.csdn.net/VX_WJ88950106/article/details/125862078

版权

这是一个HTML期末学生作业，通过原生HTML、CSS和JavaScript创建了一个静态电影网站——猫眼电影。该网站包含登录注册、首页、电影详情和购票选座等功能。最难实现的部分是轮播图，现已成功完成。此项目回顾了作者的学习过程，并鼓励保持学习的热情。

摘要由CSDN通过智能技术生成

❤ HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)

web期末结课大作业 html+css+javascript网页、电影、仿京东、天猫、服装、企业网站制作，资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件，用于大学web网页课程参考以及相关从业人员参考学习

❉ 文章目录

❤ HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)
❉ 一、介绍
❉ 二、实现
❉ 三、效果
代码实现
- html首页部分
- js登录部分
❉ 四、总结
❉ 源码获取

❉ 一、介绍

使用原生HTML、CSS、JavaScript编写的一个静态电影网站，取名猫眼电影。

以前学习前端基础知识时做的一个小作品，参考了很多电影网站的一个原型，在这里记录一下自己的学习过程及产物。

❉ 二、实现

电影总共9个页面，分别是登录注册页面、首页、电影详情页面和电影选票购票页面。

网站需要登录操作，账号密码写死在JS中，可登录的账号密码为root/root和 username/password

记得当时最难实现的是轮播图这个，不过最后还是做出来了，效果还是挺满意的。

❉ 三、效果

2.效果样式

首页

在这里插入图片描述

选电影/购票/选座/

在这里插入图片描述

登录/注册

在这里插入图片描述

1.文件目录

在这里插入图片描述

代码实现

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>
        <div class="header-body">
            <a href="index.html?123" class="logo">猫眼电影</a>
            <div class="city">成都
                <span class="caret"></span>
            </div>
            <div class="city-list">
                <div class="now-city">
                    定位城市: 定位失败
                </div>
                <div class="citys">
                    <span class="icon"></span> 定位失败
                </div>
            </div>
            <div class="nav">
                <ul class="nav-list">
                    <li><a href="index.html?123" class="nav-model active">首页</a></li>
                    <li><a href="movies.html" class="nav-model">电影</a></li>
                    <li><a href="cinemas.html" class="nav-model">影院</a></li>
                    <li class="nav-model">演出</li>
                    <li class="nav-model">榜单</li>
                    <li class="nav-model">热点</li>
                    <li class="nav-model">商城</li>
                </ul>
            </div>
            <div class="app-download">
                <a href="#">
                    <span class="phone"></span> APP下载
                    <span class="caret"></span>

                    <div class="appcode">
                        <img src="images/phonecode.png" class="app-code"></img>
                        <p class="down-tip">扫码下载APP</p>
                        <p class="down-text">选座更优惠</p>
                    </div>
                </a>
            </div>
            <div class="search">
                <div type="text" class="searchinput">
                    <input type="text" class="input" placeholder="找影视剧、影人、影院">
                    <input class="submit" type="submit" value="">
                </div>
            </div>
            <div class="userimg">
                <img src="images/user.png" alt="">
                <span class="caret"></span>
            </div>
            <div class="userlogin">
                <a href="login.html" class=" notlogin">登录</a>
                <div class="islogin nologin">
                    <a href="personal.html">个人中心</a>
                    <a href="index.html">退出</a>
                </div>
            </div>
    </header>
    <!-- 轮播图 -->
    <div class="wrap" id="wrap">
        <ul class="content"></ul>
        <a href="javascript:;" class="prev">&#60;</a>
        <a href="javascript:;" class="next">&#62;</a>
    </div>
    <!-- 页面主体 -->
    <div class="container">
        <div class="main">
            <!-- 正在热映 -->
            <div class="hot-movie">
                <h2>正在热映（4部）</h2>
                <div class="movies" id="hotmovies">
                </div>
            </div>
            <!-- 即将上映 -->
            <div class="movie-box">
                <div class="movie-header">
                    <h2>即将上映（115部）</h2>
                    <a href="#">
                        <span>全部></span>
                    </a>
                </div>
                <div class="movies">
                    <div class="movies-model">
                        <a href="">
                            <img src="images/hotmovie1.png" alt="" srcset="">
                        </a>
                        <p>46461661人想看</p>
                        <button onclick="alert('123')">预告片</button>
                        <button onclick="alert('123')">预售</button>
                        <p>9月31日上映</p>
                    </div>
                    <div class="movies-model">
                        <a href="">
                            <img src="images/hotmovie2.png" alt="" srcset="">
                        </a>
                        <p>46461661人想看</p>
                        <button onclick="alert('123')">预告片</button>
                        <button onclick="alert('123')">预售</button>
                        <p>10月2日上映</p>
                    </div>
                    <div class="movies-model">
                        <a href="">
                            <img src="images/hotmovie3.png" alt="" srcset="">
                        </a>
                        <p>46461661人想看</p>
                        <button onclick="alert('123')">预告片</button>
                        <button onclick="alert('123')">预售</button>
                        <p>11月1日上映</p>
                    </div>
                    <div class="movies-model">
                        <a href="">
                            <img src="images/hotmovie4.png" alt="" srcset="">
                        </a>
                        <p>46461661人想看</p>
                        <button onclick="alert('123')">预告片</button>
                        <button onclick="alert('123')">预售</button>
                        <p>9月23日上映</p>
                    </div>
                    <div class="movies-model">
                        <a href="">
                            <img src="images/hotmovie1.png" alt="" srcset="">
                        </a>
                        <p>46461661人想看</p>
                        <button onclick="alert('123')">预告片</button>
                        <button onclick="alert('123')">预售</button>
                        <p>9月31日上映</p>
                    </div>
                    <div class="movies-model">
                        <a href="">
                            <img src="images/hotmovie1.png" alt="" srcset="">
                        </a>
                        <p>46461661人想看</p>
                        <button onclick="alert('123')">预告片</button>
                        <button onclick="alert('123')">预售</button>
                        <p>9月31日上映</p>
                    </div>
                    <div class="movies-model">
                        <a href="">
                            <img src="images/hotmovie1.png" alt="" srcset="">
                        </a>
                        <p>46461661人想看</p