【期末网页设计作业】HTML+CSS+JS 旅行社网站、旅游主题设计与实现（附源码）

网页作品简介

旅行社网站网站功能。主要有：首页、旅行信息、订购、风景欣赏、登录、注册等总共 6 个页面 html 下载。该网站以旅游为主题，展示各类旅游产品、景点信息，为用户提供旅游相关的浏览、查询和预订等功能，整体风格贴合旅游行业特色，界面清新直观。

网页作品编辑

此作品为旅行社主题网页设计题材，代码为学生水平 html+css+JavaScript 布局制作，作品下载后可使用任意 HTML 编辑软件（如：DW、HBuilder、Vscode、NotePAD、Sublime、Webstorm、Notepad++ 等任意 HTML 软件编辑修改网页）。无论是调整页面内容、修改样式风格还是完善功能模块，都能便捷操作。

网页作品技术

运用了 Div+CSS 布局、JavaScript 交互特效（如搜索框聚焦 / 失焦背景变化）、Table 布局、导航栏交互效果、表单设计（登录注册表单）、盒子模型布局等技术。涵盖了网页设计所需的诸多知识点，包括语义化标签的使用、CSS 样式美化、JavaScript 简单交互逻辑实现等，满足网页设计的基础技术要求。

获取完整源码

请关注私信或者在评论区留言获取完整源码及数据库文件，包含所有完整代码和使用说明。

作品部分截图：

项目概述

本次课程设计了一个旅游主题的旅行社网站，采用 HTML、CSS 和 JavaScript 技术栈开发，包含首页、旅行信息、订购、风景欣赏、登录和注册等多个功能页面。网站整体风格清新自然，符合旅游主题的定位，同时保证了良好的用户体验和响应式布局。

技术栈与开发工具

前端技术：HTML5、CSS3、JavaScript
开发工具：VS Code、Dw、Hb等
版本控制：Git（可选）
浏览器测试：Chrome、Firefox、Edge

网站结构设计

网站采用模块化设计，主要包含以下几个部分：

公共组件：头部导航栏、页脚信息
功能页面 ：
- 首页（index.html）
- 旅行信息页（information.html）
- 订购页（buy.html）
- 风景欣赏页（scenery.html）
- 登录页（login.html）
- 注册页（register.html）
样式文件 ：
- base.css：基础样式
- style.css：通用样式
- information.css：信息页样式
- buy.css：订购页样式

核心功能实现

1. 导航栏设计

导航栏采用固定定位，确保在页面滚动时始终可见，包含网站 logo 和主要功能入口。

html 复制代码

<header id='header'>
    <div class='center'>
        <h1 class="logo">木毛旅行社</h1>
        <nav style='overflow:hidden;'>
            <h2 class="none">网站导航</h2>
            <ul class="link">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="information.html">旅行信息</a></li>
                <li><a href="buy.html">订购</a></li>
                <li><a href="scenery.html">风景欣赏</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="register.html">注册</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS 样式设计：

css 复制代码

#header{
    width:100%;
    min-width: 1280px;
    height: 70px;
    background-color: #333;
    box-shadow: 0 3px 5px rgba(0,0,0,0.5);
    position: relative;
    z-index: 999;
}

#header .link{
    width: 720px;
    height:70px;
    float: right;
    list-style: none;
}

#header .link li{
    width:120px;
    height: 70px;
    background-color: #333;
    text-align: center;
    line-height: 70px;
    color:#eee;
    float: left;
}

#header .link a:hover,#header .link .active{
    background-color: #000;
}

2. 搜索功能实现

搜索区域采用全屏背景图设计，当用户聚焦搜索框时，背景会添加半透明遮罩，提升用户体验。

html 复制代码

<div id="search">
    <div id="mask"></div>
    <div class="center"></div>
    <input class="search" id="inp" type="text" placeholder='请输入城市或景点' />
    <button class="button">搜索</button>
</div>

JavaScript 实现搜索框交互效果：

javascript 复制代码

var search = document.getElementById('inp');
var mask = document.getElementById('mask');
search.onfocus = opacity;
search.onblur = stop;

function opacity() {
    mask.style.backgroundColor = 'rgba(0,0,0,.4)';
}

function stop() {
    mask.style.backgroundColor = 'rgba(0,0,0,0)';
}

3. 旅游产品展示

旅游产品展示区域采用卡片式布局，每个产品包含图片、标题、描述、价格等信息，悬停时有交互效果。

html 复制代码

<figure>
    <a href="#"><img src="image/tour1.jpg" alt='曼谷-芭提雅6日游'></a>
    <figcaption><strong class='title'>&lt;曼谷-芭提雅6日游&gt;</strong>包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费卷</figcaption>
    <div>
        <span class='price'>¥ <strong>2865</strong> 起</span>
        <em class='sat'>满意度77%</em>
    </div>
    <div class="type">
        国内长线
    </div>
</figure>

CSS 样式设计：

css 复制代码

#tour figure{
    display: inline-block;
    width: 380px;
    border:1px solid #ddd;
    border-radius:4px;
    margin:15px 12px;
    padding:4px;
    position: relative;
}

#tour .price{
    color:#f60;
}

#tour .price strong{
    font-size: 20px;
    letter-spacing:1px;
}

#tour .type{
    display: inline-block;
    width: 90px;
    height: 25px;
    line-height: 25px;
    font-style: normal;
    background-color:#59b200;
    letter-spacing: 1px;
    text-align: center;
    color:#fff;
    position: absolute;
    top:4px;
    left: 4px;
}

4. 旅行信息列表

信息列表页采用左右分栏布局，左侧为信息内容，右侧为侧边栏推荐。

html 复制代码

<div id="containter">
    <aside class='sidebar'>
        <!-- 侧边栏内容 -->
    </aside>
    <div class="list">
        <!-- 信息列表内容 -->
        <div class="content">
            <img src="image/tour6.jpg" />
            <figcaption>
                <header>
                    <hgroup>
                        <h2>曼谷、芭提雅6日游</h2>
                        <h3>包团特惠，超丰富景点，升级1晚国五，无自费...</h3>
                    </hgroup>
                </header>
                <!-- 其他信息 -->
            </figcaption>
        </div>
    </div>
</div>

设计亮点

视觉层次分明：通过颜色对比、字体大小和间距控制，建立清晰的视觉层次结构。
交互动效丰富：
- 导航栏 hover 效果
- 搜索框聚焦 / 失焦背景变化
- 标签点击变色效果
响应式设计：使用 min-width 确保在不同屏幕尺寸下的显示效果，通过百分比宽度实现自适应布局。
模块化 CSS：将样式按功能拆分到不同 CSS 文件，提高代码复用性和可维护性。
语义化 HTML：合理使用 header、nav、section、footer 等语义化标签，提升页面结构清晰度。

总结与展望

本旅行社网站实现了旅游信息展示、产品浏览、搜索等核心功能，界面美观，交互友好。通过本次设计，加深了对 HTML、CSS 和 JavaScript 的理解和应用能力。

结语

本项目作为期末网页设计作业，充分运用了前端开发的基础知识，实现了一个功能完整、界面美观的旅行社网站。在开发过程中，不仅提升了技术能力，也培养了对用户体验和界面设计的理解。希望这个项目能为学习前端开发的同学提供一些参考和启发。