现代简约单页模板

这个模板非常适合个人博客、小型旅行社或目的地介绍页面，它结构清晰，包含导航、横幅、目的地推荐、特色服务和联系表单。

旅游网页模板html代码免费
（图片来源网络，侵删）

代码结构

您需要创建三个文件：

  • index.html (网页结构)
  • style.css (样式表)
  • script.js (简单的交互效果,如平滑滚动)

HTML 代码 (index.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="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <a href="#" class="logo">探索世界</a>
            <nav>
                <ul>
                    <li><a href="#home">首页</a></li>
                    <li><a href="#destinations">目的地</a></li>
                    <li><a href="#services">服务</a></li>
                    <li><a href="#contact">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <!-- 横幅区域 -->
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>发现下一个冒险</h1>
                <p>探索令人惊叹的目的地，创造难忘的回忆。</p>
                <a href="#destinations" class="cta-button">开始探索</a>
            </div>
        </section>
        <!-- 目的地推荐 -->
        <section id="destinations" class="destinations">
            <div class="container">
                <h2>热门目的地</h2>
                <div class="destination-grid">
                    <div class="destination-card">
                        <img src="https://via.placeholder.com/400x300" alt="巴厘岛">
                        <h3>巴厘岛</h3>
                        <p>享受阳光、沙滩和独特的文化体验。</p>
                    </div>
                    <div class="destination-card">
                        <img src="https://via.placeholder.com/400x300" alt="东京">
                        <h3>东京</h3>
                        <p>融合现代与传统的大都市，美食与购物的天堂。</p>
                    </div>
                    <div class="destination-card">
                        <img src="https://via.placeholder.com/400x300" alt="巴黎">
                        <h3>巴黎</h3>
                        <p>浪漫之都，艺术、时尚与美食的完美结合。</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 我们的服务 -->
        <section id="services" class="services">
            <div class="container">
                <h2>我们的服务</h2>
                <div class="services-grid">
                    <div class="service-item">
                        <h3>行程规划</h3>
                        <p>为您量身定制完美的旅行路线。</p>
                    </div>
                    <div class="service-item">
                        <h3>酒店预订</h3>
                        <p>精选全球优质酒店，确保您的舒适住宿。</p>
                    </div>
                    <div class="service-item">
                        <h3>机票预订</h3>
                        <p>提供最优惠的机票价格，轻松出行。</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 联系我们 -->
        <section id="contact" class="contact">
            <div class="container">
                <h2>联系我们</h2>
                <form id="contact-form">
                    <input type="text" placeholder="您的姓名" required>
                    <input type="email" placeholder="您的邮箱" required>
                    <textarea placeholder="您的留言" rows="5" required></textarea>
                    <button type="submit" class="cta-button">发送消息</button>
                </form>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>&copy; 2025 探索世界. 保留所有权利.</p>
        </div>
    </footer>
    <script src="script.js"></script>
</body>
</html>

CSS 代码 (style.css)

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Noto Sans SC', sans-serif;
    line-height: 1.6;
    color: #333;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
a {
    text-decoration: none;
    color: inherit;
}
.cta-button {
    display: inline-block;
    background-color: #007BFF;
    color: #fff;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}
.cta-button:hover {
    background-color: #0056b3;
}
/* 导航栏 */
.navbar {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}
.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #007BFF;
}
.navbar ul {
    list-style: none;
    display: flex;
}
.navbar ul li {
    margin-left: 20px;
}
.navbar ul li a {
    font-weight: 500;
}
/* 横幅区域 */
.hero {
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1920x1080');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    margin-top: 60px; /* 为固定导航栏留出空间 */
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
}
.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}
/* 目的地 */
.destinations {
    padding: 80px 0;
    text-align: center;
}
.destinations h2 {
    font-size: 2.5rem;
    margin-bottom: 50px;
}
.destination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.destination-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.destination-card:hover {
    transform: translateY(-10px);
}
.destination-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.destination-card h3 {
    padding: 20px 20px 10px;
}
.destination-card p {
    padding: 0 20px 20px;
    color: #666;
}
/* 服务 */
.services {
    background-color: #f8f9fa;
    padding: 80px 0;
    text-align: center;
}
.services h2 {
    font-size: 2.5rem;
    margin-bottom: 50px;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.service-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.service-item h3 {
    margin-bottom: 15px;
    color: #007BFF;
}
/* 联系表单 */
.contact {
    padding: 80px 0;
    text-align: center;
}
.contact h2 {
    font-size: 2.5rem;
    margin-bottom: 50px;
}
#contact-form {
    max-width: 600px;
    margin: 0 auto;
}
#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
}
#contact-form button {
    width: 100%;
}
/* 页脚 */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

JavaScript 代码 (script.js)

// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});
// 简单的表单提交提示 (实际应用中需要后端支持)
document.getElementById('contact-form').addEventListener('submit', function(e) {
    e.preventDefault();
    alert('感谢您的留言！我们会尽快与您联系。');
    this.reset();
});

Bootstrap 响应式模板

如果您希望快速构建一个功能强大且完全响应式的网站，可以使用 Bootstrap 框架，这个模板利用了 Bootstrap 的网格系统和组件。

HTML 代码 (index-bs.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Bootstrap 旅游网站</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <style>
        /* 自定义样式 */
        .hero-bs {
            background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://via.placeholder.com/1920x1080');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 150px 0;
            text-align: center;
        }
        .feature-icon {
            font-size: 3rem;
            color: #0d6efd;
            margin-bottom: 1rem;
        }
        .card-img-top {
            height: 200px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#"><i class="bi bi-globe2"></i> 梦想之旅</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">目的地</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">关于我们</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">联系我们</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <main>
        <!-- 横幅 -->
        <section class="hero-bs">
            <div class="container">
                <h1 class="display-4">开启您的下一次旅程</h1>
                <p class="lead">探索世界，发现未知，留下足迹。</p>
                <a href="#" class="btn btn-primary btn-lg">立即预订</a>
            </div>
        </section>
        <!-- 特色服务 -->
        <section class="py-5">
            <div class="container">
                <div class="row text-center">
                    <div class="col-md-4 mb-4">
                        <i class="bi bi-airplane feature-icon"></i>
                        <h3>便捷预订</h3>
                        <p>一键预订机票、酒店，行程轻松搞定。</p>
                    </div>
                    <div class="col-md-4 mb-4">
                        <i class="bi bi-compass feature-icon"></i>
                        <h3>专业向导</h3>
                        <p>经验丰富的向导带您深度体验当地文化。</p>
                    </div>
                    <div class="col-md-4 mb-4">
                        <i class="bi bi-shield-check feature-icon"></i>
                        <h3>安全保障</h3>
                        <p>全程无忧，24小时客服支持，保障您的旅途安全。</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- 热门线路 -->
        <section class="py-5 bg-light">
            <div class="container">
                <h2 class="text-center mb-5">热门旅游线路</h2>
                <div class="row">
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="card h-100">
                            <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">欧洲经典七国游</h5>
                                <p class="card-text">一次旅行，领略法、意、德、瑞、奥、荷、比七国风情。</p>
                                <a href="#" class="btn btn-outline-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="card h-100">
                            <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">日本樱花季之旅</h5>
                                <p class="card-text">在最美的季节，探访东京、京都、大阪的樱花盛宴。</p>
                                <a href="#" class="btn btn-outline-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="card h-100">
                            <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">马尔代夫蜜月套餐</h5>
                                <p class="card-text">水上别墅、私人沙滩，享受二人世界的浪漫时光。</p>
                                <a href="#" class="btn btn-outline-primary">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4">
        <div class="container text-center">
            <p>&copy; 2025 梦想之旅. All Rights Reserved.</p>
        </div>
    </footer>
    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

如何使用这些模板

  1. 复制代码：将上面的 HTML、CSS 和 JavaScript 代码分别复制到对应的 .html, .css, 和 .js 文件中。
  2. 创建文件：在同一文件夹下创建这三个文件。
  3. 替换图片：代码中的图片使用了 https://via.placeholder.com/ 这个占位符服务，您需要将其替换为您自己的真实旅游照片，最好将图片也放在同一文件夹下，然后使用相对路径（images/bali.jpg）。
  4. ：根据您的品牌和业务，修改文本、颜色、字体等。
  5. 部署：将整个文件夹上传到任何网络服务器或静态网站托管服务（如 GitHub Pages, Netlify, Vercel）上,您的网站就可以在线访问了。

其他获取免费模板的资源

如果您想寻找更多现成的模板,可以访问以下网站：

  • ThemeForest (Envato Market)：虽然是付费的，但质量极高,是寻找专业级模板的首选。
  • HTML5 UP：提供大量设计精美、完全免费且基于响应式框架的模板,可以直接下载使用。
  • BootstrapMade：专门提供基于 Bootstrap 的免费模板,种类繁多。
  • Templatemo：同样提供大量免费的响应式 HTML5 模板。

希望这些模板和资源能帮助您快速搭建出心仪的旅游网站！

旅游网页模板html代码免费
（图片来源网络，侵删）
旅游网页模板html代码免费
（图片来源网络，侵删）