HTML5期末⼤作业:在线电影app⽹页设计——电影票务购票系统WebApp⼿机
模板(12。。。
HTML5期末⼤作业:在线电影app——电影票务购票系统WebApp⼿机模板
HTML+CSS+JavaScript 学⽣DW⽹页设计作业成品 web课程设计⽹页规划与设计计算机毕设⽹页设计源码
常见⽹页设计作业题材有 个⼈、美⾷、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节⽇、戒烟、电影、摄影、⽂化、家乡、鲜花、礼品、汽车、其他 等⽹页设计题⽬, A+⽔平作业, 可满⾜⼤学⽣⽹页⼤作业⽹页设计需求, 喜欢的可以下载!
作品介绍
1.⽹页作品简介 :⼀款⿊⾊实⽤的电影⽹最新电影资讯,电影购票,电影院选择⼿机app页⾯模板。⼀共有11个页⾯。⾸页点击电影轮播–>电影详情–点击购票–>选择影院–>选择座位–>确认订单。电影页–>点击–>跳转电影详情。电影院页⾯–>点击–>电影院详情
2.⽹页作品编辑:作品下载后可使⽤任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改⽹页)。
3.⽹页作品技术:Div+CSS、⿏标滑过特效、Table、导航栏效果、banner、表单、⼆级三级页⾯等,视频、 ⾳频元素 、Flash,同时设计了logo(源⽂件),基本期末作业所需的知识点全覆盖。
⽂章⽬录
⼀、作品展⽰
⼆、⽂件⽬录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv='X-UA-Compatible'content='IE=edge'/>
<meta name='viewport'content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'/> <meta charset="UTF-8">
<link rel='stylesheet'href='../css/mine.css'>
<title>⼩⿊电影⽹</title>
</head>
<body>
<body>
<div class="mine-content">
<header class="mine-header fl-en">
<img class="scan-icon"src="../images/icon/scan_icon.png"alt="">
<h5 class="f-32 white">个⼈中⼼</h5>
<div class="news">
<p class="evaluate">
<img src="../images/icon/evaluate_2_icon.png"alt="">
</p>
<img class="more-icon"src="../images/icon/more_icon.png"alt="">
</div>
</header>
<div class="mine-main bg-red white">
<div class="user-info">
<img class="avatar"src="../images/source/avatar_1.jpeg"alt="">
<div class="ml-20">
<div class="user-name">
<p class="f-34">廖某某</p>
<img class="ml-12"src="../images/icon/crown_icon.png"alt="">
</div>
<div class="user-label">
<p>黄⾦会员</p>
<p>积分245</p>
</div>
</div>
</div>
<ul class="fl-en user-data">
<li class="special">
<p class="f-30">200</p>
<p class="f-24">已看</p>
</li>
<li class="special">
<p class="f-30">200</p>
<p class="f-24">想看</p>
</li>
<li class="special">
<p class="f-30">200</p>
<p class="f-24">讨论</p>
</li>
<li>
<p class="f-30">200</p>
<p class="f-24">记录</p>
</li>
</ul>
</div>
<div class="member bg-brown white">
<img class="diamond-icon"src="../images/icon/diamand_icon.png"alt=""> <div class="ml-20">
<p class="f-30">会员中⼼</p>
<p class="f-24">开通影视卡会员专属8折优惠</p>
</div>
<div class="goto-btn">
<p class="f-26 mr-12">⽴即开通</p>
<img class="right_icon"src="../images/icon/right_icon.png"alt="">
</div>
</div>
<div class="order bg-brown white">
<header>
<img class="order-icon"src="../images/icon/order_icon.png"alt="">
<p class="f-30 ml-20">我的订单</p>
<img class="right_icon"src="../images/icon/right_icon.png"alt="">
</header>
<div class="menu">
<a>
<div>
<img src="../images/icon/wallet_icon.png"alt="">
<img src="../images/icon/wallet_icon.png"alt="">
</div>
<p>我的钱包</p>
</a>
<a>
<div>
<img src="../images/icon/pay_icon.png"alt="">
</div>
<p>待付款</p>
</a>
<a>
<div>
<img src="../images/icon/evaluate_icon.png"alt="">
</div>
<p>待评价</p>
</a>
<a>
<div>
<img src="../images/icon/speed_icon.png"alt="">
</div>
<p>退款</p>
</a>
<a>
<div>
<img src="../images/icon/movie_a_icon.png"alt="">
</div>
<p>电影票</p>
</a>
<a>
<div>
<img src="../images/icon/music_icon.png"alt="">
</div>
<p>演出票</p>
</a>
<a>
<div>
<img src="../images/icon/coupon_icon.png"alt="">
</div>
<p>优惠券</p>
</a>
<a>
<div>
<img src="../images/icon/score_icon.png"alt="">
</div>
<p>兑积分</p>
</a>
</div>
</div>
<div class="menu-list bg-brown white mt-20">
<img class="star-icon"src="../images/icon/collect_icon.png"alt=""> <p class="f-26 ml-12">我的收藏</p>
<img class="right_icon"src="../images/icon/right_icon.png"alt=""> </div>
<div class="menu-list bg-brown white">
<img class="card-icon"src="../images/icon/card_icon.png"alt=""> <p class="f-26 ml-12">我的银⾏卡</p>
<img class="right_icon"src="../images/icon/right_icon.png"alt=""> </div>
<div class="menu-list bg-brown white">
<img class="th-icon"src="../images/icon/theatre_icon.png"alt=""> <p class="f-26 ml-12">我的⼩剧场</p>
<img class="right_icon"src="../images/icon/right_icon.png"alt=""> </div>
</div>
<div class="footer fl-ar bg-black">
<a class="white"onclick="goLink('index.html')">
<a class="white"onclick="goLink('index.html')">
<img src="../images/icon/home_n_icon.png"alt="">
<p>⾸页</p>
</a>
<a class="white"onclick="goLink('movie.html')">
<img src="../images/icon/movie_n_icon.png"alt="">
<p>电影</p>
</a>
<a class="white"onclick="goLink('cinema.html')">
<img src="../images/icon/cinema_n_icon.png"alt="">
前端页面模板<p>电影院</p>
</a>
<a class="white"onclick="goLink('find.html')">
<img src="../images/icon/find_n_icon.png"alt="">
<p>发现</p>
</a>
<a class="white"onclick="goLink('mine.html')">
<img src="../images/icon/mine_a_icon.png"alt="">
<p class="red-80">我的</p>
</a>
</div>
<script src="../js/index.js"></script>
</body>
</html>
四、学习资料
web前端零基础-⼊门到⾼级 (视频+源码+开发软件+学习资料+⾯试题) ⼀整套 (教程)适合⼊门到⾼级的童鞋们⼊⼿~送1000套HTML+CSS+JavaScript模板⽹站
五、完整源码
【百度⽹盘-源码下载地址】

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。