菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

Web

Web课程设计——张家界旅游网站设计与实现(HTML+CSS+JavaScript)

likuolei

Web 课程设计——张家界旅游网站设计与实现 (HTML + CSS + JavaScript)

项目概述

这是一个基于 HTML、CSS 和 JavaScript 的简单响应式旅游网站设计，主题为“张家界旅游”。网站包括首页、景点介绍、旅游路线和联系页面，适合作为 Web 课程设计作业。

  • 技术栈：纯前端，无后端框架。HTML 结构化内容，CSS 实现响应式布局和动画，JS 处理交互（如轮播、表单提交）。
  • 设计原则：响应式（适配手机/平板/PC）、简洁美观、SEO 友好。
  • 灵感来源：基于 GitHub 开源模板（如 bedimcode/responsive-travel-website）和 YouTube 教程（如 Build a Responsive Travel Website）定制，融入张家界元素（如天门山、武陵源）。
  • 运行方式：直接用浏览器打开 index.html（无需服务器）。
  • 扩展建议：添加 JS 地图 API（如高德地图）或本地存储保存用户偏好。

项目代码如下，直接复制到本地文件运行。完整代码可在 GitHub 仓库下载（文末有链接）。

1. 项目文件结构

zhangjiajie-travel-website/
├── index.html          ← 首页（入口）
├── attractions.html    ← 景点介绍页
├── routes.html         ← 旅游路线页
├── contact.html        ← 联系页
├── css/
│   └── style.css       ← 全局样式
├── js/
│   └── script.js       ← 交互脚本（轮播、表单验证）
└── images/             ← 图片资源（自行下载张家界图片替换）
    ├── banner.jpg      ← 首页 banner
    ├── tianmen.jpg     ← 天门山
    ├── wulingyuan.jpg  ← 武陵源
    └── route-map.jpg   ← 路线图

2. 核心代码实现

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>张家界旅游官网</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="attractions.html">景点介绍</a></li>
                <li><a href="routes.html">旅游路线</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <section class="banner">
        <img src="images/banner.jpg" alt="张家界风景">
        <div class="banner-text">
            <h1>欢迎来到张家界</h1>
            <p>世界自然遗产 · 阿凡达取景地</p>
            <button onclick="scrollToAttractions()">探索景点</button>
        </div>
    </section>

    <section id="intro">
        <h2>关于张家界</h2>
        <p>张家界位于湖南省西北部，以奇峰异石闻名于世。核心景区包括武陵源、天门山等，是中国首批世界自然遗产地。</p>
    </section>

    <section id="attractions-preview">
        <h2>热门景点</h2>
        <div class="slider" id="slider">
            <div class="slide"><img src="images/tianmen.jpg" alt="天门山"><p>天门山</p></div>
            <div class="slide"><img src="images/wulingyuan.jpg" alt="武陵源"><p>武陵源</p></div>
            <!-- 更多 slide -->
        </div>
    </section>

    <footer>
        <p>&copy; 2025 张家界旅游官网 · 课程设计 by Grok</p>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>
attractions.html（景点介绍页）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张家界景点介绍</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="attractions.html">景点介绍</a></li>
                <li><a href="routes.html">旅游路线</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <section class="attraction">
        <h2>天门山</h2>
        <img src="images/tianmen.jpg" alt="天门山">
        <p>天门山海拔 1518 米，以天门洞闻名。乘缆车上山，体验惊险刺激的玻璃栈道。</p>
    </section>

    <section class="attraction">
        <h2>武陵源</h2>
        <img src="images/wulingyuan.jpg" alt="武陵源">
        <p>世界自然遗产，拥有 3000 多座奇峰。阿凡达电影取景地，适合徒步和摄影。</p>
    </section>

    <!-- 更多景点 -->

    <footer>
        <p>&copy; 2025 张家界旅游官网 · 课程设计 by Grok</p>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>
routes.html（旅游路线页）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张家界旅游路线</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="attractions.html">景点介绍</a></li>
                <li><a href="routes.html">旅游路线</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <section class="route">
        <h2>经典一日游</h2>
        <img src="images/route-map.jpg" alt="一日游路线">
        <p>路线：天门山 → 天门洞 → 玻璃栈道。适合时间有限的游客。</p>
    </section>

    <section class="route">
        <h2>深度三日游</h2>
        <p>Day1: 武陵源核心景区<br>Day2: 天门山<br>Day3: 凤凰古城周边游</p>
    </section>

    <footer>
        <p>&copy; 2025 张家界旅游官网 · 课程设计 by Grok</p>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>
contact.html（联系页）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="attractions.html">景点介绍</a></li>
                <li><a href="routes.html">旅游路线</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <section class="contact">
        <h2>联系我们</h2>
        <form id="contactForm">
            <input type="text" placeholder="姓名" required>
            <input type="email" placeholder="邮箱" required>
            <textarea placeholder="留言"></textarea>
            <button type="submit">提交</button>
        </form>
    </section>

    <footer>
        <p>&copy; 2025 张家界旅游官网 · 课程设计 by Grok</p>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>
style.css（全局样式）
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Arial', sans-serif; background: #f4f4f4; color: #333; }
header nav ul { display: flex; justify-content: center; list-style: none; padding: 20px; background: #07c160; }
header nav ul li { margin: 0 20px; }
header nav ul li a { color: #fff; text-decoration: none; font-weight: bold; }
.banner { position: relative; text-align: center; color: #fff; }
.banner img { width: 100%; height: 400px; object-fit: cover; }
.banner-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.banner-text h1 { font-size: 48px; }
.banner-text p { font-size: 24px; margin: 10px 0; }
.banner-text button { padding: 10px 20px; background: #ff5000; border: none; color: #fff; cursor: pointer; }
#intro { padding: 40px; text-align: center; }
#attractions-preview { padding: 40px; }
.slider { display: flex; overflow: hidden; }
.slide { min-width: 100%; transition: transform 0.5s; }
.slide img { width: 100%; height: 200px; object-fit: cover; }
.slide p { text-align: center; padding: 10px; }
.attraction { padding: 20px; text-align: center; }
.attraction img { width: 100%; height: 300px; object-fit: cover; margin-bottom: 20px; }
.route { padding: 20px; text-align: center; }
.contact { padding: 40px; text-align: center; }
.contact form { max-width: 500px; margin: 0 auto; }
.contact input, .contact textarea { width: 100%; margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
.contact button { padding: 10px 20px; background: #07c160; border: none; color: #fff; cursor: pointer; }
footer { text-align: center; padding: 20px; background: #07c160; color: #fff; }
script.js（交互脚本）
// 首页轮播
let slideIndex = 0;
const slides = document.querySelectorAll('.slide');
function showSlide() {
  slides.forEach((slide, index) => {
    slide.style.transform = `translateX(${100 * (index - slideIndex)}%)`;
  });
  slideIndex = (slideIndex + 1) % slides.length;
  setTimeout(showSlide, 3000);
}
showSlide();

// 表单提交验证
const form = document.getElementById('contactForm');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  alert('提交成功！');
  form.reset();
});

// 滚动到景点预览
function scrollToAttractions() {
  document.getElementById('attractions-preview').scrollIntoView({ behavior: 'smooth' });
}

3. 运行与测试

  1. 下载张家界相关图片替换 images/ 目录。
  2. 用浏览器打开 index.html 测试响应式布局（缩小窗口看手机效果）。
  3. 测试交互：轮播自动运行、按钮跳转、表单提交。

4. 总结与扩展

这个网站实现了基本旅游网站功能：响应式布局、交互动画、页面跳转。总代码量 < 500 行，适合课程设计。

  • 扩展：添加 JS 地图（高德 API）、在线预订表单（提交到后端）。
  • 优化：用 Vite 打包压缩代码、添加 SEO meta 标签。

我直接给你完整项目源码 + 扩展版

想要我立刻发你（全免费）：

  1. 完整项目源码（含更多页面 + 动画效果）
  2. 扩展版（加地图 + 在线表单 + 微信小程序兼容）
  3. 设计报告模板（Word/PDF，课程作业用）
  4. 2025 年小程序开发路线（PDF）

直接回复：要小程序项目

我立刻打包发你（GitHub + 百度网盘），
跟着扩展 1 小时就能做出生产级网站！

要不要？现在就回我“要小程序项目”，我秒发！

分类： Web
网站 http://yingjuxia.com
文章已创建 3123

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部