您可以直接将下面的代码复制到一个 .html 文件中,然后用浏览器打开即可看到效果。
（图片来源网络，侵删）
功能特点：
- 响应式设计：在桌面、平板和手机上都能良好显示。
- 现代美观：使用了卡片式布局、平滑的过渡效果和悬停动画。
- 功能模块：包含了导航、横幅、目的地、服务、套餐、评价等完整模块。
- 交互性：导航栏会根据滚动位置改变样式,按钮和卡片有悬停效果。
- 易于修改：代码结构清晰，您可以轻松修改文字、图片链接和颜色来适应您的需求。
完整HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">探索世界 - 您的专属旅行伙伴</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* --- 全局样式 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section {
padding: 60px 0;
}
h1, h2, h3 {
margin-bottom: 20px;
color: #2c3e50;
}
h2 {
text-align: center;
font-size: 2.5rem;
position: relative;
padding-bottom: 15px;
}
h2::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(to right, #3498db, #2ecc71);
}
/* --- 导航栏 --- */
.navbar {
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
transition: all 0.3s ease;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
color: #3498db;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 30px;
}
.nav-links a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #3498db;
}
.menu-toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
/* --- 横幅/英雄区 --- */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1503220317375-aaad61436b1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80') no-repeat center center/cover;
color: white;
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 20px;
animation: fadeInUp 1s ease;
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
animation: fadeInUp 1s ease 0.2s;
animation-fill-mode: both;
}
.btn {
display: inline-block;
padding: 12px 30px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: all 0.3s ease;
animation: fadeInUp 1s ease 0.4s;
animation-fill-mode: both;
}
.btn:hover {
background-color: #2980b9;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* --- 目的地展示 --- */
.destinations {
background-color: #fff;
}
.destinations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.destination-card {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.destination-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.destination-card img {
width: 100%;
height: 250px;
object-fit: cover;
}
.card-content {
padding: 20px;
}
.card-content h3 {
margin-bottom: 10px;
color: #2c3e50;
}
.card-content p {
color: #7f8c8d;
font-size: 0.9rem;
}
/* --- 特色服务 --- */
.services {
background-color: #f8f9fa;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 50px;
}
.service-item {
text-align: center;
padding: 30px 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.service-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.service-item i {
font-size: 3rem;
color: #3498db;
margin-bottom: 20px;
}
.service-item h3 {
margin-bottom: 15px;
color: #2c3e50;
}
/* --- 热门套餐 --- */
.packages {
background-color: #fff;
}
.packages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}
.package-card {
border: 1px solid #e0e0e0;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s ease;
}
.package-card:hover {
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.package-card img {
width: 100%;
height: 220px;
object-fit: cover;
}
.package-details {
padding: 25px;
}
.package-details h3 {
margin-bottom: 10px;
color: #2c3e50;
}
.package-details p {
color: #7f8c8d;
margin-bottom: 15px;
font-size: 0.9rem;
}
.package-price {
font-size: 1.5rem;
font-weight: bold;
color: #e74c3c;
margin-bottom: 20px;
}
/* --- 客户评价 --- */
.testimonials {
background-color: #f8f9fa;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.testimonial-card {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
position: relative;
}
.testimonial-card i {
color: #f1c40f;
font-size: 1.2rem;
margin-bottom: 15px;
}
.testimonial-card p {
font-style: italic;
margin-bottom: 20px;
color: #555;
}
.client-info {
display: flex;
align-items: center;
}
.client-info img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
}
.client-info h4 {
color: #2c3e50;
}
/* --- 页脚 --- */
.footer {
background-color: #2c3e50;
color: #ecf0f1;
padding: 50px 0 20px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.footer-section h3 {
margin-bottom: 20px;
color: #3498db;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 10px;
}
.footer-section ul li a {
color: #bdc3c7;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section ul li a:hover {
color: #3498db;
}
.social-links {
display: flex;
gap: 15px;
}
.social-links a {
display: inline-block;
width: 40px;
height: 40px;
background-color: #34495e;
color: #bdc3c7;
text-align: center;
line-height: 40px;
border-radius: 50%;
transition: all 0.3s ease;
}
.social-links a:hover {
background-color: #3498db;
color: white;
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid #34495e;
color: #95a5a6;
}
/* --- 动画 --- */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.nav-links {
display: none;
position: absolute;
top: 70px;
left: 0;
width: 100%;
background-color: #fff;
flex-direction: column;
padding: 20px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.nav-links.active {
display: flex;
}
.menu-toggle {
display: block;
}
.hero-content h1 {
font-size: 2.5rem;
}
.hero-content p {
font-size: 1rem;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<a href="#" class="logo"><i class="fas fa-globe-americas"></i> 探索世界</a>
<ul class="nav-links" id="navLinks">
<li><a href="#home">首页</a></li>
<li><a href="#destinations">目的地</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#packages">套餐</a></li>
<li><a href="#testimonials">评价</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
<div class="menu-toggle" id="menuToggle">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- 横幅/英雄区 -->
<section class="hero" id="home">
<div class="hero-content">
<h1>开启您的梦想之旅</h1>
<p>发现世界上最美丽的地方，创造难忘的回忆</p>
<a href="#packages" class="btn">探索套餐</a>
</div>
</section>
<!-- 目的地展示 -->
<section class="section destinations" id="destinations">
<div class="container">
<h2>热门目的地</h2>
<div class="destinations-grid">
<div class="destination-card">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="巴厘岛">
<div class="card-content">
<h3>巴厘岛, 印度尼西亚</h3>
<p>享受热带天堂的阳光、沙滩和独特的文化体验。</p>
</div>
</div>
<div class="destination-card">
<img src="https://images.unsplash.com/photo-1544737193-7e747029a737?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="巴黎">
<div class="card-content">
<h3>巴黎, 法国</h3>
<p>漫步在浪漫之都，感受艺术、时尚与美食的魅力。</p>
</div>
</div>
<div class="destination-card">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="东京">
<div class="card-content">
<h3>东京, 日本</h3>
<p>探索传统与现代完美融合的活力都市。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 特色服务 -->
<section class="section services" id="services">
<div class="container">
<h2>我们的服务</h2>
<div class="services-grid">
<div class="service-item">
<i class="fas fa-plane"></i>
<h3>机票预订</h3>
<p>为您找到最优惠的航班，让旅途更轻松便捷。</p>
</div>
<div class="service-item">
<i class="fas fa-hotel"></i>
<h3>酒店住宿</h3>
<p>精选全球优质酒店，提供舒适的休憩之所。</p>
</div>
<div class="service-item">
<i class="fas fa-map-marked-alt"></i>
<h3>行程规划</h3>
<p>量身定制的旅行路线，让您不错过任何精彩。</p>
</div>
<div class="service-item">
<i class="fas fa-headset"></i>
<h3>24/7 客户支持</h3>
<p>全天候在线客服，随时解决您的旅途问题。</p>
</div>
</div>
</div>
</section>
<!-- 热门套餐 -->
<section class="section packages" id="packages">
<div class="container">
<h2>热门旅行套餐</h2>
<div class="packages-grid">
<div class="package-card">
<img src="https://images.unsplash.com/photo-1551782450-a2132b4da15d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="马尔代夫套餐">
<div class="package-details">
<h3>马尔代夫蜜月之旅</h3>
<p>5天4晚水上别墅，含早晚餐，快艇接送。</p>
<div class="package-price">¥15,999 起</div>
<a href="#" class="btn">立即预订</a>
</div>
</div>
<div class="package-card">
<img src="https://images.unsplash.com/photo-1513778402269-10e9e1f69b21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="欧洲套餐">
<div class="package-details">
<h3>欧洲四国深度游</h3>
<p>10天9晚，畅游法、意、德、瑞，全程中文导游。</p>
<div class="package-price">¥22,999 起</div>
<a href="#" class="btn">立即预订</a>
</div>
</div>
<div class="package-card">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="泰国套餐">
<div class="package-details">
<h3>泰国海岛休闲游</h3>
<p>7天6晚普吉岛+皮皮岛，享受阳光与海鲜大餐。</p>
<div class="package-price">¥6,999 起</div>
<a href="#" class="btn">立即预订</a>
</div>
</div>
</div>
</div>
</section>
<!-- 客户评价 -->
<section class="section testimonials" id="testimonials">
<div class="container">
<h2>客户评价</h2>
<div class="testimonials-grid">
<div class="testimonial-card">
<i class="fas fa-quote-left"></i>
<p>"服务非常棒！从行程规划到酒店预订，每一个细节都考虑得很周到，巴厘岛的旅行让我们全家都留下了美好的回忆。"</p>
<div class="client-info">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="客户头像">
<div>
<h4>李小明</h4>
<p>巴厘岛之旅</p>
</div>
</div>
</div>
<div class="testimonial-card">
<i class="fas fa-quote-left"></i>
<p>"欧洲四国游简直是梦想成真！导游非常专业，酒店位置也很好，已经推荐给身边所有想去欧洲的朋友了！"</p>
<div class="client-info">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="客户头像">
<div>
<h4>王芳</h4>
<p>欧洲四国游</p>
</div>
</div>
</div>
<div class="testimonial-card">
<i class="fas fa-quote-left"></i>
<p>"性价比超高！泰国套餐包含了所有我们想玩的项目，价格也很合理，客服回复速度很快，体验感一流。"</p>
<div class="client-info">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="客户头像">
<div>
<h4>张伟</h4>
<p>泰国海岛游</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer" id="contact">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>关于我们</h3>
<p>探索世界是一家致力于为您提供最优质旅行体验的专业旅行社，我们相信，每一次旅行都是一次心灵的探索。</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-section">
<h3>快速链接</h3>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务条款</a></li>
<li><a href="#">隐私政策</a></li>
</ul>
</div>
<div class="footer-section">
<h3>我们的服务</h3>
<ul>
<li><a href="#">机票预订</a></li>
<li><a href="#">酒店预订</a></li>
<li><a href="#">定制游</a></li>
<li><a href="#">签证服务</a></li>
</ul>
</div>
<div class="footer-section">
<h3>联系我们</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区XX大厦 1000F</li>
<li><i class="fas fa-phone"></i> +86 10 1234 5678</li>
<li><i class="fas fa-envelope"></i> info@explore-world.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 探索世界旅游网. 保留所有权利.</p>
</div>
</div>
</footer>
<script>
// 移动端菜单切换
const menuToggle = document.getElementById('menuToggle');
const navLinks = document.getElementById('navLinks');
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
// 切换图标
const icon = menuToggle.querySelector('i');
if (icon.classList.contains('fa-bars')) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-times');
} else {
icon.classList.remove('fa-times');
icon.classList.add('fa-bars');
}
});
// 导航栏滚动效果
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.padding = '10px 0';
navbar.style.boxShadow = '0 2px 15px rgba(0,0,0,0.1)';
} else {
navbar.style.padding = '15px 0';
navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
}
});
// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
window.scrollTo({
top: target.offsetTop - 80, // 考虑到固定导航栏的高度
behavior: 'smooth'
});
// 在移动端点击后关闭菜单
if (navLinks.classList.contains('active')) {
navLinks.classList.remove('active');
menuToggle.querySelector('i').classList.remove('fa-times');
menuToggle.querySelector('i').classList.add('fa-bars');
}
}
});
});
</script>
</body>
</html>
如何使用和修改：
- 保存文件：将上述所有代码复制并粘贴到一个新的文本文件中，将其命名为
travel.html或任何你喜欢的名字，确保扩展名是.html。 - 打开网页：用 Chrome、Firefox、Edge 等现代浏览器打开这个
travel.html文件,你就能看到一个完整的旅游网站界面。 - ：
- Logo和标题：修改
<title>标签和.logo链接中的文字。 - ：直接在 HTML 文件中修改
<h1>,<p>,<h3>等标签内的文字。 - 图片：每个
<img>标签都有一个src属性，它指向图片的URL,你可以将这里的图片链接替换成你自己的图片链接或本地图片路径。 - 颜色：在
<style>标签的开头，你可以修改全局颜色变量（如root中定义的颜色），或者直接搜索颜色代码（如#3498db）进行替换。 - 链接：所有
<a>标签的href属性都指向 ,你可以根据需要修改为实际的页面地址。
- Logo和标题：修改
这个代码为你提供了一个坚实的基础，你可以在此基础上进行扩展和定制，比如添加一个真正的联系表单、集成后端数据、或者添加更多的动画效果。
（图片来源网络，侵删）
