HTML+CSS旅游风景主题旅游网页制作
写在前面
旅游风景主题网页制作，旅游如同大自然精心布置的画卷，每一处都散发着其的魅力，吸引着无数旅人的目光与脚步。山川壮丽，河流潺潺，古镇宁静，都市繁华，无一不让人心驰往。无论是追寻历史的痕迹，还是沉醉于自然的怀抱，人们总能在这片片风景中找到心灵的慰藉与喜悦。博主我也喜欢闲暇之际出去走走，给自己的心灵充个电。
当然这次还是因为旅游主题的网页制作呼声较高，本次就分享旅游相关的网页，总共8个页面（1个页面+6个二级页面+1个页面），分别是首页、旅行趣事、旅行美景、旅行指南、旅行视频区、留言区、西湖简介页、西湖十景页。3个效果（css效果+js效果），分别是CSS底部背景色变化动画效果、js鼠标移入移除效果，js手风琴效果。也借这个机会让更多的人对一些js简单效果，css动画有个的认识，里面的内容当然也可以自己去加调整修改的。更多的是想提供一个效果给到大家，希望能给大家带来一些作业上的创意上的灵感，也希望大家能够从中得到启发，解决自己眼前的作业窘境，当然能够学到知识是，废话也不多说了，我尽量做到定期更新哈，希望大家能持续关注我哈！
一、网页主题
本次主要研究的方向是一个旅游主题相关的，主要包括首页、旅行趣事、旅行美景、旅行指南、旅行视频区、留言区、西湖简介页、西湖十景页总共8个页面，采用图文结合的方式搭配，希望能入大家的法眼，这个也是基于html+css+js开发的旅游风景主题的网页，包含多个效果，创作不易，有需要源码的可以关注宫众号《IT黄大大》回复【w031旅游】或【旅游网页】，即可获取源码。
话不多说先看下面的效果图，是不是你们要的风格，希望大家能够喜欢这类风格的哈，有宝贵意见都可以留言。
二、网页效果
菜单切换效果
PageA、整体页
Page1、首页
Page2、旅行趣事页
Page3、旅行美景页
Page4、旅行指南页
Page5、旅行视频页
Page6、留言页
Page7、西湖简介页
Page8、西湖十景页
三、网页架构与技术
3.1 脑海构思
要想做好一个页面，首先脑子里面得去有个架构，就好比是庖丁解牛，将架构了然于胸，什么困难都会迎刃而解，在制作这种类似网页作业的时候我们一般都是采用浮动布局的方式来实现的，因为这类静态页面的兼容性要求不高，所以我们要想好大致的框架。
其实这次的内容还是相对很丰富的，超链接，表单，图文，表格，一二级页面等，希望能够对您带来一些参照价值，的满足大家的要求。
此次主要设置了8个页面，分别是首页、旅行趣事、旅行美景、旅行指南、旅行视频区、留言区、西湖简介页、西湖十景页，纯html+css+js开发，技术div+css+js。
3.2 整体布局
在我的页面制作过程中，我主要采用的是浮动式布局，从左往右，从上至下的顺序来进行设计制作的，当然在制作之前我会先给页面框架做一个布局，首先我会设计下面几部分：
头部：head（菜单栏，可以切换页面）
Banner：广告图（主要是展示不同主题页面的图片，突出内容主题）
主体：main（内容展示，每个页面不同）
其中头部模块都是公用的，针对每个页面的切换主要体现在中间的主体模块，这也是一个好的网页作品的元素，不然就是斜坡上盖房子了。
声明：创作于博主《IT黄大大》，欢迎大家转载，烦请转前注明出处，感谢大家的支持，更多专栏可关注文尾唯心宫众号《IT黄大大》
3.3 技术说明书
主要应用了前端三个模块的技术HTML + CSS+JS
HTML模块：主要针对页面的结构搭建，该网站整体采用的是div标签作为盒子，其中包含:
有关有序列表 ul li 、
段落标签 p、
图片标签 img 、
表单标签input和textarea、
视频标签video source、
链接标签 a
字体标签 h2 h3.等
CSS模块：
主要采用的是浮动式布局的方式，页面搭建主要通过设置div的border属性来确定每个div的位置，然后针对不同的位置定位。针对每个元素通过margin和padding属性来设置不同模块的相对位置。
主要用到了font的文字基本属性，background设置相关背景色。文本居中text-align:center
然后标签模块采用的是border属性，设置div的左边框的厚度和颜色。
Css动画效果主要在底部栏体现，针对底部颜色做改变，从开始的这个
变到这个
后变回原来的样子。主要应用了css3里面的animation属性
Js模块
主要实现两个效果
1.鼠标移入移出时改变文字的颜色和大小
主要应用了鼠标移入移出属性onmouseover,onmouseout
2.实现钢琴键效果：鼠标移入div改变它的位置属性，主要改变margin属性从而实现这种效果的。
四、网页源码
4.1 主页模块
Html
Css
4.2 完整目录结构
亚星管理平台菁思福科技，优秀企业首选的互联网供应服务商
亚星管理平台菁思福科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
亚星管理平台菁思福科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。亚星管理平台菁思福科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信亚星官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
