Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

【HTML作业】HTML设计--电影网站,影视网站

coding加油站 2022-08-06 10:14:30 阅读数:2 评论数:0 点赞数:0 收藏数:0

 html网页制作期末大作业--电影网站html+css+javascript 适用学生作业 课程设计在线电影影网、期末作业电影网

关注微信公众号:coding加油站 免费获取,交流,回复“影视导航”免费获取全部代码

影视导航网站,相关视频如下:

【coding加油站】HTML设计--影视导航网站

一个简单的影视网站练习

关键技术:HTML5,css3,少量简单的javascript,hover的相关应用,动画的相关应用等

更多的预览可以看上面的视频,页可以预览下方图片效果:

首页预览: 

 

首页相关代码:

 <!-- 导航栏 -->
<nav>
<input type="checkbox" id="check">
<label class="checkbtn" for="check">
<img class="checkbtn_img" src="images/ul.png" alt="列表">
</label>
<label>
<img src="images/logo.png" alt="" class="logo_img">
</label>
<ul>
<li><a class="action" href="#">精选</a></li>
<li><a href="Subpage/TVseries/TVseries.html">电视剧</a></li>
<li><a href="Subpage/Movie/movie.html">电影</a></li>
<li><a href="Subpage/variety show/variety show.html">综艺</a></li>
<li><a href="Subpage/Documentary/Documentary.html">纪录片</a></li>
<li><a href="Subpage/table/table.html">注册/登录</a></li>
</ul>
</nav>
<!-- 轮播图 -->
<div class="banner">
<!-- swiper插件 -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/swp1.jpg" alt="" srcset="">
</div>
<div class="swiper-slide">
<img src="images/swp2.jpg" alt="" srcset="">
</div>
<div class="swiper-slide">
<img src="images/swp3.jpg" alt="" srcset="">
</div>
<div class="swiper-slide">
<img src="images/swp4.jpg" alt="" srcset="">
</div>
<div class="swiper-slide">
<img src="images/swp5.jpg" alt="" srcset="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<!-- 内容块 -->
<div class="content">
<!-- 电视剧 -->
<div class="TV_series">
<div class="max_title">
<a href="Subpage/TVseries/TVseries.html">
电视剧
</a>
</div>
<!-- 移动端 -->
<div class="mobile_max">
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_1.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<span>完美伴侣</span>
<span>高圆圆回轨 陷入中年爱情</span>
</div>
</div>
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_2.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<span>别宠我·短剧首播</span>
<span>少女为进冷宫花式怼皇帝</span>
</div>
</div>
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_4.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<span>开端·1.11首播</span>
<span>白敬亭赵今麦重启人生</span>
</div>
</div>
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_5.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<span>雪中悍刀行</span>
<span>张若昀胡军共赴江湖</span>
</div>
</div>
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_6.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<span>镜·双城</span>
<span>李易峰陈钰琪跨世虐恋</span>
</div>
</div>
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_7.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<span>你是我的荣耀</span>
<span>杨洋迪丽热巴共谱浪漫爱情</span>
</div>
</div>
</div>
<!-- PC端 -->
<div class="pc_max">
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_1.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<a href="#">
<span>完美伴侣</span>
</a>
<span>高圆圆回轨 陷入中年爱情</span>
</div>
</div>
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_2.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<a href="#">
<span>别宠我·短剧首播</span>
</a>
<span>少女为进冷宫花式怼皇帝</span>
</div>
</div>
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_4.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<a href="#">
<span>开端·1.11首播</span>
</a>
<span>白敬亭赵今麦重启人生</span>
</div>
</div>
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_5.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<a href="#">
<span>雪中悍刀行</span>
</a>
<span>张若昀胡军共赴江湖</span>
</div>
</div>
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_6.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<a href="#">
<span>镜·双城</span>
</a>
<span>李易峰陈钰琪跨世虐恋</span>
</div>
</div>
<div class="pc_box">
<div class="pc_main">
<div class="back_img">
<img src="images/tv_7.jpg" class="back_img_wh">
</div>
</div>
<div class="introduce">
<a href="#">
<span>你是我的荣耀</span>
</a>
<span>杨洋迪丽热巴共谱浪漫爱情</span>
</div>
</div>
</div>
</div>

电影详情页:

 相关代码:


<!-- 文字部分 -->
<div class="box-right">
<div class="right-top">
<div class="left-text">
<div class="label-box">
<div class="label-title">
片名:
</div>
<div class="label-text">
冰火凤
</div>
</div>
<div class="label-box">
<div class="label-title">
类型:
</div>
<div class="label-text">
奇幻 / 冒险 / 古装
</div>
</div>
<div class="label-box">
<div class="label-title">
导演:
</div>
<div class="label-text">
阿健
</div>
</div>
<div class="label-box">
<div class="label-title">
主演:
</div>
<div class="label-text">
于小彤 / 朱圣祎 / 迟帅 / 郑国霖
</div>
</div>
</div>
<div class="right-text">
<div class="label-box">
<div class="label-title">
语言:
</div>
<div class="label-text">
汉语普通话
</div>
</div>
<div class="label-box">
<div class="label-title">
上映时间:
</div>
<div class="label-text">
2021-12-31(中国大陆)
</div>
</div>
<div class="label-box">
<div class="label-title">
片长:
</div>
<div class="label-text">
135分钟
</div>
</div>
<div class="label-box">
<div class="label-title">
评分:
</div>
<div class="label-text">
7.5分
</div>
</div>
</div>
</div>
<div class="right-bottom">
<p>影片介绍:</p>
<p>
雪尊之女千雪妭在洞房花烛夜夺走焱尊的赤炼火,并化为白凤凰与焱尊大打出手,使得赤炼族冰封万里,花木为拯救天下百姓,发誓定要夺回赤炼火,却与千雪妭因一场阴谋相恋,生死一线的冰火大战一触即发
</p>
</div>
<!-- 音乐播放器 -->
<div class="music-title">
影片主题曲试听
</div>
<div id="player">
<!-- 歌曲信息模块 -->
<div id="player-content1">
<!-- 歌曲名 -->
<div class="music-name"></div>
<!-- 歌手名 -->
<div class="artist-name"></div>
<!-- 歌曲时间 -->
<div class="time">
<!-- 当前播放的时间 -->
<div class="current-time"></div>
<!-- 歌曲总时长 -->
<div class="total-time"></div>
</div>
<!-- 进度条 -->
<div id="s-area">
<!-- 鼠标移动到进度条上,显示的时间信息 -->
<div id="ins-time"></div>
<!-- 鼠标移动到进度条上,进度条变暗部分-->
<div id="s-hover"></div>
<!-- 表示当前歌曲播放进度的蓝色进度条 -->
<div id="seek-bar"></div>
</div>
</div>
<!-- 控制模块 -->
<div id="player-content2">
<!-- 左侧歌曲封面旋转模块 -->
<div class="music-imgs">
<!-- 封面图 -->
<div class="img"></div>
<!-- 歌曲缓冲时的提示文字 -->
<div id="buffer-box">缓冲…</div>
</div>
<!-- 右侧歌曲操作模块 -->
<div class="player-controls">
<!-- 上一首按钮 -->
<div class="btn prev iconfont">&#xe603;</div>
<!-- 暂停/播放 按钮 -->
<div class="btn play-pause icon-jiediankaishi iconfont"></div>
<!-- 下一首按钮 -->
<div class="btn next iconfont">&#xe602;</div>
</div>
</div>
</div>
</div>
</div>

登录注册页面:

相关代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/table.css">
<title>Table</title>
</head>
<body>
<div class="table">
<div class="table_item">
<div class="active">登录</div><div>注册</div>
</div>
<div class="table_center">
<form method="post" id="Resetform" name="addForm" onsubmit="return false">
<div id="table_center_div" class="div_v">
<p>账号</p>
<input type="text" name="name" id="name" placeholder="请输入用户名" onblur="checkName()">
<br />
<span class="span_p" id="span_name">*请输入合法昵称</span>
<p>密码</p>
<input type="password" name="pwd" id="pwd" placeholder="请输入6位以上有效数字" onblur="checkPwd()">
<span class="span_p" id="span_pwd">*请输入6位以上有效数字</span>
<br />
<input type="button" class="submit_btn" id="btn" value="登录" onclick="chlik_sub()" name="">
<input type="button" class="reset_btn" onclick="resetBtn()" value="重置">
<input type="button" class="reset_btn" onclick="backBtn()" value="返回首页">
</div>
</form>
<form method="post" id="Resetform">
<div class="div_v">
<p>用户名</p>
<input type="text" name="username" id="username" placeholder="请输入用户名" onblur="checkUsername()">
<span class="span_p" id="span_username">*请输入用户名</span>
<p>密码</p>
<input type="password" name="userpwd" id="userpwd" placeholder="请输入6位以上有效数字" onblur="checkUserpwd()">
<span class="span_p" id="span_userpwd">*请输入6位以上有效数字</span>
<p>手机号</p>
<input type="text" name="userphone" id="userphone" placeholder="请输入手机号" onblur="checkUserphone()">
<span class="span_p" id="span_userphone">*请输入手机号</span>
<br />
<input type="button" class="submit_btn" onclick="subBtn()" id="Btn" value="注册">
</div>
</form>
</div>
</div>
<script src="js/table.js"></script>
</body>
</html>

 完整代码,关注微信公众号:coding加油站 免费获取,回复“影视导航”免费获取全部代码

版权声明
本文为[coding加油站]所创,转载请带上原文链接,感谢
https://blog.csdn.net/pandas23/article/details/126166848

支付宝红包,每日可领(支付宝免费1-2元支付红包)