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

        练手小项目，利用html+css+javascript实现编年史（静态网站），其中利用less（一门向后兼容的 CSS 扩展语言）编写样式，在css文件夹下生成css文件

目录

项目结构

项目代码

js文件夹：

css文件夹：

html文件：

项目运行效果

 项目总结

---

项目结构

        

 

项目代码

js文件夹：

        （1）main.js

const boxs = document.querySelectorAll('.box')
    window.addEventListener('scroll', function () {
      const triggerBottom = window.innerHeight / 5 * 4

      boxs.forEach(box => {
        const boxTop = box.getBoundingClientRect().top

        if (boxTop < triggerBottom) {
          box.classList.add('show')
        } else {
          box.classList.remove('show')
        }
      });
    })

        (2)pw_common.js

// 1. 选择tab栏，选中的tab栏底色变为红色，其余不变（排他）
    // 1.1 获取元素
    var tab_list = document.querySelector('tab_list');
    var lis = document.querySelectorAll('li');
    console.log(lis);
    var items = document.getElementsByClassName('item');
    // 1.2 for循环绑定点击事件
    for(var i=0;i<lis.length;i++) {
      lis[i].setAttribute('index',i);
      lis[i].onclick = function() {
        // 其余的li清除
        for(var i=0;i<lis.length;i++) {
          lis[i].className = '';
        }
        // 保留自己
        this.className = 'current';
        // 2. 下面内容区域显示对应的内容
        var index = this.getAttribute('index');
        console.log(index);
        // console.log(index);
        // 排他，其他的都不显示
        for(var i=0;i<items.length;i++) {
          items[i].style.display = 'none';
        }
        items[index].style.display = 'block';
      }
    }

 

css文件夹：

        (1)common.css

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style:none;
}

h1{
  font-family: 'Jurassic Park',sans-serif;
  font-size: 90px;
  color: #F89034;
  text-align: center;
  word-spacing:30px;
}
li,a,p,textarea,h3,small{
  color: #F89034;
}

        (2)index.css

body {
  background: url(../images/background/bg.png) no-repeat;
  background-size: 100% 110%;
  background-attachment: fixed;
}
h1 {
  width: 800px;
  margin: auto;
  margin-top: 170px;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 55px;
}
.box .content_l {
  cursor: pointer;
  width: 400px;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
}
.box .content_l a {
  color: #F89034;
}
.box .content_l a img {
  width: 300px;
}
.box .content_r {
  cursor: pointer;
  width: 400px;
  margin-left: 45px;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  color: #F89034;
}
.box .content_r a {
  color: #F89034;
}
.box .content_r a img {
  width: 300px;
}
audio {
  display: inline-block;
  margin-top: 80px;
  width: 100px;
  height: 50px;
  background: transparent;
}

        (3)main_park.css

body {
  background: url(../images/background/bg_park.webp);
  background-size: 100% 100%;
  background-attachment: fixed;
  font-family: 'Roboto', sans-serif;
  display: flex;
  /* 排列方式为垂直 */
  flex-direction: column;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  margin: 0;
  /* 隐藏在x方向的上溢出的内容 */
  overflow-x: hidden;
}
h1 {
  margin: 10px;
}
a {
  font-size: larger;
  color: #F89034;
}
.box {
  background-color: steelblue;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 600px;
  height: 600px;
  margin: 10px;
  border-radius: 10px;
  /* 阴影 */
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
  /* 沿x轴方向移动 */
  transform: translateX(400%);
  /* 动画前的过渡 */
  transition: transform 0.4s ease;
}
.box img {
  width: 600px;
  height: 600px;
}
.box .box:nth-of-type(even) {
  transform: translateX(-400%);
}
.box.show {
  transform: translateX(0);
}

        (4)main_world.css

body {
  background: url(../images/background/bg_world.webp);
  background-size: 100% 100%;
  background-attachment: fixed;
  font-family: 'Roboto', sans-serif;
  display: flex;
  /* 排列方式为垂直 */
  flex-direction: column;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  margin: 0;
  /* 隐藏在x方向的上溢出的内容 */
  overflow-x: hidden;
}
h1 {
  margin: 10px;
}
a {
  font-size: larger;
  color: #F89034;
}
.box {
  background-color: steelblue;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 600px;
  height: 600px;
  margin: 10px;
  border-radius: 10px;
  /* 阴影 */
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
  /* 沿x轴方向移动 */
  transform: translateX(400%);
  /* 动画前的过渡 */
  transition: transform 0.4s ease;
}
.box img {
  width: 600px;
  height: 600px;
}
.box .box:nth-of-type(even) {
  transform: translateX(-400%);
}
.box.show {
  transform: translateX(0);
}

        (5)park1.css 

body {
  background: url(../images/background/bg_park1.jpg);
  background-size: 100% 100%;
  background-attachment: fixed;
}

        (6)park2.css 

body {
  background: url(../images/background/bg_park2.jpg);
  background-size: 100% 100%;
  background-attachment: fixed;
}

        (7)park3.css 

body {
  background: url(../images/background/bg_park3.webp);
  background-size: 100% 100%;
  background-attachment: fixed;
}

        (8)world1.css 

body {
  background: url(../images/background/bg_world1.webp);
  background-size: 100% 100%;
  background-attachment: fixed;
}

        (9)world2.css 

body {
  background: url(../images/background/bg_world2.jpg);
  background-size: 100% 100%;
  background-attachment: fixed;
}

        (10)world3.css 

body {
  background: url(../images/background/bg_world3.webp);
  background-size: 100% 100%;
  background-attachment: fixed;
}

        (11)pw_common.css

.pw {
  position: relative;
}
.pw .icon img {
  position: absolute;
  right: 38px;
  width: 250px;
  height: 125px;
}
.pw .tab {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 160px;
  left: 160px;
  width: 1120px;
  height: 500px;
  background-size: cover;
}
.pw .tab .tab_list {
  margin-left: 70px;
  width: 1200px;
}
.pw .tab .tab_list li {
  float: left;
  height: 39px;
  line-height: 39px;
  padding: 0 80px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
}
.pw .tab .tab_list .current {
  background-color: #c81623;
  color: #fff;
}
.pw .tab .item {
  display: none;
}
.pw .tab .tab_con {
  width: 1120px;
  height: 500px;
  margin-left: 70px;
}
.pw .tab .tab_con video {
  width: 900px;
  height: 500px;
  margin-left: 100px;
  margin-top: 15px;
}
.pw .tab .tab_con p {
  margin-top: 15px;
  text-indent: 2em;
  font-size: 24px;
}
.pw .tab .tab_con .item:nth-child(3) img {
  width: 600px;
  height: 500px;
}
.pw .tab .tab_con .item:nth-child(3) #park1_director {
  width: 500px;
  height: 500px;
  background: transparent;
  text-decoration: 2em;
  font-size: 24px;
}
.pw .tab .tab_con .item:nth-child(4) {
  width: 1120px;
  height: 500px;
  overflow: hidden;
  overflow-y: scroll;
}
.pw .tab .tab_con .item:nth-child(4) img {
  width: 135px;
}
.pw .tab .tab_con .item:nth-child(4) span {
  float: left;
  margin-left: 140px;
  margin-top: -180px;
}
.pw .tab .tab_con .item:nth-child(4) div {
  margin-top: 15px;
}

html文件：

(1)index.html

<!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>《侏罗纪公园》&《侏罗纪世界》编年史</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="shortcut icon" href="./images/icon/park.pngicon.png" type="image/x-icon">
</head>

<body>
</body>
<h1>Welcome to the Jurassic world</h1>
<div class="box">
  <div class="content_l">
    <a href="./main_park.html"><img src="./images/icon/park.png"><br>进入侏罗纪公园</a>
  </div>
  <div class="content_r">
    <a href="./main_world.html"><img src="./images/icon/world.png"><br>进入侏罗纪世界</a>
  </div>
</div>
<audio src="./music/John Williams - Theme From Jurassic Park (Jurassic Park _ Soundtrack Version).ogg" autoplay
  controls></audio>

</html>

(2)main_park.html

<!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>侏罗纪公园编年史</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/main_park.css">
  <link rel="shortcut icon" href="./images/icon/park.png" type="image/x-icon">
</head>
<h1>侏罗纪公园编年史</h1>
<a href="./index.html">返回主页面</a>
<div class="box">
  <a href="./park_1.html">
    <img src="./images/poster/park1_poster.webp" alt="">
  </a>
</div>
<div class="box">
  <a href="./park_2.html">
    <img src="./images/poster/park2_poster.webp" alt="">
  </a>
</div>
<div class="box">
  <a href="./park_3.html">
    <img src="./images/poster/park3_poster.webp" alt="">
  </a>
</div>

<script src="./js/main.js"></script>

<body>

</body>

</html>

(3)main_world.html

<!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>侏罗纪世界编年史</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/main_world.css">
  <link rel="shortcut icon" href="./images/icon/world.png" type="image/x-icon">
</head>

<body>
  <h1>侏罗纪世界编年史</h1>
  <a href="./index.html">返回主页面</a>
  <div class="box">
    <a href="./world_1.html">
      <img src="./images/poster/world1_poster.webp" alt="">
    </a>
  </div>
  <div class="box">
    <a href="./world_2.html">
      <img src="./images/poster/world2_poster.webp" alt="">
    </a>
  </div>
  <div class="box">
    <a href="./word_3.html">
      <img src="./images/poster/world3_poster.webp" alt="">
    </a>
  </div>

  <script src="./js/main.js"></script>
</body>

</html>

(4)park_1.html

<!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>唐纳德是一名律师，电影中被哈蒙德称作“吝啬鬼律师”，负责考察评估侏罗纪公园的安全指数，在看到恐龙被复活后，马上打起利用恐龙赚钱发财的念头。</p>
            </span>
          </div>
          <div>
            <img src="./images/performer/吴博士.png" alt="">
            <span>
              <h3>吴博士</h3>
              <small>演员 黄荣亮</small>
              <p>亨利·吴是公司的主要遗传工程师，负责恐龙的培育繁殖。是未来恐龙制作的重要人物</p>
            </span>
          </div>
          <div>
            <img src="./images/performer/丹尼斯.png" 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>
          <hr>
        </div>
        <div class="item">
          <video src="./video/movie_music.mp4" autoplay controls muted></video>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/pw_common.js"></script>
</body>

</html>

(5)park_2.html

<!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>侏罗纪公园2:失落的世界</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/pw_common.css">
  <link rel="stylesheet" href="./css/park2.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/park2.mp4" autoplay controls muted></video>
        </div>
        <div class="item">
          <p>
            《侏罗纪公园2：失落的世界》是第一部《侏罗纪公园》的续集，由史蒂文·斯皮尔伯格继续执导，杰夫·高布伦、朱丽安·摩尔、皮特·波斯尔思韦特等联袂出演，影片于1997年5月23日在美国上映
          </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/马尔科姆2.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>基因公司的新人CEO，将约翰·哈蒙德赶出了公司，开发了重启侏罗纪公园的计划，极度贪婪，并雇佣了大批人员，前往桑纳岛捕获恐龙活体。最终死在暴龙的嘴下。</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/哈蒙德2.jpg" alt="">
            <span>
              <h3>约翰·哈蒙德</h3>
              <small>演员 理查德·阿滕伯勒</small>
              <p>因侏罗纪公园的事件，被基因公司解除首席执行官，本集派出科研小组去索纳岛作恐龙研究和保护，影片结局接受电视采访。此时他已经成为一个博物学家，而不是继续作为一个实业家。</p>
            </span>
          </div>
        </div>
        <div class="item">
          <video src="./video/movie_music.mp4" autoplay controls muted></video>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/pw_common.js"></script>
</body>

</html>

(6)park_3.html

<!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>侏罗纪公园3</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/pw_common.css">
  <link rel="stylesheet" href="./css/park3.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/park3.mp4" autoplay controls muted></video>
        </div>
        <div class="item">
          <p>
            《侏罗纪公园3》是一部于2001年上映的美国科幻冒险片，是《侏罗纪公园》系列的第三部作品，也是该系列中唯一一部既不是由斯蒂芬·斯皮尔伯格导演，亦非根据迈克尔·克莱顿所著小说改编的电影，不过片中有部分场景来源于克莱顿的原著小说《侏罗纪公园》和《失落的世界》。
          </p>
          <p>
            由乔·庄斯顿执导，山姆·尼尔、威廉姆·H·梅西、劳拉·邓恩、蒂娅·里欧妮等联袂出演，于2001年7月18日在美国上映
            该片讲述了一对离婚夫妇用计把亚伦·格兰特博士骗来桑纳岛上帮助他们寻找到自己的儿子。
          </p>
        </div>
        <div class="item">
          <img src="./images/performer/park3_director.jpg" alt="">
          <textarea id="park1_director" cols="30" rows="10" disabled>
    乔·庄斯顿 Joe Johnston
    性别: 男
    星座: 金牛座
    出生日期: 1950年05月13日
    出生地: 美国,得克萨斯州沃思堡
    职业: 导演 / 演员 / 视觉特效 / 制片人
    乔·庄斯顿刚入行就担任《星球大战》系列电影的视觉特效艺术总监，并于1981年以《夺宝奇兵》一片赢得奥斯卡奖最佳视觉特效奖，他在参与该片的续集《魔域奇兵》的制作之后，大导演乔治·卢卡斯建议他就读南加大电影系，他于一年后休学，执导迪士尼电影公司的卖座巨片《亲爱的，我把孩子变小了》，该片也让他成为影史第一位首度执导电影就缔造超过一亿美元票房成绩的导演。他的作品还有《火箭专家》、《勇敢者的游戏》、《十月的天空》、《侏罗纪公园3》、《大漠雄风》以及《狼人》。

          </textarea>
        </div>
        <div class="item">
          <div>
            <img src="./images/performer/格兰特2.jpg" alt="">
            <span>
              <h3>格兰特博士</h3>
              <small>演员 山姆·尼尔</small>
              <p>一名恐龙研究博士，迫于筹集研究的基金，被迫登上桑纳岛，帮助一对夫妇寻找失踪的儿子，在岛上逃避了一系列的“恐龙”危险，最终被美国海军陆战队营救下来。</p>
            </span>
          </div>
          <div>
            <img src="./images/performer/保罗.jpg" alt="">
            <span>
              <h3>保罗·柯比</h3>
              <small>演员 威廉姆·H·梅西</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>
        <div class="item">
          <video src="./video/movie_music.mp4" autoplay controls muted></video>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/pw_common.js"></script>
</body>

</html>

(7)world_1.html

<!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>侏罗纪世界</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/pw_common.css">
  <link rel="stylesheet" href="./css/world1.css">
  <link rel="shortcut icon" href="./images/icon/world.png" type="image/x-icon">
</head>

<body>
  <div class="pw">
    <div class="icon">
      <a href="./main_world.html" title="返回">
        <img src="./images/icon/world.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/world1.mp4" autoplay controls muted></video>
        </div>
        <div class="item">
          <p>
            《侏罗纪世界》（Jurassic
            World）是环球影业、传奇影业出品的一部科幻冒险电影，为《侏罗纪公园》系列第四部，由科林·特莱沃若执导，克里斯·帕拉特、布莱丝·达拉斯·霍华德、尼克·罗宾森等主演，2015年6月10日于在中国大陆上映
          </p>
          <p>
            《侏罗纪世界》讲述驯龙师欧文在纳布拉尔岛上的恐龙主题公园中与迅猛龙们打成一片，并意外发生了一些事故和故事。
          </p>
        </div>
        <div class="item">
          <img src="./images/performer/world1_director.jpg" alt="">
          <textarea id="park1_director" cols="30" rows="10" disabled>
    科林·特雷沃罗（Colin Trevorrow），1976年9月13日出生于美国加利福尼亚州旧金山，美国导演、编剧、制作人，毕业于纽约大学艺术学院。
    2002年，执导个人首部短片《Home Base》。2005年，执导喜剧电影《Gary: Under Crisis》。2012年，由其执导的科幻喜剧电影《安全无保障》上映  ，该片入围第28届圣丹斯电影节评审团大奖、第28届美国独立精神奖最佳处女作奖  ，他凭借该片入围第25届芝加哥影评人协会奖最具潜力导演奖  。2015年，执导科幻冒险电影《侏罗纪世界》。2017年，执导惊悚电影《亨利之书 。2018年，担任编剧的电影《侏罗纪世界2》上映 。2019年，执导科幻短片《大石之战》。

          </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>
                企业家，亿万富翁。他买下了约翰·哈蒙德博士一手建立起“侏罗纪公园”以及附属的国际基因科技公司InGen；并且在公园运营进入日常后授权克莱尔制造混血恐龙。最终在驾驶直升机追赶狂暴龙的时候被翼龙将直升机击落，坠机而死。
              </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>演员 B·D·王（黄荣亮）</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>Diabolus
                Rex恐龙，又称恶魔暴龙、暴虐龙，它是人类对大自然傲慢和不敬的化身，结合树蛙、霸王龙、迅猛龙、蛇、乌贼的DNA，这种超级掠食者能与周围的环境伪装成一体，有霸王龙的破坏性力量和迅猛龙的匿踪能力和狡诈，还能通过交流操纵迅猛龙。终在霸王龙和迅猛龙的联手攻击之下落败，被沧龙拖入水中。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/霸王龙.jpg" alt="">
            <span>
              <h3>霸王龙</h3>
              <small>演员 无</small>
              <p>侏罗纪公园1里面的那只霸王龙，时隔22年后再次出场。年纪虽然已经很大了，但仍然威风不减当年。曾经杀死过两只迅猛龙，而本片当中则在迅猛龙帮助之下成功击败了混血恐龙狂暴龙。</p>
            </span>
          </div>
        </div>
        <div class="item">
          <video src="./video/movie_music.mp4" autoplay controls muted></video>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/pw_common.js"></script>
</body>

</html>

(8)world_2.html

<!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>侏罗纪世界2:失落的世界</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/pw_common.css">
  <link rel="stylesheet" href="./css/world2.css">
  <link rel="shortcut icon" href="./images/icon/world.png" type="image/x-icon">
</head>

<body>
  <div class="pw">
    <div class="icon">
      <a href="./main_world.html" title="返回">
        <img src="./images/icon/world.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/world2.mp4" autoplay controls muted></video>
        </div>
        <div class="item">
          <p>
            《侏罗纪世界2》是胡安·安东尼奥·巴亚纳执导，克里斯·帕拉特、布莱丝·达拉斯·霍华德等主演的科幻片，于2018年6月15日在中国大陆上映；2018年6月22日在北美上映
          </p>
          <p>
            该片讲述了努布拉岛上的休眠火山开始活跃，欧文与克莱尔重返努布拉岛，拯救岛上幸存的恐龙，却落入黑心商人布下的陷阱，欧文等人粉碎黑心商人阴谋的故事
          </p>
        </div>
        <div class="item">
          <img src="./images/performer/world2_director.jpg" alt="">
          <textarea id="park1_director" cols="30" rows="10" disabled>
    胡安·安东尼奥·巴亚纳（Juan Antonio Bayona），1975年5月9日出生于西班牙巴塞罗那，西班牙导演、编剧、制片人，毕业于ESCAC。
    1999年，执导个人首部短片《My Holidays》。2002年，自编自导短片 《El hombre Esponja。2004年，担任短片《Sonorama》的导演。2007年，执导个人首部长片《孤堡惊情》，他凭借该片获得第22届西班牙戈雅奖最佳新晋导演奖。2008年，在纪录片《Cinemacat.cat》中出镜。2012年，凭借灾难电影《海啸奇迹》获得第27届西班牙戈雅奖-最佳导演奖。2016年，凭借奇幻电影《当怪物来敲门》获得第31届西班牙戈雅奖-最佳导演奖。2017年，担任惊悚电影《马柔本宅秘事》的制作人。2018年，执导科幻动作电影《侏罗纪世界2。

          </textarea>
        </div>
        <div class="item">
          <div>
            <img src="./images/performer/欧文2.jpg" alt="">
            <span>
              <h3>欧文·格雷迪</h3>
              <small>演员 克里斯·帕拉特</small>
              <p>
                退伍军人，在上一部中负责训练迅猛龙。侏罗纪世界关门后，他一直过着平静的生活。克莱尔邀请他加入救援队。他开始持拒绝态度，后来得知自己训练的迅猛龙布鲁还活着的消息，训练迅猛龙的回忆使他改变了主意。他选择重返侏罗纪世界，拯救岛上的部分恐龙。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/克莱尔2.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/肯.png" alt="">
            <span>
              <h3>肯·惠特利</h3>
              <small>演员 泰德·拉文</small>
              <p>
                他是米尔斯军事救援与恐龙采集小组的负责人，而且是按照与克莱尔和欧文不同的指令在进行任务的，他实际暗中协助米尔斯进行犯罪的勾当。在克莱尔的小组迅速定位并找到布鲁和其他许多恐龙以后，他们的阴谋就被聚焦了。喜爱收集恐龙的牙齿，却在企图拔掉暴虐迅猛龙牙齿之时被戏耍，最终被杀死。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/伊莱.png" alt="">
            <span>
              <h3>伊莱·米尔斯</h3>
              <small>演员 拉菲·斯波</small>
              <p>
                本杰明·洛克伍德的助手，负责执行努布拉岛的救援计划。实际上他早已背叛洛克伍德。而计划的真正目的是将部分恐龙拿到黑市上拍卖。他还指示吴博士研究出暴虐迅猛龙。他请来克莱尔等人并欺骗他们上岛的目的则是获取迅猛龙布鲁。计划得逞后又把他们丢弃在岛上。最终诡计失败，他也被霸王龙吞噬。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/亨利吴2.jpg" alt="">
            <span>
              <h3>亨利·吴</h3>
              <small>演员 黄荣亮</small>
              <p>基因学家，和米尔斯合作继续制造新型恐龙。为了维护自己的权威反对米尔斯拍卖尚不成熟的实验品暴虐迅猛龙，最后被富兰克林偷袭但获救。</p>
            </span>
          </div>
          <div>
            <img src="./images/performer/暴虐迅猛龙.png" alt="">
            <span>
              <h3>暴虐迅猛龙</h3>
              <small>演员 无</small>
              <p>
                吴博士利用迅猛龙和狂暴龙的基因设计创造出来的新种恐龙，形态怪异，全身为深黑色，从脖子到尾部的两侧有着金黄色的条纹，与狂暴龙一样是集凶猛和机智于一身的人造怪物恐龙。头部形状与狂暴龙相似，在眼眶周围还有红色斑点。最后败于迅猛龙布鲁。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/blue.jpg" alt="">
            <span>
              <h3>迅猛龙布鲁</h3>
              <small>演员 无</small>
              <p>欧文驯养的迅猛龙的首领，身体两侧从头到尾都有蓝色条纹。布鲁是努布拉岛仅存的迅猛龙，火山爆发后，受伤的布鲁被雇佣军从小岛运到城市中。在救下欧文一行人并消灭暴虐迅猛龙后，离开欧文来到了底特律。</p>
            </span>
          </div>
        </div>
        <div class="item">
          <video src="./video/movie_music.mp4" autoplay controls muted></video>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/pw_common.js"></script>
</body>

</html>

(9)world_3.html

<!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>侏罗纪世界3</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/pw_common.css">
  <link rel="stylesheet" href="./css/world3.css">
  <link rel="shortcut icon" href="./images/icon/world.png" type="image/x-icon">
</head>

<body>
  <div class="pw">
    <div class="icon">
      <a href="./main_world.html" title="返回">
        <img src="./images/icon/world.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/world3.mp4" autoplay controls muted></video>
        </div>
        <div class="item">
          <p>
            《侏罗纪世界3》是由环球影业出品，科林·特雷沃罗执导，克里斯·帕拉特、布莱丝·达拉斯·霍华德、山姆·尼尔、劳拉·邓恩等主演的科幻片。该片于2022年6月1日在韩国首映，2022年6月10日在美国与中国内地上映，2022年8月18日在腾讯视频上线。
          </p>
          <p>
            该片讲述了侏罗纪公园纳布拉尔岛火山爆发的四年后，恐龙在世界各地与人类共同生活、共同捕猎。这一脆弱的平衡将重塑未来，并最终决定人类能否在这颗与史上最可怕生物共享的星球上继续站在食物链的顶端的故事。
          </p>
        </div>
        <div class="item">
          <img src="./images/performer/world1_director.jpg" alt="">
          <textarea id="park1_director" cols="30" rows="10" disabled>
    科林·特雷沃罗（Colin Trevorrow），1976年9月13日出生于美国加利福尼亚州旧金山，美国导演、编剧、制作人，毕业于纽约大学艺术学院。
    2002年，执导个人首部短片《Home Base》。2005年，执导喜剧电影《Gary: Under Crisis》。2012年，由其执导的科幻喜剧电影《安全无保障》上映  ，该片入围第28届圣丹斯电影节评审团大奖、第28届美国独立精神奖最佳处女作奖  ，他凭借该片入围第25届芝加哥影评人协会奖最具潜力导演奖  。2015年，执导科幻冒险电影《侏罗纪世界》。2017年，执导惊悚电影《亨利之书 。2018年，担任编剧的电影《侏罗纪世界2》上映 。2019年，执导科幻短片《大石之战》。

          </textarea>
        </div>
        <div class="item">
          <div>
            <img src="./images/performer/欧文3.jpg" alt="">
            <span>
              <h3>欧文·格雷迪</h3>
              <small>演员 克里斯·帕拉特</small>
              <p>
                退伍军人，在经历过洛克伍德庄园事件之后，他和女友克莱尔一起成为梅茜的监护人。他们搬到森林边缘的木屋里，过着半隐居生活，欧文也会展示他的“训龙”技术，帮助人类和恐龙和睦相处。在梅茜以及小迅猛龙贝塔被绑架后，他远赴马耳他查询他们的下落，并与恐龙黑市驯养的野蛮盗龙展开一段惊心动魄的追逐战。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/格兰特3.jpg" alt="">
            <span>
              <h3>艾伦·格兰特</h3>
              <small>演员 萨姆·尼尔</small>
              <p>
                考古学家，顶级恐龙专家，堪称古生物学领域的最高权威。尽管恐龙已经走入人类世界，但格兰特博士和他的团队还是致力于化石的发掘和研究。他接受了艾丽·塞特勒的邀请，一起调查史前蝗虫的危机，为此，他们来到道奇森的恐龙研究基地，与久违了的马尔科姆汇合。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/克莱尔2.jpg" alt="">
            <span>
              <h3>克莱尔·迪尔林</h3>
              <small>演员 布莱丝·达拉斯·霍华德</small>
              <p>
                曾经是侏罗纪世界主题公园的高管，后来致力于恐龙保护。在恐龙融入现代世界后，她也为人类能与恐龙和谐共处而四处奔波，同时还要和欧文一起照顾成为孤儿的梅茜。不久，梅茜被不明武装人员绑架，为了寻找梅茜，他和欧文·格雷迪一起踏上出征的路途。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/塞特勒2.jpg" alt="">
            <span>
              <h3>艾丽·塞特勒</h3>
              <small>演员 劳拉·邓恩</small>
              <p>
                植物学家，格兰特博士的好友，他们同样都酷爱考古和发掘化石。她调查一群可能摧毁整个世界种植园的巨型蝗虫，于是找到格兰特博士，寻求他的帮助。艾丽怀疑幕后黑手是道奇森所执掌的公司，于是前去调查，在那里和克莱尔、欧文一行汇合，携手共同应对危机。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/马尔科姆3.jpg" alt="">
            <span>
              <h3>伊恩·马尔科姆</h3>
              <small>演员 杰夫·高布伦</small>
              <p>
                数学家，他是个乐天派，风趣幽默。他加盟了道奇森的BioSyn公司，成为了这里讲师及高管。他发现了道奇森的野心和计划，他选择潜伏在这家生物合成公司，暗中帮助艾伦·格兰特和艾丽·塞特勒调查蝗灾。在南方巨兽龙出现后，他沉着应对，协助同伴脱险。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/刘易斯.jpg" alt="">
            <span>
              <h3>刘易斯·道奇森</h3>
              <small>演员 坎贝尔·斯科特</small>
              <p>
                BioSyn基因公司的首席CEO，同时也是第一代侏罗纪公园毁灭的幕后元凶。他的野心也随着权利的的增加而膨胀，妄想利用变异蝗虫控制全世界的粮食供给，最后阴谋暴露，在最后的绝望中，道奇森试图销毁他仍然保存在实验室的蝗虫，但蝗虫仍旧逃跑了，还烧毁了整个森林，而大势已去的道奇森也被双脊龙吃掉，得到应有下场。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/梅茜2.jpg" alt="">
            <span>
              <h3>梅茜·洛克伍德</h3>
              <small>演员 伊莎贝拉·瑟蒙</small>
              <p>
                洛克伍德事件之后，她和克莱尔、欧文一起隐居在丛林边缘的木屋，很少和外界接触。克隆人的身份让她很苦恼，为此和克莱尔常有口角，直到她和小迅猛龙贝塔一起被神秘组织绑架。在吴博士口中，她得知了自己真正的身份，梅茜放出小迅猛龙，还遇到从消毒室出来的艾伦和艾丽两名博士，他们在一起，要逃出恐龙控制的区域。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/凯拉.png" alt="">
            <span>
              <h3>凯拉·沃茨</h3>
              <small>演员 德汪达·怀斯</small>
              <p>
                前空军飞行员，后来被道奇森招募，从事非法运输。她在马耳他结识了克莱尔，决定帮助对方找回梅茜。她驾机带克莱尔和欧文潜入道奇森的地盘，但飞机被翼龙摧毁，坠机后，她和欧文又遭遇到了火盗龙的袭击。最后，她驾驶一架直升机协助众人安全撤离。
              </p>
            </span>
          </div>
          <div>
            <img src="./images/performer/亨利吴3.jpg" alt="">
            <span>
              <h3>亨利·吴</h3>
              <small>演员 黄荣亮</small>
              <p>
                原侏罗纪公园的工程师，负责恐龙的培育繁殖。后来他研发出多种混血恐龙，因此名声大噪，成为一些别有用心野心家拼命拉拢和重金收买的对象。道奇森雇佣他负责培养变异蝗虫，而亨利·吴也开始良心发现，开始反思自己之前的行为，最后为了全世界的粮食安全透露了道奇森的计划。
              </p>
            </span>
          </div>
        </div>
        <div class="item">
          <video src="./video/movie_music.mp4" autoplay controls muted></video>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/pw_common.js"></script>
</body>

</html>

项目运行效果

(1)点击logo即进入对应的编年史，左下角可以听侏罗纪的主题曲

 （2）此处利用了滚动动画，向下滚动逐渐出现海报，点击返回主页面即可返回主页

（3）每部曲的模板相同，点击右上角logo可以返回上一页，点击tab栏即可切换查看对应的内容

 

 项目总结

        整个项目没有难度，这也是当初初学的时候写的，稍微的修改了一下，很适合练手。