HTML+CSS+JS+LayUI—西湖 景区介绍网

博客概要

     简单分享基于前端技术制作完成的“西湖”景区介绍网~

系统开发概要

     这是基于HTML+CSS+JS+LayUI等前端技术开发的 西湖 景区介绍网，为的是通过页面的跳转等效果，完成西湖景区的信息展示和宣传。

项目名称：	西湖
开发环境：	Sublime
相关技术：	HTML+CSS+JS+LayUI
项目描述：	通过页面的跳转等效果，完成西湖景区的信息展示和宣传 介绍西湖的相关故事、游玩概略以及相关景点的详细介绍
责任描述：	负责开发的全过程。 1 .整体界面设计搭建 2.资料的收集整理 3.相应页面代码的详细编撰 4.编写中、整合运行错误时的相关调试 5.相关技术文档的撰写
技术描述：	该项目采用前端技术开发 1.采用layui前端框架，遵循原生HTML/CSS/JS书写组织形式 2.利用layui丰富的组件开发，layer开发web弹窗 3.利用HTML/CSS/JS开发大部分设计想法

简单需求分析

     需要通过网页一系列的效果展示，介绍西湖的相关信息，包括西湖故事（典故神话、人文诗词等内容）、西湖十景（景点的介绍）、游玩攻略（攻略、地图等），以及一个简单的动态登录效果。

功能性需求

1.网页页面下拉的时候，设置返回顶部按钮，点击实现返回至网页顶部效果
2.首页，js实现轮播图效果，合理展示西湖的图文信息
3.西湖故事，合理展示西湖的图文信息；细分的部分，使用下拉菜单实现，点击出现下拉菜单，点击相应菜单，便能跳转至相应的页面；西湖故事概略展示部分，运用js载入“模版引擎” ，并在相应的位置编辑模板格式，要求格式一致、美观；头部js实现简单动态效果，点击实现图片、文字的位置互换
4.游玩攻略，合理展示西湖的图文信息
5.西湖十景，合理展示西湖的图文信息；网页添加锚点，点击相应的西湖十景名称，跳转相应的页面的锚点处
6.登录，js实现简单的动态登录效果，点击“登录”出现登录页面，在输入框内输入正确的用户名、密码，可实现简单的登录判断

非功能性需求

1.保持图形图像的清晰，使用ps处理
2.网页排版美观，富有设计感
3.内容展示，要有真材实料，需要真实地反应西湖的人文、环境，让网页浏览者能够准确获得有用的相关信息

页面设计

     简单展示各个页面的样式，简要说明功能效果~

1.导航栏

运用多重“div”标签嵌套设置外框，使用“a”标签用作超链接跳转
使用layui结合“ul”和“li”标签
实现导航栏的排版，再结合css设置自定义样式

2.首页

2.1头部轮播图

---

2.2主体导航栏
通过图文结合的方式，在首页主体部分制作一个主体导航栏
点击图文可以跳转至相应页面
使用js实现鼠标悬停图片提示效果
悬停鼠标，可以提示放大查看图片

---

2.3主体展示

---

2.4底部信息

3.西湖故事

3.1动态头部

---

3.2模板引擎

---

3.3下拉菜单
鼠标悬停实现下拉菜单，点击出现下拉菜单
点击相应菜单，便能跳转至相应的页面

4.游玩攻略

4.1简单介绍

---

4.2旅行札记概要
点击跳转相应札记的具体展示页面

5.西湖十景

5.1下拉
点击出现下拉菜单
点击相应菜单，便能跳转至相应的页面

---

5.2锚点

6.动态登录

击“登录”出现登录页面
在输入框内输入正确的用户名、密码，可实现简单的登录判断

7.其他

7.1返回顶部
设置一个“button”标签，内部用“img”标签存放图标，再运用js，编写具体代码，实现返回顶部的效果。
其中：
“onclick”事件实现鼠标点击触发，再设置js函数“function”，通过“document.body.scrollTop”获取滚动条与顶部的距离，设置“document.documentElement.scrollTop”当前页面的滚动条纵坐标位置为0，再使之和滚动条与顶部距离相等，实现“回到顶部”的效果。

    

总结

     现在的前端技术也是很重要的，特别是实现了前后端分离之后，前端在开发中的作用也是越来越大了，所有作为开发者，尽管是以后端为主方向，前端的知识也是要多少了解的，还需要继续学习。加油~