【免费】自制《侏罗纪公园》&《侏罗纪世界》编年史（Html+CSS+JavaScript）

共119个文件

jpg：57个

webp：11个

css：11个

需积分: 0 67 浏览量更新于2023-05-31 收藏 167.53MB ZIP 举报

《侏罗纪公园》与《侏罗纪世界》是深受全球观众喜爱的科幻电影系列，以其惊险刺激的恐龙世界和先进的生物技术吸引了无数粉丝。本项目通过利用HTML、CSS和JavaScript这三种核心技术，构建了一个关于这两部电影的编年史网站，旨在为爱好者提供一个互动的平台，重温电影中的经典场景和故事。 HTML（HyperText Markup Language）是网页内容的基石，用于定义页面结构。在这个项目中，HTML文件可能包含了各种元素，如标题、段落、图像、链接等，用于展示电影的相关信息，如角色介绍、剧情梗概、时间线等。开发者可能会使用`<header>`、`<nav>`、`<main>`、`<article>`和`<footer>`等语义化标签，以提高页面的可读性和可访问性。 CSS（Cascading Style Sheets）负责网页的样式和布局。开发者可能使用CSS来定制页面的颜色、字体、布局和响应式设计，确保在不同设备上都能呈现出良好的视觉效果。例如，使用媒体查询（@media rule）实现不同屏幕尺寸下的适配，使用Flexbox或Grid进行灵活的布局管理。此外，为了重现电影的氛围，可能还会应用自定义背景图片、动画效果和过渡效果。 JavaScript是实现网页交互的关键，让静态的HTML和CSS页面变得生动起来。在这个项目中，JavaScript可能被用来实现以下功能： 1. 导航菜单的动态效果：例如，当用户悬停在导航链接上时，可以显示下拉菜单或者改变链接颜色。 2. 图片滑块或轮播图：展示电影海报或剧照，用户可以通过点击或滑动切换图片。 3. 时间线交互：用户可以点击某个事件节点，弹出详细信息窗口，或者动画滑动到对应的年代。 4. 影片预告片播放：嵌入视频播放器，允许用户在线观看预告片。 5. 恐龙数据库：创建一个可搜索的恐龙列表，用户可以根据名称、特征等筛选和查看恐龙信息。此外，项目中可能还使用了JavaScript库或框架，如jQuery简化DOM操作，或者React、Vue.js等现代前端框架构建更复杂的用户界面。这个项目结合了HTML、CSS和JavaScript的基础知识，以及响应式设计和交互式元素的实现，展示了如何利用Web技术创建一个主题丰富的在线编年史。对于学习Web开发的初学者来说，这是一个很好的实践案例，可以深入理解这些技术如何协同工作，创建引人入胜的用户体验。同时，对于《侏罗纪公园》和《侏罗纪世界》的粉丝来说，这个网站提供了一种新的方式来探索和享受这个充满魅力的电影宇宙。

收起资源包目录

自制《侏罗纪公园》&《侏罗纪世界》编年史（Html+CSS+JavaScript）（119个子文件）

pw_common.css 1KB

main_world.css 1005B

main_park.css 1004B

index.css 834B

common.css 267B

world3.css 127B

world1.css 127B

world2.css 126B

park3.css 126B

park2.css 125B

park1.css 125B

park_1.html 9KB

world_3.html 9KB

park_2.html 8KB

world_2.html 8KB

world_1.html 8KB

park_3.html 5KB

main_world.html 993B

index.html 968B

main_park.html 951B

bg_world2.jpg 2.35MB

11.jpg 525KB

park1_director.jpg 175KB

bg_park1.jpg 105KB

world2_director.jpg 86KB

暴虐霸王龙.jpg 66KB

bg_park2.jpg 65KB

哈蒙德2.jpg 57KB

梅茜2.jpg 55KB

park3_director.jpg 49KB

马尔科姆.jpg 48KB

world1_director.jpg 45KB

罗兰.jpg 44KB

亨利吴3.jpg 38KB

保罗.jpg 38KB

罗伯特.jpg 38KB

唐纳德.jpg 37KB

克莱尔3.jpg 37KB

格兰特3.jpg 36KB

扎克.jpg 35KB

阿曼达.jpg 34KB

哈蒙德.jpg 33KB

刘易斯.jpg 33KB

丽克斯.jpg 32KB

blue.jpg 31KB

莎拉.jpg 30KB

马尔科姆3.jpg 29KB

梅茜.jpg 29KB

蒂姆.jpg 29KB

克莱尔.jpg 29KB

欧文.jpg 28KB

马尔科姆2.jpg 27KB

欧文3.jpg 26KB

塞特勒2.jpg 24KB

尼克.jpg 23KB

亨利吴.jpg 23KB

格雷.jpg 21KB

迪特尔.jpg 19KB

比利.jpg 18KB

西蒙.jpg 18KB

本杰明.jpg 18KB

霸王龙.jpg 18KB

格兰特2.jpg 17KB

凯利.jpg 17KB

格兰特.jpg 15KB

彼得.jpg 13KB

巴里.jpg 13KB

霍斯金斯.jpg 13KB

亨利吴2.jpg 12KB

埃瑞克.jpg 12KB

塞特勒.jpg 12KB

罗伊.jpg 11KB

欧文2.jpg 9KB

克莱尔2.jpg 8KB

阿杰.jpg 4KB

埃迪.jpg 4KB

朱尼托.jpg 4KB

pw_common.js 991B

main.js 408B

pw_common.less 1KB

main_world.less 1KB

main_park.less 1KB

index.less 887B

park1.less 132B

world1.less 129B

park3.less 129B

world3.less 129B

world2.less 128B

park2.less 128B

world3.mp4 51.59MB

park2.mp4 35.58MB

world2.mp4 33.92MB

movie_music.mp4 20.74MB

world1.mp4 7.55MB

park3.mp4 6.26MB

park1.mp4 2.43MB

John Williams - Theme From Jurassic Park (Jurassic Park _ Soundtrack Version).ogg 2.15MB

park.png 1.15MB

凯拉.png 793KB

icon.png 518KB

共 119 条

资源推荐

资源预览

资源评论

<!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"> <title>侏罗纪公园1</title> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/pw_common.css"> <link rel="stylesheet" href="./css/park1.css"> <link rel="shortcut icon" href="./images/icon/park.png" type="image/x-icon"> </head> <body> <div class="pw"> <div class="icon"> <a href="./main_park.html" title="返回"> <img src="./images/icon/park.png" alt=""> </a> </div> <div class="tab"> <div class="tab_list"> <ul> <li class="current">电影宣传</li> <li>电影详情</li> <li>电影导演</li> <li>电影演员</li> <li>电影插曲</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"> <video src="./video/park1.mp4" autoplay controls muted></video> </div> <div class="item"> <p> 《侏罗纪公园》（Jurassic Park）是一部1993年的科幻冒险电影，改编自迈克尔·克莱顿于1990年发表的同名小说，由史蒂文·斯皮尔伯格执导，环球电影公司出品，萨姆·尼尔、劳拉·邓恩、杰夫·高布伦主演，于1993年6月11日年美国上映 </p> <p> 影片主要讲述了哈蒙德博士立志要建立一个非同寻常的公园：恐龙将是这个公园的主角。他把众多科学家收归旗下，利用琥珀里面困住的远古蚊子体内的血液，提取出恐龙的基因信息，利用这些信息培育繁殖恐龙。结果如愿以偿，他把努布拉岛建立成了一个恐龙公园，坚信可以从中赚取大钱。然而，科学家们则忧心忡忡。不幸的事情果然发生了。虽然公园有电脑系统管理，但却因为被员工破坏而造成了无法挽救的失控：所有的恐龙逃出了控制区，人们纷纷逃窜却逃不过恐龙的魔爪。恐龙自相残杀，人们亦死难无数，最后幸存者寥寥。努布拉岛上空弥漫着恐怖的气息 </p> </div> <div class="item"> <img src="./images/performer/park1_director.jpg" alt=""> <textarea id="park1_director" cols="30" rows="10" disabled> 史蒂文·斯皮尔伯格（Steven Allan Spielberg），1946年12月18日出生于美国俄亥俄州辛辛那提市，美籍犹太裔导演、编剧、制片人。 1974年，完成了个人首部电影长片《横冲直撞大逃亡》。1975年，执导了惊悚电影《大白鲨》，凭借该片获得了第33届美国电影电视金球奖电影类-最佳导演提名。1981年6月12日，拍摄的动作冒险电影《夺宝奇兵》上映。1982年6月11日，执导的科幻家庭电影《外星人E.T.》上映，凭借该片获得了第40届美国电影电视金球奖电影类-最佳导演提名。1985年12月18日，执导的剧情片《紫色》上映。1993年6月11日，拍摄的科幻冒险电影《侏罗纪公园》上映；11月30日，执导的战争电影《辛德勒的名单》上映，凭借该片获得了第51届美国电影电视金球奖电影类-最佳导演和第66届奥斯卡金像奖最佳导演奖。1998年7月24日，拍摄的战争电影《拯救大兵瑞恩》上映，凭借该片获得了第56届美国电影电视金球奖电影类-最佳导演和第71届奥斯卡金像奖最佳导演奖。2002年6月21日，执导的科幻悬疑电影《少数派报告》上映，由此获得了第29届土星奖最佳导演奖。2005年12月23日，拍摄的惊悚电影《慕尼黑》上映。2009年1月12日，获得了第66届美国电影电视金球奖终身成就奖。 2012年11月16日，拍摄的传记电影《林肯》上映。2015年10月16日，执导的传记电影《间谍之桥》上映。2018年3月26日，拍摄的科幻冒险片《头号玩家》首映。2019年10月3日，执导的电影《西区故事》杀青。 2022年11月，荣获第73届柏林电影节金熊奖 </textarea> </div> <div class="item"> <div> <img src="./images/performer/哈蒙德.jpg" alt=""> <span> <h3>约翰·哈蒙德</h3> <small>演员理查德·阿滕伯勒</small> <p>侏罗纪公园的创始者，曾资助过格兰特博士的化石发掘，立志建立一个非比寻常的公园，从蚊子血中提取出恐龙基因，克隆恐龙。</p> </span> </div> <div> <img src="./images/performer/格兰特.jpg" alt=""> <span> <h3>格兰特博士</h3> <small>演员萨姆·尼尔</small> <p>资深考古学家，致力于古生物学，不怎么喜欢小孩子，在蒙大拿有一个化石发掘场，对恐龙有着狂热的好奇心。</p> </span> </div> <div> <img src="./images/performer/塞特勒.jpg" alt=""> <span> <h3>塞特勒博士</h3> <small>演员劳拉·邓恩</small> <p>植物学家，对大自然有着无与伦比的热爱。对古植物了如指掌，是葛兰特博士的老搭档，在公园遭遇灾难的时候，勇敢的挺身而出。</p> </span> </div> <div> <img src="./images/performer/马尔科姆.jpg" alt=""> <span> <h3>马尔科姆博士</h3> <small>演员杰夫·高布伦</small> <p>数学家（伊恩是一个数学家，专攻数学中称之为“混沌理论的一个分支”），对于宇宙万物都有自己的一番见解。幽默、性格开朗</p> </span> </div> <div> <img src="./images/performer/丽克斯.jpg" alt=""> <span> <h3>丽克斯</h3> <small>演员阿丽亚娜·理查兹</small> <p>哈蒙德的孙女，带着弟弟蒂姆来努布拉岛度假游览，性格比较文静，她是个电脑软件方面的天才，正是她修复的公园的安保和通讯系统。</p> </span> </div> <div> <img src="./images/performer/蒂姆.jpg" alt=""> <span> <h3>蒂姆</h3> <small>演员约瑟夫·梅泽罗</small> <p>哈蒙德的孙子，和姐姐丽克斯来努布拉岛度假游览，性格比较开朗，她是个冒险的迷，比较爱看格兰特博士所著的书籍。</p> </span> </div> <div> <img src="./images/performer/罗伊.jpg" alt=""> <span> <h3>罗伊·阿默德</h3> <small>演员理查德·阿滕伯勒</small> <p>受雇于哈蒙德，总是叼着香烟，他是公园的管理人。能够控制整个公园的安全保卫系统</p> </span> </div> <div> <img src="./images/performer/罗伯特.jpg" alt=""> <span> <h3>罗伯特·马尔登</h3> <small>演员鲍勃·佩克</small> <p>罗伯特是一个有经验的猎手，能熟练的使用各种枪械，哈蒙德聘用他做公园的管理员，最后在和迅猛龙斗智斗力的过程中，还是不敌这些猛禽。</p> </span> </div> <div> <img src="./images/performer/唐纳德.jpg" alt=""> <span> <h3>唐纳德·金纳罗</h3> <small>演员马丁·费雷罗</small> <p>唐纳德是一名律师，电影中被哈蒙德称作“吝啬鬼律师”，负责考察评�