【期末网页设计作业】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 属性实现多列布局，代码如下：
/* 全局样式设置 */
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 实现自动轮播和手动切换功能，通过定时器控制轮播时间，代码如下：
// 轮播图自动播放
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. 登录表单验证
实现了登录表单的基本验证功能，包括非空验证和表单重置，代码如下：
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 属性实现图片悬停放大效果，增强用户体验：
.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 标准，结构清晰，注释完整，便于维护和扩展。
以上就是本次香港旅游网站设计的全部内容，通过这个项目不仅巩固了前端基础知识，也提升了实际开发能力，为今后的学习和工作打下了坚实基础。