【期末网页设计作业】HTML+CSS+JS 香港旅游网站设计与实现（附源码）

网页作品简介

HTML 网站模板。主要有：首页、游客登录等页面（可根据需求扩展至景点详情、美食介绍等更多页面）html 下载。该网站站以香港旅游为主题，涵盖了香港景点展示、美食推荐、图片轮播等核心旅游信息模块，为用户提供沉浸式的香港旅游信息浏览体验。

网页作品编辑

此作品为学生期末网页设计作业，属于旅游主题网站设计题材，代码为学生水平 html+css+JavaScript 布局制作。作品下载后可使用任意 HTML 编辑软件（如：DW、HBuilder、Vscode、NotePAD、Sublime、Webstorm、Notepad++ 等任意 HTML 软件）编辑修改网页内容、样式及交互效果。

网页作品技术

采用 Div+CSS 布局构建整体页面框架，运用 JavaScript 实现图片轮播特效、表单校验功能，结合 Table 布局（隐含于整体结构中）、导航栏交互效果、登录表单设计、盒子模型布局等技术点。涵盖了前端基础核心知识点，包括元素定位、样式美化、事件处理、页面跳转等，适合作为期末作业展示前端技术应用能力。

获取完整源码

请关注私信或者在评论区留言获取完整源码及相关资源文件。

作品运行截图

项目概述

本次课程设计了一个香港旅游主题网站，采用 HTML、CSS 和 JavaScript 技术栈开发，包含网站首页、登录页面等核心功能模块，实现了景点展示、美食推荐、图片轮播等旅游网站常见功能。网站整体风格统一，交互友好，响应式设计适配不同浏览场景。

技术栈与开发工具

前端技术：HTML5 + CSS3 + JavaScript
开发工具：VS Code、dw、hb等等
浏览器测试：Chrome、Edge、Firefox

网站结构设计

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

顶部导航栏（含 logo 和主导航）
首页轮播图展示区
景点概括板块
特色景点展示区
特色美食推荐区
登录功能模块
页脚信息区

核心功能实现

1. 页面布局与样式设计

采用 CSS 实现整体布局，使用 margin:0 auto 实现居中效果，通过 float 属性实现多列布局，代码如下：

css 复制代码

/* 全局样式设置 */
body {
  margin: 0 auto;
  font-size: 12px;
  font-family: "微软雅黑", arial;
  line-height: 22px;
}

/* 顶部区域样式 */
.top {
  height: 200px;
  width: 1024px;
  position: relative;
  margin: 0 auto;
} 

/* 导航栏样式 */
.daohang {
  width: 1024px;
  height: 47px;
  background-color: #aa00ff;
  margin: 0 auto;
}

/* 主内容区样式 */
.main1 {
  width: 1022px;
  margin: 0 auto;
  margin-top: 10px;
}

2. 图片轮播功能

使用 JavaScript 实现自动轮播和手动切换功能，通过定时器控制轮播时间，代码如下：

javascript 复制代码

// 轮播图自动播放
let timeId = setInterval(onmouseclickHandle, 2000);

// 鼠标悬停停止轮播
box.onmouseover = function () {
  arr.style.display = "block";
  clearInterval(timeId);
};

// 鼠标离开继续轮播
box.onmouseout = function () {
  arr.style.display = "none";
  timeId = setInterval(onmouseclickHandle, 2000);
};

// 右箭头点击事件
right.onclick = onmouseclickHandle;
function onmouseclickHandle() {
  if (pic == list.length - 1) {
    pic = 0;
    ulObj.style.left = 0 + "px";
  }
  pic++;
  animate(ulObj, -pic * imgWidth);
  // 同步更新指示器
  if (pic == list.length - 1) {
    olObj.children[olObj.children.length - 1].className = "";
    olObj.children[0].className = "current";
  } else {
    for (let i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    olObj.children[pic].className = "current";
  }
}

3. 登录表单验证

实现了登录表单的基本验证功能，包括非空验证和表单重置，代码如下：

javascript 复制代码

function validateForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var errorMessage = document.getElementById("error-message");

  // 检查用户名和密码是否为空
  if (username === "" || password === "") {
    errorMessage.textContent = "用户名和密码都是必填字段";
    document.getElementById("username").style.border = "1px solid red";
    document.getElementById("password").style.border = "1px solid red";
  } else {
    // 模拟登录成功，跳转至首页
    window.location.href = "index.html";
  }
}

// 重置表单
document.getElementById('resetBtn').addEventListener('click', function () {
  document.getElementById('username').value = '';
  document.getElementById('password').value = '';
});

4. 图片悬停效果

使用 CSS3 的 transform 属性实现图片悬停放大效果，增强用户体验：

css 复制代码

.xz img {
  width: 160px;
  height: 120px;
  margin: 5px;
  float: left;
  /* 过渡配置 */
  transition: all 0.5s ease 0.1s;
}
.xz img:hover {
  transform: scale(1.1);
}

页面效果展示

1. 首页效果

首页包含轮播图展示区、景点概括、特色景点和美食推荐等板块，整体风格统一，色彩以紫色为主色调，搭配白色背景，营造出清新明快的视觉效果。

2. 登录页面

登录页面设计简洁大方，包含用户名、密码输入框和登录、重置按钮，实现了基本的表单验证功能，提升了用户体验。

总结与展望

本项目完成了一个功能基本完善的香港旅游网站，实现了景点展示、图片轮播、登录验证等核心功能。通过本次设计，加深了对 HTML、CSS 和 JavaScript 的理解和应用能力。

未来可以进一步优化的方向：

增加响应式设计，适配移动设备
完善用户注册和个人中心功能
增加景点详情页和预订功能
优化页面加载速度和动画效果

源代码说明

项目源代码结构清晰，主要包含：

index.html：网站首页
denglu.html：登录页面
css/style.css：样式表文件
img/：图片资源文件夹

所有代码均遵循 Web 标准，结构清晰，注释完整，便于维护和扩展。

以上就是本次香港旅游网站设计的全部内容，通过这个项目不仅巩固了前端基础知识，也提升了实际开发能力，为今后的学习和工作打下了坚实基础。

【期末网页设计作业】HTML+CSS+JS 香港旅游网站设计与实现 （附源码）

网页作品简介

网页作品编辑

网页作品技术

获取完整源码