写在前面
接着分享哈，还是学生时代的库存，当时是为了不同风格的素材，所以自己选择了多个方向的主题来练习，这次继续把自己学生时代原创性旅游主题网页制作实例分享出来哈，希望能给后生们带来一些实质性的帮助哈，当然也分享了源代码在微信公众号《IT黄大大》上面，文尾有公众号二维码，回复“杭州旅游”即可领取完整源码包。
涉及知识
期末作业网页制作练习，网页制作大作业，旅游主题网页，介绍风景网页制作，网页制作demo源代码，多个页面旅游网页制作，html+css多页面样例，原创网页制作源代码。
原创于CSDN博主《IT黄大大》，特此声明，微信公众号《IT黄大大》有更多网页demo源码，转载请说明出处哟
效果展示
page1、首页
page2、西湖游
page3、杭州美食
page4、灵隐寺
page5、千岛湖
page6、留言
1、网页构思
这次是基于旅游主题的网页开发与制作，希望给期末作业的同学们能有一定的参考价值，当然本质希望大家能够去通过这个文章找灵感，别的不多说，旅游主题网页制作思路如下：
要想做好一个页面，首先脑子里面得去有个架构，就好比是庖丁解牛，将架构了然于胸，什么困难都会迎刃而解，在制作这种类似网页作业的时候我们一般都是采用浮动布局的方式来实现的，因为这类静态页面的兼容性要求不高，所以我们要想好大致的框架。
在我的页面制作过程中，我主要采用的是浮动式布局，从左往右，从上至下的顺序来进行设计制作的，当然在制作之前我会先给页面框架做一个布局，首先我会设计下面几部分：
头部：banner（主要包括导航图和logo之类的）
菜单：nav（主要是采用a标签进行跳转的）
主题：main（核心内容展示）
底部：footer（版权声明）
2、网页实现
2.1 首页
核心框架如下几个部分：
头部和菜单及尾部可以是一样的，其中中间部分是体现不同页面的主题介绍。这个里面主要是一个背景图加了一个透明层遮罩和文字描述。具体代码如下：
Html代码
<div class="main">
<div class="main_text">
<div class="main_part">
<div class="text1">
<h2>杭州简介：</h2>
<p>杭州位于中国东南沿海、浙江省北部、钱塘江下游、京杭大运河南端，是环杭州湾大湾区核心城市 、沪嘉杭G60科创走廊中心城市 、国际重要的电子商务中心
。杭州人文古迹众多，西湖及其周边有大量的自然及人文景观遗迹，具代表性的有西湖文化、良渚文化、丝绸文化、茶文化，以及流传下来的许多故事传说成为杭州文化代表</p>
</div>
<div class="parts">
<div class="part"><img width="160" height="160" src="images/img_002.png" alt=""></div>
<div class="part"><img width="160" height="160" src="images/img_003.png" alt=""></div>
<div class="part"><img width="160" height="160" src="images/img_004.png" alt=""></div>
<div class="part"><img width="160" height="160" src="images/img_005.png" alt=""></div>
</div>
</div>
</div>
</div>
原创于CSDN博主《IT黄大大》，特此声明，微信公众号《IT黄大大》有更多网页demo源码，转载请说明出处哟
Css代码
.main {
width: 1000px;
height: 584px;
border: 1px solid #eee;
}
.main_text {
width: 1000px;
height: 584px;
background-image: url(../images/img_001.png);
background-size: 100% 100%;
position: relative;
}
.main_text p {
width: 550px;
margin: 10px auto;
line-height: 30px;
color: #777;
font-size: 14px;
}
.main_part {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
;
color: #fff;
position: absolute;
}
.text1 {
position: absolute;
top: 150px;
left: 50px;
width: 400px;
height: 300px;
}
.text1 p {
width: 400px;
}
.parts {
width: 400px;
height: 400px;
position: absolute;
top: 100px;
left: 500px;
}
.part {
width: 190px;
height: 190px;
float: left;
margin: 5px;
}
.main img {
float: left;
margin: 50px 40px;
}
2.2 西湖游
设置了标头和相关的4个风景介绍：
Html
<div class="main">
<div class="main_title">
<p>
“欲把西湖比西子，淡妆浓抹总相宜”，“上有天堂，下有苏杭”，古往今来许多文人墨客都对杭州的美景写下动人的诗篇。记得小时候看《新白娘子传奇》，尤其是白娘子和许仙在西湖相遇，那场景美的令人沉醉，当时小编就想着有机会一定要去西湖看一看，其实杭州西湖也不止雷峰塔这一个景观，其他的景色秀美，也是吸引着大批五湖四海的人们
</p>
</div>
<div class="big_part">
<div class="part">
<img width="320" height="200" src="images/img_006.png" alt="">
<span class="part_title"> 西湖湖畔</span>
<p>杭州西湖位于浙江省杭州市的市中心，是中国首批国家重点风景名胜区和中国十大风景名胜区之一，也是中国，主要的观赏性淡水湖泊之一，西湖拥有三面云山，一水抱城的自然风光，西湖以其湖光山色和深厚文化底蕴，吸引了历代文人墨客的眷顾。杭州凭借着湖光山色和众多名胜古迹而成为闻名中外的旅游胜地
</p>
</div>
<div class="part">
<img width="320" height="200" src="images/img_007.png" alt="">
<span class="part_title"> 雷锋夕照 ：雷峰塔</span>
<p>这个景就是雷峰塔，黄昏时分，遇到晴天的时候，高耸的雷峰塔在夕阳五颜六色余晖的照耀下影如西湖中，人文和自然景色融为一体，仿佛置身于一幅山水画中。
</p>
</div>
<div class="part">
<img width="320" height="200" src="images/img_008.png" alt="">
<span class="part_title"> 双峰插云</span>
<p>西湖三面环山，古诗有云：“南北高峰高持天，两峰相以不相连。晚来新雨未雨之，时四山云锁二尖。”讲的就是天目山的一支余脉，在西湖南北分道扬镳，形成环抱状的景观，这两个南北高峰直冲云霄，可以欣赏群山云雾缭绕的美景，每当云雾弥漫，双塔就若隐若现就像在云天佛国。后圆明园也仿照此景建造了双峰插云的景观。
</p>
</div>
<div class="part">
<img width="320" height="200" src="images/img_009.png" alt="">
<span class="part_title"> 柳浪闻莺</span>
<p>指的是清波门附近的大型公园，南宋时期这里曾是最大的御花园，这里有很多的柳树，当风起时随着风摆动成形成了像波浪一样的景象，中间黄莺飞舞，莺啼婉转，所以这个地方就取名为柳浪闻莺，到这里，大家可以欣赏到美景，体验到大自然生机盎然的景象。
</p>
</div>
</div>
</div>
2.3 杭州美食
杭州的美食纵容是不可少的，我也是针对吃货做了一下攻略的，具体html代码如下：
Html:
<div class="main">
<div class="partall">
<div class="part">
<h2>1.定胜糕</h2>
<p>定胜糕是杭州的传统小吃之一，传说是南宋时百姓为韩家军出征鼓舞将士而特制的，将配置好的米粉放进特制的印版里，中间再放入红豆沙，蒸少许时间就可以了。白里透红，松软清香，吃到嘴里甜甜糯糯的，是春季养生的佳品。
</p>
<img src="images/img_010.png" alt="">
</div>
<div class="part">
<h2>2.龙井虾仁</h2>
<p>
龙井虾仁是杭州的一道特色名菜，这是用杭州特产的西湖龙井嫩芽作为配菜，以虾仁为主制作而成的一道美食。龙井素以“色绿、香郁、味甘、形美”四绝著称。河虾被古人誉为“馔品所珍”，不仅肉嫩鲜美，且营养丰富。这两种食材的搭配制作出来的菜肴堪称一绝。
</p>
<img src="images/img_011.png" alt="">
</div>
<div class="part">
<h2>3.西湖醋鱼</h2>
<p>西湖醋鱼是一道历史悠久的名菜了，它的历史可以追溯到宋朝，西湖醋鱼也称为叔嫂传珍。西湖醋鱼通常选用草鱼作原料，烹制而成。烧好后，浇上一层平滑油亮的糖醋，胸鳍竖起，鱼肉嫩美，带有蟹味，鲜嫩酸甜。
</p>
<img src="images/img_012.png" alt="">
</div>
</div>
</div>
2.4 灵隐寺
灵隐寺想必大家都听说过，那么也就借助这次文章让大家对其来源更加了解，HTML代码如下。
Html
<div class="main">
<img width="420" height="600" src="images/img_013.png" alt="">
<span class="img_text">
灵隐寺，又名云林寺，位于浙江省杭州市，背靠北高峰，面朝飞来峰，始建于东晋咸和元年（326年），占地面积约87000平方米。
灵隐寺开山祖师为西印度僧人慧理和尚。南朝梁武帝赐田并扩建。五代吴越王钱镠命请永明延寿大师重兴开拓，并赐名灵隐新寺。宋宁宗嘉定年间，灵隐寺被誉为江南禅宗“五山”之一。清顺治年间，禅宗巨匠具德和尚住持灵隐，筹资重建，仅建殿堂时间就前后历十八年之久，其规模之宏伟跃居“东南之冠”
[2] 。清康熙二十八年（1689年），康熙帝南巡时，赐名 “云林禅寺”。
<br> 灵隐寺主要以天王殿、大雄宝殿、药师殿、法堂、华严殿为中轴线，两边附以五百罗汉堂、济公殿、华严阁、大悲楼、方丈楼等建筑构成。现任方丈是光泉法师 。
<br> 浙江灵隐寺为全国重点文物保护单位
<br>
灵隐寺总体规划是沿中轴线形成五层格局：天王殿-大雄宝殿-药师殿-藏经楼（下设法堂）-华严殿。同时向两翼布局，先后建成线刻五百罗汉堂、道济殿（现称济公殿）、客堂（六和堂）、祖堂、大悲阁、龙宫海藏（藏品陈列）；并于原罗汉堂遗址重建五百罗汉堂，陈列平均身高1.7米的五百青铜罗汉，堂中央另建12.6米高的四大名山铜殿（已列为吉尼斯纪录
），占地面积约87000平方米。此外，每进殿堂建有宽敞平台，美化古刹环境。先后建成了大型《心经》壁、百狮群雕等，并于五百罗汉堂西北建冽泉，借假山叠石形成自然瀑布流入阿耨达池，池边建有“具德亭”，以纪念清初具德中兴灵隐之功。
</span>
</div>
2.5 千岛湖
一个旅游热门景点，而且还上了中国必去的50个景点之一，想必大家也不陌生吧，具体html实现代码如下：
Html
<div class="main">
<div class="main_text">
<h3> 关于千岛湖</h3>
<p>
<br>
千岛湖，即新安江水库，位于浙江省杭州市淳安县境内，小部分连接杭州市建德市西北，是为建新安江水电站拦蓄新安江上游而成的人工湖，1955年始建，1960年建成。水库坝高105米，长462米；水库长约150千米，最宽处达10余千米；最深处达100余米，平均水深30.44米，在正常水位情况下，面积约580平方千米，蓄水量可达178亿立方米，在最高水位时拥有1078座大于0.25平方千米的陆桥岛屿，并以2平方千米以下的小岛为主，岛屿面积共409平方千米。
<br>
千岛湖水在中国大江大湖中位居优质水之首，为国家一级水体，不经任何处理即达饮用水标准，被誉为“天下第一秀水”。1984年12月15日浙江省地名委员会正式将新安江水库命名为“千岛湖”。
</div>
<img width="400" src="images/img_014.png" alt="">
</div>
2.6 留言
这个主要是针对表单来进行页面设计的，因为表单是我们必不可少的一部分哈，页面代码如下：
<div class="main">
<div class="text_liuyan">
<h2> 留言板</h2>
<div class="detail_tt">
<span>网名：</span><input type="text"><br><br>
<span>TEL：</span><input type="text"><br><br>
<span>ADDRESS：</span><input type="text"><br><br>
<span>描述：</span><textarea name="" id="" cols="30" rows="10"></textarea><br><br>
<span></span><input type="button" value="提交留言">
</div>
</div>
</div>
3、源码分享
其实这个是我学生时代自己写的源码，希望大家能够有所启发，当然主要就是希望通过这篇文章给大家带来一个制作网页的思路，而不是说一昧的复制粘贴，当然肯定有读者想要源码，我在自己的公众号里面分享了有关所有页面的源码，希望大家能够
A、关注微信公众号《IT黄大大》
B、回复“杭州旅游”即可
C、下载完整源码包。
希望新的一年能和大家一起学习，一起成长，一同进步，争取早日实现暴富，感谢最美的时光有您的关注哈！！！
原创于CSDN博主《IT黄大大》，特此声明，微信公众号《IT黄大大》有更多网页demo源码，转载请说明出处哟