一、网站描述
主要使用HTML5+CSS3+JS技术，进行制作响应式旅游网站，该网站包含7个静态页面，分别是目的地、旅游攻略、特色行程、酒店预订、联系我们、注册页面、登录页面。
其中，该旅游网站的官网首页，包含吸引眼球的主要横幅、导航菜单、推荐景点栏以及用户评价部分。页面整体以直观易用的布局呈现，搭配高清优美的图片。推荐景点栏显示热门地点，并且用户评价部分采用滑动展示的形式。
二、页面结构
1. 顶部信息条
显示联系电话、邮箱、社交媒体图标，右侧提供语言切换选项
2. 主导航菜单
固定在页面顶部，包含：Logo、目的地、旅游攻略、特色行程、酒店预订、机票预订、签证服务、旅游保险、联系我们等选项，右侧设置登录/注册按钮
3. 全屏视差滚动横幅
大气震撼的全屏背景视频或高清图片轮播，配以引人入胜的标语和搜索框，允许快速搜索目的地或旅游产品，底部设计半透明的快速预订模块
4. 热门目的地推荐
网格式布局展示8个热门目的地，每个区块包含：
-
目的地精美图片
-
地点名称和标志性景点
-
最佳旅行季节提示
-
参考价格范围
-
'查看详情'按钮
5. 特色主题游专区
分类展示不同主题旅游产品：
-
蜜月度假
-
亲子游
-
探险游
-
美食之旅
-
摄影团
每个主题配有精美图标、简介和特色产品展示
6. 限时特惠区
展示当前促销活动和特价产品，包含倒计时显示、原价和优惠价格对比、预订按钮
7. 旅游攻略精选
图文并茂展示热门攻略文章，包括：
-
季节性旅游建议
-
目的地深度游记
-
实用贴士分享
-
美食推荐等
8. 用户体验展示区
多样化展示用户反馈：
-
图片墙展示用户旅行照片
-
视频播放用户分享的精彩瞬间
-
文字评价轮播，包含用户头像、评分和详细反馈
9. 品质保障与服务承诺
以现代化图标设计展示：
-
价格保证
-
极速确认
-
7*24小时专业客服
-
旅行保险保障
-
签证协助服务
-
优质供应商认证
10. 移动端下载提示
展示二维码，提供iOS和Android下载链接，突出APP专属
11. 底部信息区
包含详细的页脚信息：
-
公司介绍与资质展示
-
全球办事处联系方式
-
合作伙伴品牌标识
-
支付方式图标
-
安全认证标识
-
版权信息
三、网页作品技术
这里应用了丰富的网页技术进行制作网页的，以下将简单介绍其中三种应用技术。
1、Fontawesome图标库
FontAwesome是一个广泛使用的开源图标库，提供了超过上千个可定制的矢量图标，适用于网页设计和界面设计。FontAwesome图标库的优势在于其丰富的图标资源和灵活性，能够直接嵌入网页中，无需额外的图片文件。这对于加快页面加载速度、适应响应式设计尤为重要。
你可以从官方网站下载所需的图标字体文件，并通过简单的HTML和CSS代码将其集成到你的项目中。
（1）解压文件
将下载的压缩包解压后，得到下面目录结构内容。
|-/css/ # 用于web开发时候使用，一般情况下只需引用这里的all.min.css即可正常使用fontawesome字体图标了）
|-/js/ # 用于一些高级用法比如配合svg使用，以及图标/动画/旋转/蒙版/等等）
|-/less/ # 字体图标 Less 样式文件
|-/metadata/ # 图标集 Meta 数据文件
|-/scss/ # 字体图标 Scss 样式文件
|-/sprites/ # 字体图标 SVG合集文件
|-/svgs/ # 这里有全部的单独的svg图标，可以用于PPT/Axure/等原型软件
|-/webfonts/ # 核心字体文件tips：结尾带min的是压缩过的文件，内容等同于原始文件。
（2）布置css和fonts
- 将
/css目录下的all.min.css复制到你的项目中对应的css目录。 - 将
/webfonts目录复制到你项目中对应的静态文件目录。 - 在你的html中引入
all.min.css文件
<head>
<!-- 这里要注意你的文件相对路径 -->
<link href="/css/fontawesome.css" rel="stylesheet">
</head>（3）基础使用方法
按上面的操作引入css之后，就可以在你的html里加入图标代码了。 下面几种写法都可以，只不过一般都用在i标签上。
<i class="fas fa-camera"></i>
<span class="fas fa-camera"></span>
<a href="" class="fas fa-camera"></a>fontawesome主要是通过css引入字体文件实现显示图标。 其中在class中有2个主要内容。
①标识图标样式的：用fas,far,fal,fad。其中
- fas: 实体样式
- far: 常规样式
- fal: 线条样式
- fad: 双色样式
- fab: 品牌图标
②fa-xxxx其中xxxx就是图标的名称，比如：相机图标（fa-camera），你可以试试。
搞定！
2、Glide.js滑块和轮播库
在追求流畅用户体验的今天，滑动效果几乎成为每个网站和应用不可或缺的一部分。这里的全屏视差滚动使用Glide.js ，简洁高效的滑动解决方案。Glide.js是一个纯JavaScript编写的ES6滑块与轮播插件，它设计简洁、性能卓越，并且非常容易集成到任何项目中。
应用场景
Glide.js极其适合各种展示型滑动场景：
- 产品展示：网站首页的产品展示滑动，或在电商网站上用于商品图片或视频轮播；
- 内容滑动：新闻网站的滚动新闻或者博客中的相关文章推荐；
- 多媒体播放：视频预览或音乐专辑封面展示；
- 用户体验优化：任何需要优雅滑动导航的地方，如菜单、选项卡或侧边栏；
- 移动端菜单切换；
- 社交媒体的时间线滑动展示；
3、网页中如何引入地图组件
这里通过iframe标签这种方法在网页中引入地图组件的。
（1）高德地图
<iframe src="https://surl.amap.com/6Sr6H0e9Vw" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>（2）百度地图
<iframe src="https://j.map.baidu.com/26/BK" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>（3）谷歌地图
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12241.838292730099!2d116.3870678048037!3d39.90873045207743!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x36637698dc4374d9%3A0x6928cb83a148399a!2z5aSp5a6J6Zeo!5e0!3m2!1szh-CN!2shk!4v1707882851471!5m2!1szh-CN!2shk" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>四、作品演示
五、代码目录
六、代码演示
登录页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" />
<link type="text/css" href="css/glide.core.min.css" rel="stylesheet" />
<link type="text/css" href="css/glide.theme.min.css" rel="stylesheet" />
</head>
<body class="font-['Noto_Sans_SC']">
<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>
<div class="bg-gray-100 text-sm py-2">
<div class="max-w-8xl mx-auto px-4 flex justify-between items-center">
<div class="flex items-center space-x-6">
<span><i class="fas fa-phone mr-2"></i>400-888-8888</span>
<span><i class="fas fa-envelope mr-2"></i>service@globaltour.com</span>
<div class="flex space-x-4">
<a href="#" class="hover:text-custom"><i class="fab fa-weixin"></i></a>
<a href="#" class="hover:text-custom"><i class="fab fa-weibo"></i></a>
<a href="#" class="hover:text-custom"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="flex items-center space-x-4">
<select class="bg-transparent border-none text-sm">
<option>简体中文</option>
<option>English</option>
<option>日本語</option>
</select>
</div>
</div>
</div>
<header class="bg-white shadow-sm sticky top-0 z-50">
<nav class="max-w-8xl mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<img src="images/logo_placeholder.png" alt="环球旅行" class="h-8" />
<div class="ml-8 flex space-x-6">
<a href="./index.html" class="text-gray-700 hover:text-custom">目的地</a>
<a href="./travel-guide.html" class="text-gray-700 hover:text-custom">旅游攻略</a>
<a href="./featured-itineraries.html" class="text-gray-700 hover:text-custom">特色行程</a>
<a href="./hotel-reservations.html" class="text-gray-700 hover:text-custom">酒店预订</a>
<a href="./contact-us.html" class="text-gray-700 hover:text-custom">联系我们</a>
</div>
</div>
<div class="flex items-center space-x-4">
<a href="./login.html"
class="!rounded-button px-4 py-2 text-custom border border-custom hover:bg-custom hover:text-white">登录</a>
<a href="./registered.html" class="!rounded-button px-4 py-2 bg-custom text-white hover:bg-blue-700">注册</a>
</div>
</div>
</nav>
</header>
<div class="glide relative pt-10 pb-20">
<div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-8">
<h2 class="text-2xl font-bold mb-6 text-center">用户登录</h2>
<form class="space-y-6">
<div><label class="block text-gray-700 mb-2">用户名</label><input type="text" placeholder="请输入用户名/手机号/邮箱"
class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:border-custom" /></div>
<div><label class="block text-gray-700 mb-2">密码</label><input type="password" placeholder="请输入密码"
class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:border-custom" /></div>
<div class="flex items-center justify-between text-sm"><label class="flex items-center"><input
type="checkbox" class="mr-2" /><span class="text-gray-600">记住我</span></label><a href="#"
class="text-custom hover:text-blue-700">忘记密码？</a></div><button type="submit"
class="w-full bg-custom text-white rounded-lg px-6 py-3 hover:bg-blue-700">登录</button>
<div class="mt-6">
<p class="text-center text-gray-600 mb-4">其他登录方式</p>
<div class="flex justify-center space-x-6"><a href="#" class="text-gray-600 hover:text-custom"><i
class="fab fa-weixin text-2xl"></i></a><a href="#"
class="text-gray-600 hover:text-custom"><i class="fab fa-qq text-2xl"></i></a><a href="#"
class="text-gray-600 hover:text-custom"><i class="fas fa-mobile-alt text-2xl"></i></a></div>
</div>
<div class="mt-6 text-center"><span class="text-gray-600">还没有账号？</span><a href="#"
class="text-custom hover:text-blue-700 ml-2">立即注册</a></div>
</form>
</div>
</div>
<footer class="bg-gray-900 text-gray-300 py-12">
<div class="max-w-8xl mx-auto px-4">
<div class="grid grid-cols-4 gap-8 mb-8">
<div>
<h4 class="text-white font-bold mb-4">关于我们</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white">公司简介</a></li>
<li><a href="#" class="hover:text-white">联系方式</a></li>
<li><a href="#" class="hover:text-white">招贤纳士</a></li>
<li><a href="#" class="hover:text-white">服务条款</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">旅行服务</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white">旅游保险</a></li>
<li><a href="#" class="hover:text-white">签证服务</a></li>
<li><a href="#" class="hover:text-white">机票预订</a></li>
<li><a href="#" class="hover:text-white">酒店预订</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">帮助中心</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white">预订指南</a></li>
<li><a href="#" class="hover:text-white">常见问题</a></li>
<li><a href="#" class="hover:text-white">意见反馈</a></li>
<li><a href="#" class="hover:text-white">紧急联系</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">关注我们</h4>
<div class="flex space-x-4 mb-4">
<a href="#" class="hover:text-white"><i class="fab fa-weixin text-2xl"></i></a>
<a href="#" class="hover:text-white"><i class="fab fa-weibo text-2xl"></i></a>
<a href="#" class="hover:text-white"><i class="fab fa-instagram text-2xl"></i></a>
</div>
<img src="images/qrcode_placeholder.png" alt="微信公众号" class="w-32" />
</div>
</div>
<div class="border-t border-gray-800 pt-8 text-center">
<p>© 公众号 木番薯科技. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>