热门标签
热门文章
- 1Mac 上的新利器－Visual Studio Code_visual studio code mac暗转
- 22023年的深度学习入门指南(22) - 百川大模型13B的运行及量化_百川13b需要多少显存
- 3SpringBoot+JPA数据源配置&解决springboot2.1.x之后jpaProperties报错的问题_jpaproperties.gethibernateproperties
- 4C语言字符数组的输入输出处理_c输出char数组
- 5adb无法连接夜神模拟器处理以及文件传输_adb文件传输 传不进去
- 6Linux - find命令详解_find -exec命令 linux
- 7spring data jpa repository一套代码兼容多种数据库_java 封装repository适配多种数据库
- 8git在Visual Studio Code如何使用以及git stash的使用_visual studio code git
- 9排序算法浅谈_public int[] sort(int[] sourcearray) throws except
- 10Dockerfile之优化经验浅谈
当前位置: article > 正文
HTML+CSS+JS电影网页设计 DW个人网页制作 Hbuilder制作简单的电影网页 在线电影网页设计与制作 web前端大作业_html网页制作视频素材
作者：程序质量控制师 | 2024-02-05 15:10:59
赞
踩
html网页制作视频素材
一、制作介绍
网页作品代码简单html+css制作，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
技术方面主要应用了学生网页课程中的: DIV+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
二、网页展示(部分展示)
三、代码实现
代码说明：以下仅展示部分代码供参考~
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 class="header"> <div class="container"> <!--logo--> <a href="index.html" class="logo"></a> <!--导航标签--> <div class="nav"> <ul class="navbar"> <li><a href="index.html" class="active">首页</a></li> <li><a href="movie.html">购票</a></li> <li><a href="javascript:;">影院</a></li> <li><a href="javascript:;">社区</a></li> </ul> </div> <!--购物车--> <div class="headcart"> <i class="cart-icon"></i> <b class="card-num"></b> <div class="card-tip"></div> </div> <!--用户登陆注册--> <div class="user"> <div class="userout"> <a href="login.html" class="login cur">登录</a> <a href="register.html" class="register cur">注册</a> </div> <div class="userin"> <a href="javascript:;" class="menu-item-user"> <img class="user-face" src="./imgs/userface.jpg" alt="userface"> <span class="user-name"></span> </a> <span class="caret"></span> <ul class="dropdown-menu"> <li><a href="javascript:;">个人中心</a></li> <li><a href="javascript:;">退出登录</a></li> </ul> </div> </div> <!--搜索栏--> <div class="search"> <form class="form-search" action="" method=""> <input type="text" id="search-input" class="form-search-input" placeholder="搜电影、影院" autocomplete="off"/> <a class="form-search-icon" href="javascript:;" onclick="searchBtnClick(this,event)"></a> </form> </div> <!--APP下载--> <div class="app-download"> <span class="phone-icon"></span> <span class="app-text">下载APP</span> <span class="caret"></span> <div class="qrcode-tip"> <img class="qrcode-img" src="imgs/dingdang-qrcode.png" alt="扫描二维码下载APP"/> <p class="qrcode-tip-title">扫码下载客户端</p> <p class="qrcode-tip-content">手机购票 方便实惠</p> </div> </div> </div> </header> <div class="container"> <div class="slidey"> <ul id="slidey-content" style="display: none"> <li> <img src="imgs/slideposter/Frozen2.jpg" alt=""> <p class="title">冰雪奇缘2</p> <p class="description">为什么艾莎一出生就带着控制冰雪的能力？这个答案一致困扰着她，也威胁着王国的安全。 她将和安娜、克斯托夫、雪宝和驯鹿斯文展开一场危险但非凡的旅程…</p> </li> <li> <img src="imgs/slideposter/ifseawave.jpg" alt=""> <p class="title">若能与你共乘海浪之上</p> <p class="description">青年消防员雏罂粟港和爱好冲浪的向水日菜子相遇并迅速展开热恋。看似命中注定的这对恋人， 却不幸遭遇生死别离。无法接受港已经离世的雏子，某天突然发现，只要唱起属于两个人的那首歌，港就会从水中出现…</p> </li> <li> <img src="imgs/slideposter/skyfire.jpg" alt=""> <p class="title">天·火</p> <p class="description">火山喷发了，这些人的命运纠结在一起。为了看见明天的太阳，他们必须与过去和解， 合力为自己也为众生在绝境中寻找一条生路。 这是一个关于爱与勇气、选择与放弃、自救与他救的中国式英雄的故事…</p> </li> <li> <img src="imgs/slideposter/yewen4.jpg" alt=""> <p class="title">叶问4</p> <p class="description">因故来到美国唐人街的叶问，意外卷入一场当地军方势力与华人武馆的纠纷，面对日益猖狂的 民族歧视与压迫，叶问挺身而出，在美国海军陆战队军营拼死一战，以正宗咏春，向世界证明了中国功夫…</p> </li> </ul> <div class="slidey-main"> <a href="movie.html" class="slidey-main-link"></a> <div class="slidey-overlay"> <p class="slidey-overlay-title"></p> <p class="slidey-overlay-description"></p> <span class="slidey-progress"></span> </div> <div class="slidey-ctrls slidey-ctrls-pre"></div> <div class="slidey-ctrls slidey-ctrls-next"></div> </div> <div class="slidey-list"> <ul> <li> <table class="slidey-list-table"> <tr> <td rowspan="2" class="slidey-list-img"> <div><
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/60998
推荐阅读
- article
[HTML]Web前端开发技术15（HTML5、CSS3、JavaScript ）表格，bordercolorlight，frame，valign，rowspan，colspan——喵喵画网页
表格 表格 表格标记 表格标记-语法 表格属性设置 表格边框样式属性 表格单元格间距、单元格边距属性 表格水平对齐 设置表格行的属性 表格行的属性-设置 设置单元格的属性 设置单元格的属性-单元格跨行、列 表格嵌套课后练习网页标题：计算机报... [详细]赞
踩
- 作者：ManishChampaneriGolang可视化库sciter这是来自sciter网站的几句话，sciter桌面UI开发带来了一系列网页技术。网页设计者和开发者可以复用他们的经验和专长来构建看起来现代的桌面应用。多种多样的GUI框架... [详细]
赞
踩
- 面试必备八股文！内容包含：Java基础、Java框架、Git命令、JVM、多线程、消息队列、微服务、Linux、数据库、Redis缓存、算法、Vue、React、前端性能优化等八股文。面试HTML框架八股文十问十答第一期面试HTML框架八股... [详细]
赞
踩
炫酷登录注册界面【超级简单jQuery+JS+HTML+CSS】_html登录页面代码html登录页面代码一：源码获取这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面，这里我将源码资源分享给大家，大家可以直接免费下载使用哦，没有... [详细]赞
踩
- 嗨，朋友们！准备好开始一段令人兴奋的数字冒险吗？让我们从HTML的神秘世界开始吧。HTML，或者说超文本标记语言，不仅仅是编程的一种语言，它更像是网页的魔法咒语。每当你在网上冲浪，浏览各种炫酷的网站时，其实你正在经历HTML的魔法。《HTM... [详细]
赞
踩
- 现在，想象你在为一款新产品制作介绍页面。你想要清晰地展示产品的名称、特点和用户评价。DOCTYPEhtml>
超级充电宝<body><h<em>2</em>>超级充电宝<p>这款<strong>超级充电宝可以在短短30分钟... <a title="《HTML 简易速速上手小册》第2章：HTML 的标签和元素（2024 最新版）" href="/blog/article/detail/44550" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="【HTML 基础】元素和标签" href="/blog/article/detail/44564" target="_blank">【<em>HTML</em> <em>基础</em>】<em>元素</em>和<em>标签</em></a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; ">这只是<em>HTML</em>中一小部分常见<em>标签</em>的介绍。了解这些<em>基础</em><em>标签</em>是构建网页的第一步。随着你深入学习，你将发现<em>HTML</em>提供了丰富的<em>标签</em>，用于定义文档的结构、内容和样式。继续学习<em>HTML</em>，打造令人印象深刻的Web页面吧！【<em>HTML</em><em>基础</em>】<em>元素</em>和<em>标签</em>文章目... <a title="【HTML 基础】元素和标签" href="/blog/article/detail/44564" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="HTML — 样式 CSS" href="/blog/article/detail/44567" target="_blank"><em>HTML</em> — 样式 <em>CSS</em></a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; "><em>CSS</em>是从<em>HTML</em>4开始使用的，是为了更好的渲染<em>HTML</em>元素而引入的。<em>HTML</em>—样式<em>CSS</em>一.使用 <em>CSS</em>是从<em>HTML</em>4开始使用的，是为了更好的渲染<em>HTML</em>元素而引入的。 ... <a title="HTML — 样式 CSS" href="/blog/article/detail/44567" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="http:/222.212.79/app/zscd.html,emscripten/src/shell.html at 1.29.12 · emscripten-core/emscripten · G..." href="/blog/article/detail/46259" target="_blank"><em>http</em>:/222.2<em>12</em>.79/app/<em>zscd</em>.<em>html</em>,<em>emscripten</em>/src/shell.<em>html</em> at <em>1.29</em>.<em>12</em> · <em>emscripten</em>-core/<em>emscripten</em> · G...</a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; ">version="1.1"id="Layer_1"x="0px"y="0px"width="296px"height="78px"viewBox="420<em>12</em>0100170"enable-background="new00900400"xm... <a title="http:/222.212.79/app/zscd.html,emscripten/src/shell.html at 1.29.12 · emscripten-core/emscripten · G..." href="/blog/article/detail/46259" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="HTML-表单" href="/blog/article/detail/47688" target="_blank"><em>HTML</em>-<em>表单</em></a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; ">概念：一个包含交互的区域，用于收集用户提供的数据。示例代码：2.常用<em>表单</em>控件1.文本输入框2.密码输入框3.单选框4.复选框5.下拉框6.隐藏域7.提交按钮8.重置按钮9.普通按钮10.文本域3.禁用<em>表单</em>控件给<em>表单</em>控件的标签设置disabl... <a title="HTML-表单" href="/blog/article/detail/47688" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="HTML-CSS笔记_0424_,~ghj dyuouup" href="/blog/article/detail/48522" target="_blank"><em>HTML</em>-<em>CSS</em>笔记<em>_</em>0424<em>_</em>,~<em>ghj</em> <em>dyuouup</em></a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; ">2、文档声明3、注释和标签属性4、实体5、meta便签5、语义化标签6、语义化标签7、语义化标签8、list标签9、超链接10、相对路径11、超链接12、images图片标签13、内联框架14、音频播放<em>CSS</em>二、<em>CSS</em>基础1、<em>CSS</em>简介外部... <a title="HTML-CSS笔记_0424_,~ghj dyuouup" href="/blog/article/detail/48522" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="2018-04-21-linux-sources-list html-url、隐藏滚动条_s36ncqqh.xyz" href="/blog/article/detail/48608" target="_blank">2018-04-21-<em>linux</em>-<em>sources</em>-<em>list</em> <em>html</em>-url、隐藏滚动条_<em>s36ncqqh</em>.xyz</a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; ">titlelayoutcategoriestagsexcerptKaliLinux之软件安装、卸载、更新和修改更新源postLinuxLinux安装软件Linux更新源Linux系统软件安装、卸载、更新与修改更新源使用Linux系统，与Wi... <a title="2018-04-21-linux-sources-list html-url、隐藏滚动条_s36ncqqh.xyz" href="/blog/article/detail/48608" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页" href="/blog/article/detail/49178" target="_blank">[<em>HTML</em>]Web<em>前端开发</em>技术12（<em>HTML</em>5、<em>CSS3</em>、<em>JavaScript</em> ）——喵喵画<em>网页</em></a></h2></div><div class="NewsInfo"><div class="NewsImg"><a title="[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页" href="/blog/article/detail/49178" target="_blank"><img width="120" height="70" alt="[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页" src="https://csdnimg.cn/release/cmsfe/public/img/lazyLogo2.1882d7f4.png"></a></div><div class="NewsDesc" style="width: 100%; "><em>网页</em>标题：三列自适应宽度<em>网页</em>标题：多行三列自适应宽度一级水平导航菜单：采用“无序列表+超链接”设计[<em>HTML</em>]Web<em>前端开发</em>技术12（<em>HTML</em>5、<em>CSS3</em>、<em>JavaScript</em>）——喵喵画<em>网页</em>希望你开心，希望你健康，希望你幸福，希望你点赞！... <a title="[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页" href="/blog/article/detail/49178" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="html 随机验证码" href="/blog/article/detail/54501" target="_blank"><em>html</em> 随机<em>验证码</em></a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; "><!DOCTYPE<em>html</em>><<em>html</em>lang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.... <a title="html 随机验证码" href="/blog/article/detail/54501" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="HTML+CSS+JS生成随机验证码_html随机生成验证码" href="/blog/article/detail/54510" target="_blank">HTML+CSS+JS<em>生成</em><em>随机</em><em>验证码</em>_<em>html</em><em>随机</em><em>生成</em><em>验证码</em></a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; ">昨天在小破站看到一个前端<em>生成</em><em>随机</em><em>验证码</em>的视频，感觉很有意思，就跟着操作了一下，成功了。后来自己又想给它加一个提交按钮，输入并判断<em>验证码</em>的正确性，也可以正常运行，但是我的代码好像还是存在一些bug：1.canvas标签是绘图容器，自带属性使它... <a title="HTML+CSS+JS生成随机验证码_html随机生成验证码" href="/blog/article/detail/54510" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="Web前端-html 5—CANVAS随机验证码_html中验证码的标签" href="/blog/article/detail/54511" target="_blank"><em>Web</em>前端-<em>html</em> <em>5</em>—<em>CANVAS</em><em>随机</em><em>验证码</em>_<em>html</em>中<em>验证码</em>的标签</a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; "><!DOCTYPE<em>html</em>><<em>html</em>lang="en"><head><metacharset="UTF-8"><title><em>随机</em><em>验证码</em>
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
