HTML环球影城

def UBR_info(name):
    if name == 'panda':
        data = {
            'title': '功夫熊猫盖世之地',
            'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/panda.png',
            'describe': '功夫熊猫的世界意境深远，亦包罗万象。当你步入这个世外桃源般的古老之地，'
                        '便会发现这里是一个融合了自然与匠心之美的传说之境，更是一个能让你放下杂念，'
                        '感悟自然的敬畏之地。',
            'play': [
                {'project': '神龙大侠之旅',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/panda_1.png',
                 'introduce': '阿宝不小心打翻了装有天煞灵魂的瓮盒，邪恶的天煞因此重回人间，他发誓要找神龙大侠和盖世五侠报仇，而你是否有勇气与阿宝站在一起，帮助他们去对抗危险的“功夫大师”呢？'},
                {'project': '阿宝功夫训练营',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/panda_2.png',
                 'introduce': '如果你也想成为一名功夫大侠，那么你可以在英雄节那天来到熊猫村，向神龙大侠本尊讨教几招功夫！'},
                {'project': '炫转武侠',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/panda_3.png',
                 'introduce': '在炫转武侠中，每一个骑乘造型，都是经过海狸大师精雕细琢的艺术品。而你可以选择心目中最喜欢的那位大侠，与他一起，随着音乐的律动开启一段美妙的炫转之旅！'},
                {'project': '灯影传奇',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/panda_4.png',
                 'introduce': '在和平山谷，你总能看到许多大小不一、颜色各异的灯笼，其中最为壮观的当属灯影传奇之中那12盏大型花灯。这12盏花灯，是村民们为了纪念历史上12位伟大的功夫大侠而精心制作的！'}
            ],
        }
    elif name == 'harrypotter':
        data = {
            'title': '哈利·波特的魔法世界',
            'image':'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/harrypotter.png',
            'describe': '将平凡的世界抛诸脑后，前往霍格沃茨™城堡探寻魔法秘境，'
                        '精彩纷呈的游乐设施与层出不穷的神奇冒险，'
                        '将一步步带领你进入惊险刺激的魔法世界！',
            'play': [
                {'project': '哈利·波特与禁忌之旅™',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/harrypotter_1.png',
                 'introduce': '在霍格沃茨™魔法学校的走廊和教室之间穿梭前进，在城堡的上空上下翻飞，跟随哈利·波特™和他的朋友们经历一场永生难忘的奇幻魔法之旅！'},
                {'project': '鹰马飞行™',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/harrypotter_2.png',
                 'introduce': '让海格™来教授你与鹰马亲近的正确方式吧！和家人一起，坐在由柳条编成的鹰马背上来进行一场飞行训练，在空中盘旋、俯冲，飞越过海格™的小木屋，感受无限精彩！'},
                {'project': '青蛙合唱团',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/harrypotter_3.png',
                 'introduce': '用青蛙担任伴奏？在魔法世界没有什么不可能！一起来欣赏这支由霍格沃茨™学生和青蛙组成的合唱团所带来的美妙演出。'},
                {'project': '霍格沃茨™特快列车长',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/harrypotter_4.png',
                 'introduce': '初次到访哈利·波特™的魔法世界，这里的一切可能会让你觉得有些眼花缭乱。不过没关系，在霍格沃茨™特快列车站附近寻找我们的列车长，他将十分乐意为你详细介绍一下魔法世界。'}
            ],
        }
    elif name == 'minions':
        data = {
            'title': '小黄人乐园',
            'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/minions.png',
            'describe': '欢迎来到照明娱乐的小黄人乐园，这是一个充满欢乐的缤纷世界！'
                        '此刻这些调皮的小黄人正在街区、港口和市中心走街串巷，无拘无束地满世界撒欢！',
            'play': [
                {'project': '神偷奶爸小黄人闹翻天',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/minions_1.png',
                 'introduce': '捣蛋大军欢迎你！当你走进格鲁家，一定要留意脚下，否则一不小心就会被卷入小黄人“训练营”。随着身体慢慢“缩小”、“变色”，紧接着一场惊喜不断的冒险之旅将就此开启！'},
                {'project': '萌转过山车',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/minions_2.png',
                 'introduce': '翻转，欢呼！在萌转过山车你将收获一份独特的体验！与家人一起在欢乐与尖叫中，穿过超级萌乐生物的大嘴，在“千翻百转”之中，体验无限趣味！'},
                {'project': '欢乐好声音巡演',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/minions_3.png',
                 'introduce': '一定不要错过充满活力的《欢乐好声音》巡演，这可是一场无论男女老少都会为之“疯狂”的音乐剧演出！你不仅可以看到喜欢的“超级明星”角色，还可以与他们一起放声高歌，尽情欢唱。'},
                {'project': '小黄人见面会',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/minions_4.png',
                 'introduce': '在超级萌乐岛的中央，你会发现一群来自照明娱乐的小黄人。一定不要害羞，融入其中与他们来一张萌萌哒的合影吧！对了，在拍照时可不要喊“茄子”，记得要喊小黄人的最爱—“BANANA” ！'}
            ],
        }
    elif name == 'transformer':
        data = {
            'title': '变形金刚基地',
            'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/transformer.png',
            'describe': '欢迎来到变形⾦刚基地！这座极具赛博坦⻛格的基地，'
                        '由⼀个城市⼤⼩的变形⾦刚变身⽽成，准备好了吗？'
                        '赶快加⼊北京巢⽳部队，与汽⻋⼈⼀起并肩作战，对抗霸天⻁，保护地球吧！',
            'play': [
                {'project': '霸天虎过山车',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/transformer_1.png',
                 'introduce': '对于每一位特工而言，霸天虎过山车的任务将是一个千载难逢的机会！因为你将进入到利钻魔的体内，一定要小心行动，要知道任何一个错误的动作，都有可能唤醒这个巨大的机械生物。'},
                {'project': '火种源争夺战™',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/transformer_2.png',
                 'introduce': '特工们，邪恶的霸天虎正谋划着从汽车人手中抢夺最后一块火种源！赶紧跳上由变形金刚Evac变成的隐形运输机器人，与擎天柱一起为保护火种源而战吧！'},
                {'project': '大黄蜂回旋机',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/transformer_3.png',
                 'introduce': '为了尽快完成迷你金刚在医疗中心的旋转测试工作，救护车请来了大黄蜂作为帮手，但是他有点小粗心，需要你的支援，赶快跳上一辆迷你金刚，帮大黄蜂一起完成任务吧！'},
                {'project': '传奇现场',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/transformer_4.png',
                 'introduce': '每当变形金刚要去执行任务时，便会乘坐人员补给升降梯来到地面。如果你想见到喜欢的汽车人，那么电梯附近将是一个很好的邂逅地点！但你也要注意，迎接你的也可能是霸天虎中的一员。'}
            ],
        }
    elif name == 'hollywood':
        data = {
            'title': '好莱坞',
            'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/hollywood.png',
            'describe': '在闪耀的灯光中，走在星光熠熠的街道上，开启一段激动人心的好莱坞之旅吧！漫步于高大的棕榈树之间，徜徉在好莱坞经典的场景之中，在这里你将能感受浮华之城的无穷魅力！',
            'play': [
                {'project': '影棚',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/hollywood_1.png',
                 'introduce': '灯光，摄像，开拍！如果你想亲身参与到一部大制作的特效电影的幕后过程，那就赶快进入影棚之中，跟随我们的两位特别嘉宾开启一段惊心动魄的电影特效之旅吧！'},
                {'project': '梅尔斯餐厅',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/hollywood_2.png',
                 'introduce': '行走在好莱坞景区里，就像漫步于回忆的长廊。如果你感到些许疲惫，那不如来到梅尔斯餐厅，在这里稍作休息，享受一下经典双层芝士汉堡，川香鸡肉三明治，然后再开启下一段旅程！'},
                {'project': '暗房',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/hollywood_3.png',
                 'introduce': '这个外观酷似40年代好莱坞标志性照相机商店的暗房，是供游客享受拍照服务后，领取照片的地点。不管是开怀大笑，或是惊声尖叫，你都可以在这里找到在各个景点留下的精彩瞬间。'},
                {'project': '落霞餐厅',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/hollywood_4.png',
                 'introduce': '落霞餐厅有着好莱坞黄金时代的种种缩影，步入餐厅大堂，首先映入眼帘的便是那热情的西班牙复兴风格的装饰，而接踵而至的美食将会不断惊艳你的味蕾，令你无法自拔！'}
            ],
        }
    elif name == 'waterworld':
        data = {
            'title': '未来水世界',
            'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/waterworld.png',
            'describe': '在未来水世界，你将观看一场环球影城首屈一指的水上爆破特技表演！'
                        '从水上摩托艇极速俯冲的惊险特技，到飞机触目惊心的坠毁现场，'
                        '你将零距离感受扣人心弦的生死搏斗带来的逼真体验。',
            'play': [
                {'project': '未来水世界特技表演',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/waterworld_1.png',
                 'introduce': '在未来水世界，你将观看一场环球影城首屈一指的水上爆破特技表演！从水上摩托艇极速俯冲的惊险特技，到飞机触目惊心的坠毁现场，你将零距离感受扣人心弦的生死搏斗带来的逼真体验。'},
                {'project': '流浪节拍',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/waterworld_2.png',
                 'introduce': '跟随节奏律动！精彩的打击乐表演，在水世界门口，欢乐的节奏，总能吸引众多人驻足聆听，有趣的剧情表演，极具特色的牛仔装扮，洒脱、激情、魅力绽放。'},
                {'project': '漂流者小馆',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/waterworld_3.png',
                 'introduce': '充满智慧的岛民们通过收集那些漂浮在海面上的碎片和过去的文明遗迹，在干地上搭建起了一座别具特色的餐厅——漂流者小馆。'}
            ],
        }
    elif name == 'jurassic':
        data = {
            'title': '侏罗纪世界努布拉岛',
            'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/jurassic.png',
            'describe': '6500万年前的侏罗纪时代终于再度重现，当你步入那扇标志性的侏罗纪世界之门，'
                        '便能看到充满未知的热带雨林，壮观的瀑布与神秘的潟湖，'
                        '当然…还有那些被“唤醒”重现的史前恐龙！',
            'play': [
                {'project': '飞越侏罗纪',
                 'image':'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/jurassic_1.png',
                 'introduce': '登上“飞越侏罗纪”的自驱式滑翔机，飞翔在侏罗纪世界努布拉岛的天空之中，以翼龙的视角俯瞰整个大地的旷世风景，体验一种新奇难忘的冒险方式！'},
                {'project': '奇遇迅猛龙',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/jurassic_2.png',
                 'introduce': '现在，侏罗纪世界努布拉岛隆重推出面向勇敢探险家的恐龙互动体验！你将有机会参与其中，近距离接触一只真正的迅猛龙。但要注意，这些家伙是既凶猛，又十分聪明的掠食者！'},
                {'project': '侏罗纪世界大冒险',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/jurassic_3.png',
                 'introduce': '乘坐着全地形豪华自动系统（ATLAS），进入侏罗纪世界努布拉岛的核心区域，在充满未知的热带荒野中，与你喜爱的恐龙近距离接触，开启一场惊心动魄的侏罗纪世界大冒险吧！'},
                {'project': '琥珀岭餐厅',
                 'image': 'https://ybc-online.fbcontent.cn/ada-ide-application/resource/ybc-park/image/jurassic_4.png',
                 'introduce': '琥珀岭自助餐厅位于侏罗纪世界努布拉岛的火山之间，粗旷的火山岩石墙面上，点缀着晶莹的琥珀石。在室内或者露台选择一个位置，这里的氛围将瞬间带你回到侏罗纪时代！'}
            ],
        }

    else:
        return '请输入正确的景区名称'

    return data

from flask import Flask, render_template
from ybc_park import UBR_info

app = Flask(__name__)

# 首页路由
@app.route('/')
def index():
    return render_template('index.html')

# 景点介绍页路由
@app.route('/<name>')
def detail(name):
    # 获取景点数据，并保存在变量info中
    info = UBR_info(name)
    # 将数据传输到模板页面
    return render_template('detail.html', info = info)

以上为python部分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="../static/css/panda.css" >
</head>
<body>
    <div align="center" id="center">
        <div class="header-container">
            <!-- 头部banner -->
            <div class="banner-container">
                <div class="nav-container">
                    <a href="/" class="back-btn">
                        <img class="arrow">
                    </a>
                    <img class="logo">
                </div>
            </div>

user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>YBC游乐场</title>
    <link rel="stylesheet" href="../static/css/index.css" >
</head>
<body>
    <div align="center" id="center">
        <!-- 头部banner -->
        <div class="banner-container">
            <div class="nav-container">
                <img src="../static/image/white-logo.png" class="logo">
            </div>
            <!-- 概述 -->
            <div class="overview-container">
                <img src="../static/image/index_img.png" class="overview-img">
                <h1 class="overview-title">
                    北京环球度假区
                </h1>
                <p class="overview-text">
                    北京环球度假区是一个广受欢迎的主题公园旅游目的地，以全新精选景区为主打，网罗全世界环球主题公园人气最高的娱乐设施和景点。
                </p>
            </div>
        </div>

以上为HTML部分。

html,body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
#center {
    width: 100%;
    min-width: 950px;
    color: #fff;
}
.header-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/harrypotter_bg1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner-container {
    width: 100%;
    height: 840px;
    background-image: url('https://show.ybccode.com/common_static/ybc-park/harrypotter_banner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.nav-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 60%;
    padding: 30px 0 2px;
    text-align: left;
}
.back-btn {
    width: 28px;
    height: 28px;
    cursor: pointer;
    margin-right: 10px;
}
.arrow {
    width: 28px;
    height: 28px;
    content: url('../image/black-arrow.png');
}
.logo {
    display: inline-block;
    width: 316px;
    height: 49px;
    content: url('../image/black-logo.png');
}
.overview-title {
    font-size: 50px;
    font-weight: 700;
    margin: 20px 0 0;
}
.overview-img {
    width: 900px;
}
.overview-text {
    width: 52%;
    font-size: 28px;
    padding: 25px 0 60px;
    margin: 0;
}
.intro-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/harrypotter_bg2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: 160px;
}
.intro-headline {
    width: 300px;
    margin: 70px 0;
    content: url('https://show.ybccode.com/common_static/ybc-park/product_2.png');
}
.intro-box {
    margin-bottom: 228px;
}
.intro-box:nth-of-type(1) {
    margin-bottom: 130px;
}
.intro-box:nth-of-type(2) {
    margin-bottom: 130px;
}
.intro-box:nth-last-of-type(1) {
    margin-bottom: 0;
}
.intro-box:nth-child(odd) .img-list {
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(even) .img-list {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(odd) .intro-img {
    margin-right: 35px;
}
.intro-box:nth-child(even) .intro-img {
    margin-left: 35px;
}
.intro-img {
    display: inline-block;
    width: 610px;
}
.intro-box:nth-child(odd) .intro-text-box {
    margin-left: 35px;
}
.intro-box:nth-child(even) .intro-text-box {
    margin-right: 35px;
}
.intro-text-box {
    width: 30%;
    text-align: left;
}
.intro-title {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 28px;
}
.intro-article {
    font-size: 22px;
    margin: 0;
}
@media(max-width: 1440px) {
    .banner-container {
        width: 100%;
        height: 480px;
    }
    .nav-container {
        padding: 16px 0;
    }
    .back-btn {
        width: 18px;
        height: 18px;
    }
    .back-btn img {
        width: 18px;
        height: 18px;
    }
    .logo {
        width: 236px;
        height: 38px;
    }
    .overview-title {
        font-size: 40px;
        line-height: 53px;
    }
    .overview-img {
        width: 720px;
    }
    .overview-text {
        width: 66%;
        font-size: 20px;
        padding: 25px 0 53px;
    }
    .intro-headline {
        width: 230px;
        margin: 60px 0 70px;
    }
    .intro-box:nth-child(odd) .intro-img {
        margin-right: 20px;
    }
    .intro-box:nth-child(even) .intro-img {
        margin-left: 20px;
    }
    .intro-img {
        display: inline-block;
        width: 488px;
    }
    .intro-box:nth-child(odd) .intro-text-box {
        margin-left: 20px;
    }
    .intro-box:nth-child(even) .intro-text-box {
        margin-right: 20px;
    }
    .intro-title {
        font-size: 30px;
    }
    .intro-article {
        font-size: 14px;
    }
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
#center {
    width: 100%;
    min-width: 950px;
    color: #000;
}
.header-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/hollywood_bg1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner-container {
    width: 100%;
    height: 840px;
    background-image: url('https://show.ybccode.com/common_static/ybc-park/hollywood_banner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.nav-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 60%;
    padding: 30px 0 2px;
    text-align: left;
}
.back-btn {
    width: 28px;
    height: 28px;
    cursor: pointer;
    margin-right: 10px;
}
.arrow {
    width: 28px;
    height: 28px;
    content: url('../image/black-arrow.png');
}
.logo {
    display: inline-block;
    width: 316px;
    height: 49px;
    content: url('../image/black-logo.png');
}
.overview-title {
    font-size: 50px;
    font-weight: 700;
    margin: 20px 0 0;
}
.overview-img {
    width: 900px;
}
.overview-text {
    width: 52%;
    font-size: 28px;
    padding: 25px 0 60px;
    margin: 0;
}
.intro-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/hollywood_bg2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: 160px;
}
.intro-headline {
    width: 300px;
    margin: 70px 0;
    content: url('https://show.ybccode.com/common_static/ybc-park/product_7.png');
}
.intro-box {
    margin-bottom: 228px;
}
.intro-box:nth-of-type(1) {
    margin-bottom: 130px;
}
.intro-box:nth-of-type(2) {
    margin-bottom: 130px;
}
.intro-box:nth-last-of-type(1) {
    margin-bottom: 0;
}
.intro-box:nth-child(odd) .img-list {
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(even) .img-list {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(odd) .intro-img {
    margin-right: 35px;
}
.intro-box:nth-child(even) .intro-img {
    margin-left: 35px;
}
.intro-img {
    display: inline-block;
    width: 610px;
}
.intro-box:nth-child(odd) .intro-text-box {
    margin-left: 35px;
}
.intro-box:nth-child(even) .intro-text-box {
    margin-right: 35px;
}
.intro-text-box {
    width: 30%;
    text-align: left;
}
.intro-title {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 28px;
}
.intro-article {
    font-size: 22px;
    margin: 0;
}
@media(max-width: 1440px) {
    .banner-container {
        width: 100%;
        height: 480px;
    }
    .nav-container {
        padding: 16px 0;
    }
    .back-btn {
        width: 18px;
        height: 18px;
    }
    .back-btn img {
        width: 18px;
        height: 18px;
    }
    .logo {
        width: 236px;
        height: 38px;
    }
    .overview-title {
        font-size: 40px;
        line-height: 53px;
    }
    .overview-img {
        width: 720px;
    }
    .overview-text {
        width: 66%;
        font-size: 20px;
        padding: 25px 0 53px;
    }
    .intro-headline {
        width: 230px;
        margin: 60px 0 70px;
    }
    .intro-box:nth-child(odd) .intro-img {
        margin-right: 20px;
    }
    .intro-box:nth-child(even) .intro-img {
        margin-left: 20px;
    }
    .intro-img {
        display: inline-block;
        width: 488px;
    }
    .intro-box:nth-child(odd) .intro-text-box {
        margin-left: 20px;
    }
    .intro-box:nth-child(even) .intro-text-box {
        margin-right: 20px;
    }
    .intro-title {
        font-size: 30px;
    }
    .intro-article {
        font-size: 14px;
    }
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
#center {
    width: 100%;
    height: 100%;
    min-width: 1100px;
    min-height: 1276px;
    background: url('../image/index_bg2.png') no-repeat;
    background-size: 100% 100%;
}
.banner-container {
    width: 100%;
    background: url('../image/index_bg1.png') no-repeat;
    background-size: 100% 100%;
    padding-bottom: 80px;
}
.nav-container {
    width: 60%;
    padding: 30px 0 2px;
    text-align: left;
    margin-bottom: 27px;
}
.logo {
    width: 316px;
    height: 49px;
}
.overview-container {
    color: #fff;
}
.overview-img {
    width: 200px;
    height: 107px;
    margin-bottom: 10px;
}
.overview-title {
    font-weight: 700;
    font-size: 38px;
    margin: 0 0 20px;
}
.overview-text {
    width: 50%;
    font-size: 24px;
    line-height: 30px;
    margin: 0;
}
.preview-container {
    height: auto;
    min-height: 684.59px;
    padding-top: 50px
}
.map-container {
    width: 1000px;
    height: 644.6px;
    background: url('../image/map_bg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.map-boby {
    width: 940px;
    height: 589.7px;
}
.map-boby img {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.map-icon {
    position: absolute;
    cursor: pointer;
}
@keyframes scale {
    to {
        transform: scale(1.2);
    }
}
.map-icon:hover {
    animation: scale 0.5s 1;
    animation-fill-mode: forwards
}
.minions {
    right: 32%;
    bottom: 16%;
}
.harrypotter {
    right: 17%;
    bottom: 42%;
}
.transformer {
    left: 18%;
    top: 17%;
}
.panda {
    left: 45%;
    top: 10%;
}
.jurassic {
    left: 44%;
    top: 42%;
}
.waterworld {
    right: 20%;
    top: 10%;
}
.hollywood {
    left: 36%;
    bottom: 17%;
}
@media(max-width: 1440px) {
    #center {
        min-width: 950px;
        min-height: 1100px;
    }
    .nav-container {
        padding: 16px 0;
        margin-bottom: 38px;
    }
    .logo {
        width: 236px;
        height: 38px;
    }
    .overview-img {
        width: 144px;
        height: 77px;
        margin-bottom: 0px;
    }
    .overview-title {
        font-size: 30px;
    }
    .overview-text {
        font-size: 18px;
    }
    .preview-container {
        min-height: 594.5px;
    }
    .map-container {
        width: 861px;
        height: 555px;
    }
    .map-boby {
        width: 805px;
        height: 505px;
    }
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
#center {
    width: 100%;
    min-width: 950px;
    color: #fff;
}
.header-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/jurassic_bg1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner-container {
    width: 100%;
    height: 840px;
    background-image: url('https://show.ybccode.com/common_static/ybc-park/jurassic_banner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.nav-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 60%;
    padding: 30px 0 2px;
    text-align: left;
}
.back-btn {
    width: 28px;
    height: 28px;
    cursor: pointer;
    margin-right: 10px;
}
.arrow {
    width: 28px;
    height: 28px;
    content: url('../image/black-arrow.png');
}
.logo {
    display: inline-block;
    width: 316px;
    height: 49px;
    content: url('../image/black-logo.png');
}
.overview-title {
    font-size: 50px;
    font-weight: 700;
    margin: 20px 0 0;
}
.overview-img {
    width: 900px;
}
.overview-text {
    width: 52%;
    font-size: 28px;
    padding: 25px 0 60px;
    margin: 0;
}
.intro-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/jurassic_bg2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: 160px;
}
.intro-headline {
    width: 300px;
    margin: 70px 0;
    content: url('https://show.ybccode.com/common_static/ybc-park/product_5.png');
}
.intro-box {
    margin-bottom: 228px;
}
.intro-box:nth-of-type(1) {
    margin-bottom: 130px;
}
.intro-box:nth-of-type(2) {
    margin-bottom: 130px;
}
.intro-box:nth-last-of-type(1) {
    margin-bottom: 0;
}
.intro-box:nth-child(odd) .img-list {
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(even) .img-list {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(odd) .intro-img {
    margin-right: 35px;
}
.intro-box:nth-child(even) .intro-img {
    margin-left: 35px;
}
.intro-img {
    display: inline-block;
    width: 610px;
}
.intro-box:nth-child(odd) .intro-text-box {
    margin-left: 35px;
}
.intro-box:nth-child(even) .intro-text-box {
    margin-right: 35px;
}
.intro-text-box {
    width: 30%;
    text-align: left;
}
.intro-title {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 28px;
}
.intro-article {
    font-size: 22px;
    margin: 0;
}
@media(max-width: 1440px) {
    .banner-container {
        width: 100%;
        height: 480px;
    }
    .nav-container {
        padding: 16px 0;
    }
    .back-btn {
        width: 18px;
        height: 18px;
    }
    .back-btn img {
        width: 18px;
        height: 18px;
    }
    .logo {
        width: 236px;
        height: 38px;
    }
    .overview-title {
        font-size: 40px;
        line-height: 53px;
    }
    .overview-img {
        width: 720px;
    }
    .overview-text {
        width: 66%;
        font-size: 20px;
        padding: 25px 0 53px;
    }
    .intro-headline {
        width: 230px;
        margin: 60px 0 70px;
    }
    .intro-box:nth-child(odd) .intro-img {
        margin-right: 20px;
    }
    .intro-box:nth-child(even) .intro-img {
        margin-left: 20px;
    }
    .intro-img {
        display: inline-block;
        width: 488px;
    }
    .intro-box:nth-child(odd) .intro-text-box {
        margin-left: 20px;
    }
    .intro-box:nth-child(even) .intro-text-box {
        margin-right: 20px;
    }
    .intro-title {
        font-size: 30px;
    }
    .intro-article {
        font-size: 14px;
    }
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
#center {
    width: 100%;
    min-width: 950px;
    color: #000;
}
.header-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/minions_bg1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner-container {
    width: 100%;
    height: 840px;
    background-image: url('https://show.ybccode.com/common_static/ybc-park/minions_banner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.nav-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 60%;
    padding: 30px 0 2px;
    text-align: left;
}
.back-btn {
    width: 28px;
    height: 28px;
    cursor: pointer;
    margin-right: 10px;
}
.arrow {
    width: 28px;
    height: 28px;
    content: url('../image/black-arrow.png');
}
.logo {
    display: inline-block;
    width: 316px;
    height: 49px;
    content: url('../image/black-logo.png');
}
.overview-title {
    font-size: 50px;
    font-weight: 700;
    margin: 20px 0 0;
}
.overview-img {
    width: 900px;
}
.overview-text {
    width: 52%;
    font-size: 28px;
    padding: 25px 0 60px;
    margin: 0;
}
.intro-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/minions_bg2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: 160px;
}
.intro-headline {
    width: 300px;
    margin: 70px 0;
    content: url('https://show.ybccode.com/common_static/ybc-park/product_1.png');
}
.intro-box {
    margin-bottom: 228px;
}
.intro-box:nth-of-type(1) {
    margin-bottom: 130px;
}
.intro-box:nth-of-type(2) {
    margin-bottom: 130px;
}
.intro-box:nth-last-of-type(1) {
    margin-bottom: 0;
}
.intro-box:nth-child(odd) .img-list {
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(even) .img-list {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(odd) .intro-img {
    margin-right: 35px;
}
.intro-box:nth-child(even) .intro-img {
    margin-left: 35px;
}
.intro-img {
    display: inline-block;
    width: 610px;
}
.intro-box:nth-child(odd) .intro-text-box {
    margin-left: 35px;
}
.intro-box:nth-child(even) .intro-text-box {
    margin-right: 35px;
}
.intro-text-box {
    width: 30%;
    text-align: left;
}
.intro-title {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 28px;
}
.intro-article {
    font-size: 22px;
    margin: 0;
}
@media(max-width: 1440px) {
    .banner-container {
        width: 100%;
        height: 480px;
    }
    .nav-container {
        padding: 16px 0;
    }
    .back-btn {
        width: 18px;
        height: 18px;
    }
    .back-btn img {
        width: 18px;
        height: 18px;
    }
    .logo {
        width: 236px;
        height: 38px;
    }
    .overview-title {
        font-size: 40px;
        line-height: 53px;
    }
    .overview-img {
        width: 720px;
    }
    .overview-text {
        width: 66%;
        font-size: 20px;
        padding: 25px 0 53px;
    }
    .intro-headline {
        width: 230px;
        margin: 60px 0 70px;
    }
    .intro-box:nth-child(odd) .intro-img {
        margin-right: 20px;
    }
    .intro-box:nth-child(even) .intro-img {
        margin-left: 20px;
    }
    .intro-img {
        display: inline-block;
        width: 488px;
    }
    .intro-box:nth-child(odd) .intro-text-box {
        margin-left: 20px;
    }
    .intro-box:nth-child(even) .intro-text-box {
        margin-right: 20px;
    }
    .intro-title {
        font-size: 30px;
    }
    .intro-article {
        font-size: 14px;
    }
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
#center {
    width: 100%;
    min-width: 950px;
    color: #fff;
}
.header-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/panda_bg1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner-container {
    width: 100%;
    height: 840px;
    background-image: url('https://show.ybccode.com/common_static/ybc-park/panda_banner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.nav-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 60%;
    padding: 30px 0 2px;
    text-align: left;
}
.back-btn {
    width: 28px;
    height: 28px;
    cursor: pointer;
    margin-right: 10px;
}
.arrow {
    width: 28px;
    height: 28px;
    content: url('../image/white-arrow.png');
}
.logo {
    display: inline-block;
    width: 316px;
    height: 49px;
    content: url('../image/white-logo.png');
}
.overview-title {
    font-size: 50px;
    font-weight: 700;
    margin: 20px 0 0;
}
.overview-img {
    width: 900px;
}
.overview-text {
    width: 52%;
    font-size: 28px;
    padding: 25px 0 60px;
    margin: 0;
}
.intro-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/panda_bg2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: 160px;
}
.intro-headline {
    width: 300px;
    margin: 70px 0;
    content: url('https://show.ybccode.com/common_static/ybc-park/product_4.png');
}
.intro-box {
    margin-bottom: 228px;
}
.intro-box:nth-of-type(1) {
    margin-bottom: 130px;
}
.intro-box:nth-of-type(2) {
    margin-bottom: 130px;
}
.intro-box:nth-last-of-type(1) {
    margin-bottom: 0;
}
.intro-box:nth-child(odd) .img-list {
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(even) .img-list {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(odd) .intro-img {
    margin-right: 35px;
}
.intro-box:nth-child(even) .intro-img {
    margin-left: 35px;
}
.intro-img {
    display: inline-block;
    width: 610px;
}
.intro-box:nth-child(odd) .intro-text-box {
    margin-left: 35px;
}
.intro-box:nth-child(even) .intro-text-box {
    margin-right: 35px;
}
.intro-text-box {
    width: 30%;
    text-align: left;
}
.intro-title {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 28px;
}
.intro-article {
    font-size: 22px;
    margin: 0;
}
@media(max-width: 1440px) {
    .banner-container {
        width: 100%;
        height: 480px;
    }
    .nav-container {
        padding: 16px 0;
    }
    .back-btn {
        width: 18px;
        height: 18px;
    }
    .back-btn img {
        width: 18px;
        height: 18px;
    }
    .logo {
        width: 236px;
        height: 38px;
    }
    .overview-title {
        font-size: 40px;
        line-height: 53px;
    }
    .overview-img {
        width: 720px;
    }
    .overview-text {
        width: 66%;
        font-size: 20px;
        padding: 25px 0 53px;
    }
    .intro-headline {
        width: 230px;
        margin: 60px 0 70px;
    }
    .intro-box:nth-child(odd) .intro-img {
        margin-right: 20px;
    }
    .intro-box:nth-child(even) .intro-img {
        margin-left: 20px;
    }
    .intro-img {
        display: inline-block;
        width: 488px;
    }
    .intro-box:nth-child(odd) .intro-text-box {
        margin-left: 20px;
    }
    .intro-box:nth-child(even) .intro-text-box {
        margin-right: 20px;
    }
    .intro-title {
        font-size: 30px;
    }
    .intro-article {
        font-size: 14px;
    }
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
#center {
    width: 100%;
    min-width: 950px;
    color: #fff;
}
.header-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/waterworld_bg1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner-container {
    width: 100%;
    height: 840px;
    background-image: url('https://show.ybccode.com/common_static/ybc-park/waterworld_banner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.nav-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 60%;
    padding: 30px 0 2px;
    text-align: left;
}
.back-btn {
    width: 28px;
    height: 28px;
    cursor: pointer;
    margin-right: 10px;
}
.arrow {
    width: 28px;
    height: 28px;
    content: url('../image/white-arrow.png');
}
.logo {
    display: inline-block;
    width: 316px;
    height: 49px;
    content: url('../image/white-logo.png');
}
.overview-title {
    font-size: 50px;
    font-weight: 700;
    margin: 20px 0 0;
}
.overview-img {
    width: 900px;
}
.overview-text {
    width: 52%;
    font-size: 28px;
    padding: 25px 0 60px;
    margin: 0;
}
.intro-container {
    background-image: url('https://show.ybccode.com/common_static/ybc-park/waterworld_bg2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: 160px;
}
.intro-headline {
    width: 300px;
    margin: 70px 0;
    content: url('https://show.ybccode.com/common_static/ybc-park/product_6.png');
}
.intro-box {
    margin-bottom: 228px;
}
.intro-box:nth-of-type(1) {
    margin-bottom: 130px;
}
.intro-box:nth-of-type(2) {
    margin-bottom: 130px;
}
.intro-box:nth-last-of-type(1) {
    margin-bottom: 0;
}
.intro-box:nth-child(odd) .img-list {
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(even) .img-list {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}
.intro-box:nth-child(odd) .intro-img {
    margin-right: 35px;
}
.intro-box:nth-child(even) .intro-img {
    margin-left: 35px;
}
.intro-img {
    display: inline-block;
    width: 610px;
}
.intro-box:nth-child(odd) .intro-text-box {
    margin-left: 35px;
}
.intro-box:nth-child(even) .intro-text-box {
    margin-right: 35px;
}
.intro-text-box {
    width: 30%;
    text-align: left;
}
.intro-title {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 28px;
}
.intro-article {
    font-size: 22px;
    margin: 0;
}
@media(max-width: 1440px) {
    .banner-container {
        width: 100%;
        height: 480px;
    }
    .nav-container {
        padding: 16px 0;
    }
    .back-btn {
        width: 18px;
        height: 18px;
    }
    .back-btn img {
        width: 18px;
        height: 18px;
    }
    .logo {
        width: 236px;
        height: 38px;
    }
    .overview-title {
        font-size: 40px;
        line-height: 53px;
    }
    .overview-img {
        width: 720px;
    }
    .overview-text {
        width: 66%;
        font-size: 20px;
        padding: 25px 0 53px;
    }
    .intro-headline {
        width: 230px;
        margin: 60px 0 70px;
    }
    .intro-box:nth-child(odd) .intro-img {
        margin-right: 20px;
    }
    .intro-box:nth-child(even) .intro-img {
        margin-left: 20px;
    }
    .intro-img {
        display: inline-block;
        width: 488px;
    }
    .intro-box:nth-child(odd) .intro-text-box {
        margin-left: 20px;
    }
    .intro-box:nth-child(even) .intro-text-box {
        margin-right: 20px;
    }
    .intro-title {
        font-size: 30px;
    }
    .intro-article {
        font-size: 14px;
    }
}

以上为css步分。

图片放下面了：

这是作者花56小时做的，点个关注吧！！！！！！！！