HTML+CSS+JS制作马尔代夫旅游网站（内附源码，含6个页面）

一、作品介绍

HTML+CSS+JS制作一个马尔代夫旅游网站，包含首页、目的地页、旅游套餐页、酒店预订页、交通指南页、关于我们页等6个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。

二、页面结构

1. 顶部横幅区域

包含网站Logo、导航菜单（首页、目的地、旅游套餐、酒店预订、交通指南、关于我们）以及语言切换选项

2. 主视觉横幅

展示马尔代夫标志性的水上别墅、碧海蓝天等震撼大图，配合'遇见梦幻马尔代夫'等标语，以及快速预订按钮

3. 精选旅游套餐

以图片卡片形式展示3-4个热门旅游套餐，包含价格、天数、行程简介等信息

4. 目的地精选

展示马尔代夫各大岛屿特色介绍，配有精美图片和简短描述，可横向滑动查看

5. 特色体验区

以图文结合方式展示水上运动、SPA、潜水、美食等特色体验项目

6. 实用信息区

包含天气、最佳旅行时间、签证信息、注意事项等实用信息的快速入口

7. 用户评价展示

展示真实用户的旅行照片和评价内容，以增加可信度

8. 底部联系区

包含咨询热线、在线客服按钮、社交媒体链接及版权信息

三、作品演示

四、代码目录

五、首页代码

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>马尔代夫旅游网站 - 首页</title>
  <link type="text/css" href="css/family.css" rel="stylesheet" />
  <link type="text/css" href="css/all.min.css" rel="stylesheet" />
</head>

<body>
  <div class="water-mark water-mark-left">
    公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span>
  </div>
  <div class="water-mark water-mark-right">
    公众号【<span class="gzh-tips">木番薯科技</span>】，<span class="ym-tips">获取源码</span>
  </div>
  <header class="fixed top-0 left-0 right-0 bg-white z-50 shadow-sm">
    <div class="container mx-auto px-6 py-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <h1 class="text-3xl font-['Pacifico'] text-custom">logo</h1>
          <nav class="ml-12">
            <ul class="flex space-x-8">
              <li><a href="./index.html" class="text-gray hover:text-custom">首页</a></li>
              <li><a href="./destination.html" class="text-gray-500 hover:text-custom">目的地</a></li>
              <li><a href="./tour-packages.html" class="text-gray-500 hover:text-custom">旅游套餐</a></li>
              <li><a href="./hotel-reservations.html" class="text-gray-500 hover:text-custom">酒店预订</a></li>
              <li><a href="./directions.html" class="text-gray-500 hover:text-custom">交通指南</a></li>
              <li><a href="./about-us.html" class="text-gray-500 hover:text-custom">关于我们</a></li>
            </ul>
          </nav>
        </div>
        <div class="flex items-center">
          <button class="!rounded-button px-4 py-2 text-sm bg-gray-100 text-gray-700">
            <i class="fas fa-globe mr-2"></i>
            中文
          </button>
        </div>
      </div>
    </div>
  </header>

  <main class="pt-16">
    <section class="relative h-[600px]">
      <img src="./images/b1.jpg"
        class="w-full h-full object-cover object-center" alt="马尔代夫风景">
      <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
        <div class="text-center text-white">
          <h2 class="text-5xl font-bold mb-6">遇见梦幻马尔代夫</h2>
          <p class="text-xl mb-8">探索印度洋上的珍珠，开启您的奢华之旅</p>
          <button class="!rounded-button bg-custom px-8 py-3 text-white text-lg">立即预订</button>
        </div>
      </div>
    </section>

    <section class="container mx-auto px-6 py-16">
      <h2 class="text-3xl font-bold mb-12 text-center">精选旅游套餐</h2>
      <div class="grid grid-cols-3 gap-8">
        <div class="rounded-lg overflow-hidden shadow-lg">
          <img src="./images/tc1.jpg"
            class="w-full h-[200px] object-cover" alt="豪华水上别墅">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2">豪华水上别墅体验</h3>
            <p class="text-gray-600 mb-4">6天5晚 · 双人套餐</p>
            <div class="flex justify-between items-center">
              <span class="text-custom text-xl font-bold">¥29,999起</span>
              <button class="!rounded-button bg-custom text-white px-4 py-2">查看详情</button>
            </div>
          </div>
        </div>

        <div class="rounded-lg overflow-hidden shadow-lg">
          <img src="./images/tc2.jpg"
            class="w-full h-[200px] object-cover" alt="浪漫蜜月套餐">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2">浪漫蜜月套餐</h3>
            <p class="text-gray-600 mb-4">7天6晚 · 定制行程</p>
            <div class="flex justify-between items-center">
              <span class="text-custom text-xl font-bold">¥35,999起</span>
              <button class="!rounded-button bg-custom text-white px-4 py-2">查看详情</button>
            </div>
          </div>
        </div>

        <div class="rounded-lg overflow-hidden shadow-lg">
          <img src="./images/tc3.jpg"
            class="w-full h-[200px] object-cover" alt="深潜探索之旅">
          <div class="p-6">
            <h3 class="text-xl font-bold mb-2">深潜探索之旅</h3>
            <p class="text-gray-600 mb-4">5天4晚 · 含专业教练</p>
            <div class="flex justify-between items-center">
              <span class="text-custom text-xl font-bold">¥25,999起</span>
              <button class="!rounded-button bg-custom text-white px-4 py-2">查看详情</button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="bg-gray-50 py-16">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold mb-12 text-center">目的地精选</h2>
        <div class="glide">
          <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
              <li class="glide__slide">
                <img src="./images/m1.jpg"
                  class="w-full h-[300px] object-cover rounded-lg" alt="马累岛">
                <h3 class="text-xl font-bold mt-4 mb-2">马累岛</h3>
                <p class="text-gray-600">首都岛屿，现代与传统的完美融合</p>
              </li>
              <li class="glide__slide">
                <img src="./images/m2.jpg"
                  class="w-full h-[300px] object-cover rounded-lg" alt="班度士岛">
                <h3 class="text-xl font-bold mt-4 mb-2">班度士岛</h3>
                <p class="text-gray-600">奢华度假胜地，尽享私密与宁静</p>
              </li>
              <li class="glide__slide">
                <img src="./images/m5.jpg"
                  class="w-full h-[300px] object-cover rounded-lg" alt="天堂岛">
                <h3 class="text-xl font-bold mt-4 mb-2">天堂岛</h3>
                <p class="text-gray-600">水上运动天堂，适合家庭度假</p>
              </li>
            </ul>
          </div>
          <div class="glide__bullets" data-glide-el="controls[nav]">
            <button class="glide__bullet" data-glide-dir="=0"></button>
            <button class="glide__bullet" data-glide-dir="=1"></button>
            <button class="glide__bullet" data-glide-dir="=2"></button>
          </div>
        </div>
      </div>
    </section>

    <section class="container mx-auto px-6 py-16">
      <h2 class="text-3xl font-bold mb-12 text-center">特色体验</h2>
      <div class="grid grid-cols-2 gap-8">
        <div class="flex items-center space-x-6">
          <img src="./images/t1.jpg"
            class="w-[200px] h-[150px] object-cover rounded-lg" alt="SPA体验">
          <div>
            <h3 class="text-xl font-bold mb-2">海景SPA</h3>
            <p class="text-gray-600">享受印度洋风情的专业理疗，放松身心</p>
          </div>
        </div>
        <div class="flex items-center space-x-6">
          <img src="./images/t2.jpg"
            class="w-[200px] h-[150px] object-cover rounded-lg" alt="潜水">
          <div>
            <h3 class="text-xl font-bold mb-2">深海潜水</h3>
            <p class="text-gray-600">探索绚丽的珊瑚礁，与海洋生物亲密接触</p>
          </div>
        </div>
      </div>
    </section>

    <section class="bg-gray-50 py-16">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold mb-12 text-center">实用信息</h2>
        <div class="grid grid-cols-4 gap-6">
          <div class="bg-white p-6 rounded-lg shadow-sm">
            <i class="fas fa-sun text-3xl text-custom mb-4"></i>
            <h3 class="text-xl font-bold mb-2">天气信息</h3>
            <p class="text-gray-600">全年温暖宜人，平均气温26-32℃</p>
          </div>
          <div class="bg-white p-6 rounded-lg shadow-sm">
            <i class="fas fa-calendar-alt text-3xl text-custom mb-4"></i>
            <h3 class="text-xl font-bold mb-2">最佳时间</h3>
            <p class="text-gray-600">11月-次年4月为旅游旺季</p>
          </div>
          <div class="bg-white p-6 rounded-lg shadow-sm">
            <i class="fas fa-passport text-3xl text-custom mb-4"></i>
            <h3 class="text-xl font-bold mb-2">签证信息</h3>
            <p class="text-gray-600">落地签证，停留期30天</p>
          </div>
          <div class="bg-white p-6 rounded-lg shadow-sm">
            <i class="fas fa-info-circle text-3xl text-custom mb-4"></i>
            <h3 class="text-xl font-bold mb-2">注意事项</h3>
            <p class="text-gray-600">请务必购买旅游保险</p>
          </div>
        </div>
      </div>
    </section>

    <section class="container mx-auto px-6 py-16">
      <h2 class="text-3xl font-bold mb-12 text-center">用户评价</h2>
      <div class="grid grid-cols-3 gap-8">
        <div class="bg-white p-6 rounded-lg shadow-sm">
          <div class="flex items-center mb-4">
            <img src="./images/tx3.jpg"
              class="w-12 h-12 rounded-full object-cover mr-4" alt="用户头像">
            <div>
              <h4 class="font-bold">陈女士</h4>
              <div class="text-yellow-400">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600">"完美的蜜月之旅！水上别墅太梦幻了，服务也非常贴心。"</p>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-sm">
          <div class="flex items-center mb-4">
            <img src="./images/tx5.jpg"
              class="w-12 h-12 rounded-full object-cover mr-4" alt="用户头像">
            <div>
              <h4 class="font-bold">王先生</h4>
              <div class="text-yellow-400">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600">"带全家来度假，孩子们玩得很开心，潜水体验太棒了！"</p>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-sm">
          <div class="flex items-center mb-4">
            <img src="./images/tx4.jpg"
              class="w-12 h-12 rounded-full object-cover mr-4" alt="用户头像">
            <div>
              <h4 class="font-bold">林女士</h4>
              <div class="text-yellow-400">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600">"SPA体验非常放松，海景房view太美了，期待下次再来！"</p>
        </div>
      </div>
    </section>
  </main>

  <footer class="bg-gray-900 text-white py-12">
    <div class="container mx-auto px-6">
      <div class="grid grid-cols-4 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4">联系我们</h3>
          <p class="mb-2"><i class="fas fa-phone mr-2"></i>400-888-8888</p>
          <p class="mb-2"><i class="fas fa-envelope mr-2"></i>service@maldives.com</p>
        </div>
        <div>
          <h3 class="text-xl font-bold mb-4">关注我们</h3>
          <div class="flex space-x-4">
            <a href="#" class="text-2xl"><i class="fab fa-weixin"></i></a>
            <a href="#" class="text-2xl"><i class="fab fa-weibo"></i></a>
            <a href="#" class="text-2xl"><i class="fab fa-instagram"></i></a>
          </div>
        </div>
        <div>
          <h3 class="text-xl font-bold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-custom">关于我们</a></li>
            <li><a href="#" class="hover:text-custom">隐私政策</a></li>
            <li><a href="#" class="hover:text-custom">服务条款</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-xl font-bold mb-4">在线客服</h3>
          <button class="!rounded-button bg-custom text-white px-6 py-2">
            <i class="fas fa-comments mr-2"></i>立即咨询
          </button>
        </div>
      </div>
      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
        <p>© 2024 马尔代夫旅游网. All rights reserved.</p>
      </div>
    </div>
  </footer>
</body>

</html>

六、获取代码

内附源码，含6个页面。欢迎留言，欢迎关注。