一、作品介绍
HTML+CSS+JS制作一个马尔代夫旅游网站，包含首页、目的地页、旅游套餐页、酒店预订页、交通指南页、关于我们页等6个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。
二、页面结构
1. 顶部横幅区域
包含网站Logo、导航菜单（首页、目的地、旅游套餐、酒店预订、交通指南、关于我们）以及语言切换选项
2. 主视觉横幅
展示马尔代夫标志性的水上别墅、碧海蓝天等震撼大图，配合'遇见梦幻马尔代夫'等标语，以及快速预订按钮
3. 精选旅游套餐
以图片卡片形式展示3-4个热门旅游套餐，包含价格、天数、行程简介等信息
4. 目的地精选
展示马尔代夫各大岛屿特色介绍，配有精美图片和简短描述，可横向滑动查看
5. 特色体验区
以图文结合方式展示水上运动、SPA、潜水、美食等特色体验项目
6. 实用信息区
包含天气、最佳旅行时间、签证信息、注意事项等实用信息的快速入口
7. 用户评价展示
展示真实用户的旅行照片和评价内容，以增加可信度
8. 底部联系区
包含咨询热线、在线客服按钮、社交媒体链接及版权信息
三、作品演示
四、代码目录
五、首页代码
html
<!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个页面。欢迎留言，欢迎关注。