html+css travel web page production directory
write in front
Next, share the inventory from my student days. It was for different styles of materials, so I chose themes from multiple directions to practice. This time I will continue to share my original travel-themed webpage production examples from my student days. Come out, I hope it can bring some substantial help to the younger generations. Of course, I also shared the source code on the WeChat public account "IT Huang Dada" Above, there is a QR code for the public account at the end of the article. Reply "Hangzhou Travel" to receive the complete source code package.
involving knowledge
Final homework webpage production exercises, webpage production major homework, travel-themed webpages, introduction to landscape webpages, webpage production demo source code, multi-page tourism webpage production, html+css multi-page samples, original webpage production source code.
原创于CSDN博主《IT黄大大》，特此声明，微信公众号《IT黄大大》有更多网页demo源码，转载请说明出处哟
Show results
page1, Home Page
page2, West Lake Tour
page3, Hangzhou Food
page4, Lingyin Temple a>
page5, Qiandao Lake
page6, message
1. Web page concept
This time is the development and production of a webpage based on the theme of tourism. I hope it can be of certain reference value to students who are doing their final homework. Of course, I hope everyone can find inspiration through this article. Not much else to say, tourism The idea of creating a theme web page is as follows:
If you want to make a good page, you must first have a structure in your mind, just like a cook trying to solve a problem. If you understand the structure clearly, all difficulties will be easily solved. When making this kind of web page work, we usually use floating layout to achieve it. Because the compatibility requirements of this type of static page are not high, we need to think about the general framework.
In the process of making my page, I mainly use the floating layout, designing and making it from left to right, and from top to bottom. Of course, I will first To make a layout for the page frame, first I will design the following parts:
Header: banner (mainly including navigation map and logo)
Menu: nav (mainly uses a tag to jump)
Topic: main (core content display)
Bottom: footer (copyright statement)
2. Web page implementation
2.1 Home page
The core framework has the following parts:
The header, menu and tail can be the same, and the middle part is the theme introduction that reflects different pages. This one is mainly a background image with a transparent layer mask and text description. The specific code is as follows:
Html code
<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 code
.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 West Lake Tour
Set the header and 4 related landscape introductions:
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 Hangzhou Food
Food indulgence is indispensable in Hangzhou. I also made a guide for foodies. The specific html code is as follows:
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 Lingyin Temple
Everyone must have heard of Lingyin Temple, so I will use this article to let everyone know more about its origin. The HTML code is as follows.
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 Qiandao Lake
A popular tourist attraction, and it is also listed as one of the 50 must-visit attractions in China. I believe everyone is familiar with it. The specific html implementation code is as follows:
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 Leave a message
This is mainly for page design based on forms, because forms are an essential part of us. The page code is as follows:
<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. Source code sharing
In fact, this is the source code I wrote when I was a student. I hope everyone can be inspired. Of course, the main purpose is to bring you an idea for making web pages through this article, rather than just copy and paste. Of course, there must be readers who want the source code. I have shared the source code of all pages in my official account. I hope everyone can
A. Follow the WeChat official account "IT Huang Dada》
B. Just reply “Hangzhou Travel”
C. Download the complete source code package.
I hope that in the new year I can learn with you, grow together, and make progress together, and strive to become rich as soon as possible. Thank you for your attention in the most beautiful time! ! !
原创于CSDN博主《IT黄大大》，特此声明，微信公众号《IT黄大大》有更多网页demo源码，转载请说明出处哟