HTML静态网页作业——电影介绍-你的名字 5页 无js 带音乐
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 1.HTML代码
- 2.CSS代码
- 三、个人总结
- 四、更多干货
一、网页介绍
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>电影 介绍</title><link rel="stylesheet" type="text/css" href="css/index.css" /><link rel="stylesheet" type="text/css" href="css/head.css" /><link rel="stylesheet" type="text/css" href="css/bottom.css" /></head><body><div id="header"><div id="header_con"><p id="logo">电影鉴赏</p><audio id="musicfx" loop="loop" autoplay="autoplay"><source src="./yy.mp3" type="audio/mpeg" id="hhh"></audio><ul><li><a href="index.html">首页</a></li><li><a href="index2.html">你的名字</a></li><li><a href="index3.html">你好世界</a></li><li><a href="index4.html">天气之子</a></li><li><a href="index5.html">帮助反馈</a></li></ul></div></div><div id="content"><div id="content-top"><h3>电影推荐</h3><div class="nr"><div class="img-nr"><img src="img/ndmz.jpg"></div><div class="nr-text"><h4>《 你的名字 》</h4><p>《你的名字》是由新海诚执导，由神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影。作品于2016年8月26日在日本上映。中国内地于2016年12月2日上映。作品讲述了男女高中生在梦中相遇，并寻找彼此的故事。中国大陆于2017年8月26日全网首播。</p><button type="button"><a href="index2.html">GO!</a></button></div></div><div class="nr"><div class="img-nr"><img src="img/nhsj.jpg"></div><div class="nr-text"><h4>《 你好世界 》</h4><p>《你好世界》是由伊藤智彦执导的原创动画电影，北村匠海、松坂桃李、滨边美波、子安武人等人参与配音。影片以2027年的日本京都为舞台，讲述了16岁的高中生直实为了拯救爱人瑠璃而卷入了现实与虚拟交织的记忆世界故事。该片于2019年9月20日在日本上映，2021年6月11日在中国大陆上映。</p><button type="button"><a href="index3.html">GO!</a></button></div></div><div class="nr"><div class="img-nr"><img src="img/tqzj.jpg"></div><div class="nr-text"><h4>《 天气之子 》</h4><p>《天气之子》是由新海诚执导、Comix WaveFilm负责制作的原创动画电影，该片讲述了少年帆高与拥有操控天气超能力的少女阳菜之间的奇幻爱情故事。影片于2019年7月19日在日本上映，中国香港由安乐影片代理，于2019年8月8日上映；中国台湾由车库娱乐代理，于2019年9月12日上映；中国内地由华夏电影引进，于2019年11月1日上映；中国大陆于2020年7月21日全网首播。</p><button type="button"><a href="index4.html">GO!</a></button></div></div></div></div><div id="bottom"><p>xxxxxxx</p><p>xxxxxxxxxxxxxxxxxxxxx</p></div></body>
</html>2.CSS代码
*{padding: 0;margin: 0;
}
ul{list-style: none;
}
a{text-decoration: none;
}
#logo{font-size: 32px;line-height: 70px;float: left;font-family: "楷体";font-weight: bold;cursor: pointer;color: #333333;
}
#header{height: 70px;background-color: #fff;
}
#header_con{width: 1200px;margin: auto;
}
#header_con ul{float: right;
}
#header_con ul li{display: inline-block;line-height: 70px;padding-right: 30px;
}
#header_con ul li a{color: #333;font-size: 18px;
}
#header_con ul li a:hover{color: #00508A;font-weight: bold;
}三、个人总结
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
四、更多干货
1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。
2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习交流
HTML静态网页作业——电影介绍-你的名字 5页 无js 带音乐相关推荐
- 大学生影视主题网页制作 银翼杀手2049电影网页设计模板 学生静态网页作业成品 dreamweaver电影HTML网站制作
银翼杀手2049电影网页设计制作 知识点应用 作品介绍 网页成品效果预览 HTML代码预览 导航代码 图片列表代码 作品源地址 知识点应用 DIV CSS布局.网页背景图片.网页背景音乐.图片列表.字 ...
- DW静态网页设计与制作 JavaScript大作业 HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
HTML静态网页作业--海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
- web前端大作业`电影介绍网站设计——电影资讯博客(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 dreamweaver作业静态HTML网页设计模板
HTML5期末大作业:电影介绍网站设计--电影资讯博客(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业 ...
- 用DIV+CSS技术设计的个人电影网站-web前端网页制作课作业---电影介绍 5页
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素| ...
- HTML静态网页作业——基于html+css+javascript+jquery+bootstarp响应式成都家乡介绍网页...
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- HTML静态网页作业——基于html+css+javascript+jquery+bootstarp响应式成都家乡介绍网页
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- HTML静态网页作业——关于我的家乡介绍安庆景点
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- 大学生家乡主题甘肃介绍网页代码 dreamweaver网页设计作业制作 WEB静态网页作业模板 dw个人网页作业成品
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- 一种非常简单的静态网页生成方法介绍
一.目前的静态页生成方法有简单的模板替换.常见的ASP+FSO等,这里给大家介绍一种更简单的方法.原理就是借助XMLHTTP对象获取目标页面的源代码,然后写入到静态网页文件中.代码如下: Code D ...
最新文章
- python 解析xml
- JS 设计模式 四（单例）
- 1.6 多项式回归-机器学习笔记-斯坦福吴恩达教授
- matlab找数据的转账点,nodejs开发EOS转账服务的两种方案
- MyBatis——@Result注解column参数传递多个参数
- 使用tensoflow serving来部署模型推理节点
- qdialog 只有点击才能获得焦点_4 个突破点，让你的 Banner 点击率提升10倍
- 【杂谈】excel列表创建后，怎么删除蓝色边框线？
- Java 最常见的 200+ 面试题：面试必备
- MDM-WIFI(QCA9377,QCA6174)
- 思科网络技术学院教程：企业中的路由和交换技术简介第十章实验总结
- Redis布隆过滤器和布谷鸟过滤器
- vue之使用vue-video-player实现实时视频流播放
- css缩2个字,首行缩排2字元怎么设定 css
- 012_SSS_ Improving Diffusion Model Efficiency Through Patching
- IOS NDDictionary使用中value遇到no summary如何判断为NULL
- Git 切换分支的命令
- 驰骋BPM工作流后台常用接口与前台常用方法
- ASP.NET Core中的环境Development、Staging、Production
- 手机客户端添加设备时需要扫描二维码，如何查找二维码