【期末网页设计作业】HTML+CSS+JS 电影网站设计与实现 影视主题网站（附代码）

网页作品简介

本作品是一个基于 HTML+CSS+JavaScript 开发的电影主题网站，包含丰富的影视内容展示与用户交互功能。主要页面包括：首页、电影列表页、电视剧展示页、动漫分类页、登录页、注册页等多个核心页面，提供完整的影视浏览与用户系统体验。

网页作品编辑

此作品为期末网页设计作业中的电影影视主题网站，代码采用学生水平的 html+css 布局制作，融合 JavaScript 交互效果。作品下载后可使用任意 HTML 编辑软件（如：DW、HBuilder、Vscode、NotePAD、Sublime、Webstorm、Notepad++ 等）进行编辑修改，代码结构清晰，注释明确，便于二次开发与功能扩展。

网页作品技术

网站采用 Div+CSS 布局构建整体框架，结合多种前端技术实现丰富功能：

• 运用 JavaScript 实现轮播图切换、Tab 标签页切换、表单校验等交互特效
• 使用 Table 布局构建底部信息展示区域
• 设计响应式导航栏，实现页面间的无缝跳转
• 采用表单元素实现用户登录与注册功能
• 通过盒子模型布局实现影视内容的网格展示与分类浏览

网站开发涵盖了前端基础知识点，包括 HTML 结构设计、CSS 样式美化、JavaScript 交互逻辑等，适合作为期末作业展示前端技术的综合应用能力。

获取完整源码

如需获取该电影主题网站的完整源码，请关注并私信，或在评论区留言，即可获取全部文件及相关资源。

作品部分截图：

项目概述

        本次分享的是一个基于 HTML、CSS 和 JavaScript 开发的电影影视主题网站，适合作为期末网页设计作业。网站包含首页、电影列表页、登录页和注册页等核心功能模块，采用现代化 UI 设计，具有良好的视觉效果和用户体验。

        网站整体风格采用深色与亮色对比，突出影视内容的视觉呈现，同时保证了页面的响应式布局和交互体验。下面将详细介绍网站的设计思路、实现过程和核心代码。

网站功能结构

1. 导航模块：包含网站 logo、主导航菜单、搜索框和用户登录入口
2. 首页轮播图：展示热门影视内容，自动切换并支持手动选择
3. 影视分类展示：按类型（最新、内地剧、日韩剧等）展示影视内容
4. 热门排行榜：显示当前热门影视
5. 电影列表页：按分类展示电影内容
6. 用户系统：包含登录和注册功能

页面设计与实现

1. 整体布局设计

网站采用经典的三栏布局结构，通过 container 类控制整体宽度并居中显示：

.container{width: 1000px;height: 100%;margin: 0 auto;
}

页面分为 header（头部导航）、content（主体内容）和 footer（页脚）三个主要部分，各部分职责清晰，结构合理。

2. 导航栏实现

导航栏采用黑色背景，包含 logo、导航菜单、搜索框和登录入口：

<div class="header"><div class="container"><!-- logo --><div class="site-logo"><a href="#"><img src="img/index/tiger.png" /></a></div><!-- 导航菜单 --><div class="site-list"><ul class="clearfix"><li><a href="index.html"><font color="coral"><b>首页</b></font></a></li><li><a href="dianying2.html">电影</a></li><li><a href="dianying2.html">电视剧</a></li><li><a href="dianying2.html">动漫</a></li></ul></div><!-- 登录/注册 --><div class="login"><a href="dengru.html">登录 / 注册</a></div><!-- 搜索框 --><div class="site-search"><form action=""><input class="search-text" type="text" placeholder="请输入关键字" /><input class="submit" type="submit" value="搜索" /></form></div></div>
</div>

导航栏 CSS 样式设计：

.header{height: 80px;background-color: black;
}
.header .site-logo{float: left;width: 178px;margin-top: 8px;
}
.header .site-list{float: left;width: 400px;height: 70px;padding: 10px 0 0 31px;font-size: 21px;
}
.header .site-list ul li{float: left;
}
.header .site-list ul li a{display: block;padding: 15px 10px 18px;color: #FFFFFF;
}
.header .site-list ul li a:hover{color: coral;
}

3. 轮播图实现

首页轮播图采用 JavaScript 控制图片切换，配合 CSS 动画效果：

<div class="box"><ul id="imglist"><li><img src="img/index/1.png" alt=""></li><li><img src="img/index/0.jpg" alt=""></li><li><img src="img/index/3.jpg" alt=""></li><li><img src="img/index/4.jpg" alt=""></li><li><img src="img/index/2.jpg" alt=""></li></ul><!-- 轮播指示器 --><ul id="btnlist"><li class="btn active"></li><li class="btn"></li><li class="btn"></li><li class="btn"></li><li class="btn"></li></ul>
</div>

轮播图核心 CSS：

.box {width: 994px;height: 300px;border: 3px #E0E0E0 double;position: relative;overflow:hidden;border-radius: 5px;
}
#imglist {width: 5000px;height:300px;list-style: none;position: absolute;left: 0px; 
}
#imglist li {float: left;
}

JavaScript 控制轮播逻辑（核心代码）：

// 轮播图自动切换
let timer = setInterval(autoPlay, 3000);
let index = 0;
let imglist = document.getElementById("imglist");
let btnlist = document.getElementById("btnlist").getElementsByTagName("li");function autoPlay() {index++;if (index >= btnlist.length) {index = 0;}changeImage(index);
}function changeImage(idx) {// 切换图片imglist.style.left = -idx * 1000 + "px";imglist.style.transition = "left 0.5s ease";// 更新指示器状态for (let i = 0; i < btnlist.length; i++) {btnlist[i].className = "btn";}btnlist[idx].className = "btn active";index = idx;
}

4. 影视内容展示区

采用 Tab 标签页形式展示不同分类的影视内容：

<div id="tab"><div id="tabNav"><p><strong>电视剧</strong></p><ul><li class="active">最新</li><li>内地剧</li><li>日韩剧</li></ul></div><div id="main"><!-- 最新内容 --><div class="item show"><div class="main-zuixin"><div class="zuixin-left"><img src="img/index/z0.jpg" /><a href="#"> 家族荣耀</a></div><div class="zuixin-right"><!-- 右侧内容 --></div></div></div><!-- 内地剧内容 --><div class="item"><!-- 内容省略 --></div><!-- 日韩剧内容 --><div class="item"><!-- 内容省略 --></div></div>
</div>

Tab 切换的 JavaScript 实现：

// 为每个导航项添加点击事件
for (let i = 0; i < tabNav.length; i++) {tabNav[i].onclick = function() {// 切换导航状态for (let j = 0; j < tabNav.length; j++) {tabNav[j].className = "";}this.className = "active";// 切换内容显示for (let k = 0; k < tabContent.length; k++) {tabContent[k].className = "item";}tabContent[i].className = "item show";}
}

5. 用户登录与注册功能

登录页面设计采用左右分栏布局，左侧为背景图，右侧为登录表单：

<div class="box"><div class="left"></div><div class="right"><h4>登 录</h4><form  action="#"><input class="acc" type="text" id="username" placeholder="用户名"/><input class="acc" type="password" id="pwd" placeholder="密码"/></form><form  action="#"><input class="submit" type="submit" id="log" value="登录"/></form><div class="down"><a href="zhuce.html">注册账号</a><a href="#">忘记密码？</a></div></div>
</div>

注册功能实现：

// 获取DOM元素
let username1=document.getElementById("username");
let pwd12=document.getElementById("pwd2");
let btn1=document.getElementById("log");// 注册按钮点击事件
btn1.onclick=function(){// 验证表单if(username.value==""||phone.value==""||pwd.value==""||pwd2.value==""){alert("请把信息填写完整");}else if(pwd1.value==pwd12.value){ // 存储用户信息到localStoragelocalStorage.setItem('username1',username.value);localStorage.setItem('pwd1',pwd.value);alert("用户注册成功\n请登入");window.location.href="dengru.html";}else{alert(" 两次密码内容不一致！\n请重新输入");}
}

设计亮点

1. 视觉设计：采用渐变色按钮、圆角元素和阴影效果，提升视觉层次感
2. 交互体验：所有可点击元素都有悬停效果，提升用户体验
3. 响应式布局：通过弹性布局和浮动实现页面元素的合理排列
4. 数据存储：使用 localStorage 存储用户注册信息，实现页面间数据共享
5. 模块化设计：将页面拆分为多个功能模块，便于维护和扩展

总结与展望

        本电影网站实现了影视展示、分类浏览、用户登录注册等核心功能，采用了现代化的 UI 设计和交互效果。通过这个项目，不仅巩固了 HTML、CSS 和 JavaScript 的基础知识，还学会了如何将这些技术结合起来开发一个完整的网站。