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

最新推荐文章于 2024-08-19 16:43:37 发布

置顶

@码出未来-web网页设计

最新推荐文章于 2024-08-19 16:43:37 发布

阅读量3.6w

点赞数 81

分类专栏： HTML期末大作业 html在线电影学生DW网页设计作业成品文章标签： web html5网页设计作业代码 html制作网页案例代码 html大作业网页代码在线电影HTML

本文链接：https://blog.csdn.net/ruan365392777/article/details/118017260

版权

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

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

❉ 一、介绍

使用原生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>
                        <button onclick="alert('123')">预告片</button>
                        <button onclick="alert('123')">预售</button>
                        <p>9月31日上映</p>
                    </div>
                    <div class