HTML5 final assignment: theme travel website design - Guizhou Mountain Tourism (1 page) web final assignment design page_

HTML5 final assignment: theme travel website design - Guizhou Mountain Tourism (1 page) web final assignment design page_

Common web design topics include individuals, food, companies, schools, tourism, e-commerce, pets, electrical appliances, tea, home, hotels, dance, animation, stars, clothing, sports, cosmetics, logistics, environmental protection, books, wedding dress, military, games, festivals, smoking cessation, movies, photography, culture, hometown, flowers, gifts Car, other web design topics, A + level homework, can meet the web design needs of College Students' Web homework, and those who like can be downloaded!

Get more source code

PC pays attention to us

🧡Author home page - more source code

🧡HTML final assignment column

Introduction to works

1. Introduction to web works: HTML final college students' web design homework A + level, you can download what you like, and the article page supports mobile PC responsive layout.

2. Web page work editing: after downloading the work, you can use any HTML editing software (such as DW, HBuilder, Notepad, vscade, Sublime, Webstorm, Notepad + +, etc.) to edit and modify the web page.

3. Web work technology: Div+CSS, mouse over effect, Table, navigation bar effect, banner, form, secondary and tertiary pages, video, audio elements, Flash, logo (source file) is designed, and the knowledge points required for basic final homework are fully covered.

1, Work display




2, File directory

3, Code implementation

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" href="css/cloudzoom.css" />	
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/guizhou.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script src="js/cloudzoom.js"></script>
    <script src="js/page.js"></script>
	<title>Guizhou Mountain Tourism</title>
	<style type="text/css">
		body{ min-width: 1200px !important;}
		.swiper-wrapper div.swiper-slide{ float: left; width:11% !important;}
		.guizhoubg li{ display: none;}
		.guizhous{opacity: 0;}
	</style>
	<!--start-up CloudZoom That's it, quickStart()restart now-->
	<script type="text/javascript">
		CloudZoom.quickStart();
	</script>
</head>

<body>
	<!-- Head start -->
	<div class="head">
		<div class="head_top">
			<div class="w1200 clearFloat">
				<div class="left fl"><span>The promotion information of this mall is advertising</span></div>
				<div class="right fr">
					<span>please</span>
					<a href="javascript:;">Sign in</a>|
					<a href="javascript:;">register</a>|
					<a href="javascript:;">My fusion e purchase</a>|
					<a href="javascript:;">Shopping Cart</a>|
					<a href="javascript:;">Help center</a>|
					<a href="javascript:;">customer service telephone numbers</a>
				</div>
			</div>
		</div>
		<div class="head_down">
			<div class="w1200">
				<div class="logo fl">
					<a href="javascript:;">
						<img class="ig1" src="images/index1.png" />
						<img class="ig2" src="images/index2.png" />
					</a>
				</div>
				<div class="ser fr">
					<div class="right1">
						<div class="right1_box"><input type="text" placeholder="Enter search key" /></div>
						<input class="in2" type="button" value="search" />
					</div>
					<div class="right2"><span>Popular search: kovos robot</span></div>
				</div>
			</div>
		</div>
	</div>
	<!-- Head end -->
	<!-- Navigation start -->
	<div class="nav">
		<div class="w1200 clearFloat">
			<div class="left fl"><a href="javascript:;">All commodity categories</a></div>
			<div class="right fr">
				<ul class="clearFloat">
					<li><a href="javascript:;">home page</a></li>
					<li><a href="javascript:;">major suit e Starting purchase</a></li>
					<li><a href="javascript:;">Hundred yuan store</a></li>
					<li><a href="javascript:;">Cross border Pavilion</a></li>
					<li><a href="javascript:;">Auto City</a></li>
					<li><a href="javascript:;">House purchase center</a></li>
					<li><a href="javascript:;">finance</a></li>
					<li><a href="javascript:;">Enterprise procurement</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- End of navigation -->
	<!-- banner start -->
	<div class="banner">
		<div class="lunbo fullSlide">
			<a class="prev"></a>
			<a class="next"></a>
			<div class="bd">
				<ul>
					<li style="background:url(images/index3.jpg) center 0 no-repeat;background-size:cover;"><a href="javascript:;"></a></li>
					<li style="background:url(images/banner.jpg) center 0 no-repeat;background-size:cover;"><a href="javascript:;"></a></li>
					<li style="background:url(images/banner_1.jpg) center 0 no-repeat;background-size:cover;"><a href="javascript:;"></a></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			jQuery(".fullSlide").slide({mainCell:".bd ul", effect:"fold", autoPlay:true, delayTime:700});
		</script>
		<div class="quan">
			<div class="w1200">
				<ul>
					<li class="li1 clearFloat">
						<div class="jian"><span>reduce</span></div>
						<div class="li_left fl">
							<em>¥</em>
							<i>3</i>
						</div>
						<div class="li_right fl">
							<div class="p1"><span>Over 59 yuan</span>Ready to use</div>
							<a class="lq" href="javascript:;">Collect coupons</a>
						</div>
					</li>
					<li class="li2 clearFloat">
						<div class="jian"><span>reduce</span></div>
						<div class="li_left fl">
							<em>¥</em>
							<i>5</i>
						</div>
						<div class="li_right fl">
							<div class="p1"><span>Over 79 yuan</span>Ready to use</div>
							<a class="lq" href="javascript:;">Collect coupons</a>
						</div>
					</li>
					<li class="li3 clearFloat">
						<div class="jian"><span>reduce</span></div>
						<div class="li_left fl">
							<em>¥</em>
							<i>10</i>
						</div>
						<div class="li_right fl">
							<div class="p1"><span>Over 158 yuan</span>Ready to use</div>
							<a class="lq" href="javascript:;">Collect coupons</a>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="banner_db"></div>
	</div>
	<!-- banner end -->
	<!-- Small navigation start -->
	<div class="nav2">
		<div class="w1200">
			<div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide">
		            	<a href="javascript:;">
							<div class="ig"><img src="images/index7.png" /></div>
							<p>home page</p>
						</a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="javascript:;">
							<div class="ig"><img src="images/index8.png" /></div>
							<p>Travel in Guizhou</p>
						</a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="javascript:;">
							<div class="ig"><img src="images/index9.png" /></div>
							<p>Eat in Guizhou</p>
						</a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="javascript:;">
							<div class="ig"><img src="images/index10.png" /></div>
							<p>Live in Guizhou</p>
						</a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="javascript:;">
							<div class="ig"><img src="images/index11.png" /></div>
							<p>Line in Guizhou</p>
						</a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="javascript:;">
							<div class="ig"><img src="images/index12.png" /></div>
							<p>Play in Guizhou</p>
						</a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="javascript:;">
							<div class="ig"><img src="images/index13.png" /></div>
							<p>Buy in Guizhou</p>
						</a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="javascript:;">
							<div class="ig"><img src="images/index8.png" /></div>
							<p>Travel in Guizhou</p>
						</a>
		            </div>
		            <div class="swiper-slide">
		            	<a href="javascript:;">
							<div class="ig"><img src="images/index9.png" /></div>
							<p>Eat in Guizhou</p>
						</a>
		            </div>
		        </div>
		        <div style="clear: both;"></div>
		    </div>
		    <script>
		    var swiper = new Swiper('.swiper-container', {
		        slidesPerView: 7,
		        paginationType: 'fraction'
		    });
		    </script>
		</div>
	</div>
	<!-- End of mini navigation -->
	<!-- Map start -->
	<div class="map">
		<div class="tit"><img src="images/index20.png"/></div>
		<div class="guizhoubox">
			<div  class="guizhouMap">
				<div id="guizhous"></div>
				<ul class="guizhoubg">
					<img id="guizimg" src="images/guizhou.png"/>
				<!--The order is unchanged: 0 Anshun, 1 Guiyang, 2 Liupanshui, 3 Zunyi, 4 Bijie, 5 Tongren, 6 Xingyi, 7 Kaili and 8 Duyun-->
				<li><img src="images/as1.png"/></li>
				<li><img src="images/gy1.png"/></li>
				<li><img src="images/lps1.png"/></li>
				<li><img src="images/map.png"/></li>
				<li><img src="images/bj1.png"/></li>
				<li><img src="images/tr1.png"/></li>
				<li><img src="images/xy1.png"/></li>
				<li><img src="images/kl1.png"/></li>
				<li><img src="images/dy1.png"/></li>
			</ul>
			</div>
			<div class="guizAlte">
				<!--Click on the map DI-->
				<!--The order is unchanged: 0 Anshun, 1 Guiyang, 2 Liupanshui, 3 Zunyi, 4 Bijie, 5 Tongren, 6 Xingyi, 7 Kaili and 8 Duyun-->
				<!--0-->
				<div class="listConter">
				<!--business logo-->
				<ul class="logoTal">
					<li><a href="#"><img src="images/zhuanzhu.png"/></a></li>	
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<div style="clear: both;"></div>
				</ul>
				<!--scenic spot-->
				
				<div class="mapConter">
					
					<ul class="imgTal">
						<li class="active"><img  src="images/bb1.png"/></li>
						<li><img  class="gray" src="images/bb2.png"/></li>
						<li><img  class="gray" src="images/r1.jpg"/></li>
						<div style="clear: both;"></div>
					</ul>
					<ul class="textTel">
						<li class="active">
							<h3>Jiaxiu Pavilion</h3>
							<p>Jiaxiu building is built on the Nanming River in the south of Guiyang City, Guizhou Province, based on a huge stone in the river. It is a national monument AAA First class tourist attraction.
Jiaxiu building was built in the Ming Dynasty. After the building was destroyed and rebuilt, it was renamed "Laifeng Pavilion". Jiaxiu building was rebuilt many times in the Qing Dynasty and its original name was restored. The existing buildings are in the first year of Xuantong(1909 year)Rebuilt.
Jiaxiu upstairs and downstairs are three floors, with white stones as columns, which are collected layer by layer, and the height from the bridge deck to the roof is about 20 meters. Nanming River flows through the front of the building and converges into Han Bitan. The side of the building is connected by the stone arch "Fuyu bridge", on which there is an original small pavilion called "Hanbi Pavilion". The Jiaxiu building, with its red beams and green tiles, is surrounded by water and mountains. It is worthy of its name and can be called Jiaxiu</p>
							<a href="#" class="abtn"><img src="images/gengduo.png"/></a>
					
						</li>
						<li>
							<h3>Fish in Sour Soup</h3>
							<p>Jiaxiu building is built on the Nanming River in the south of Guiyang City, Guizhou Province, based on a huge stone in the river. It is a national monument AAA First class tourist attraction.
Jiaxiu building was built in the Ming Dynasty. After the building was destroyed and rebuilt, it was renamed "Laifeng Pavilion". Jiaxiu building was rebuilt many times in the Qing Dynasty and its original name was restored. The existing buildings are in the first year of Xuantong(1909 year)Rebuilt.
Jiaxiu upstairs and downstairs are three floors, with white stones as columns, which are collected layer by layer, and the height from the bridge deck to the roof is about 20 meters. Nanming River flows through the front of the building and converges into Han Bitan. The side of the building is connected by the stone arch "Fuyu bridge", on which there is an original small pavilion called "Hanbi Pavilion". The Jiaxiu building, with its red beams and green tiles, is surrounded by water and mountains. It is worthy of its name and can be called Jiaxiu</p>
							<a href="#" class="abtn"><img src="images/gengduo.png"/></a>
					
						</li>
						<li>
							<h3>Rice Wine</h3>
							<p>Jiaxiu building is built on the Nanming River in the south of Guiyang City, Guizhou Province, based on a huge stone in the river. It is a national monument AAA First class tourist attraction.
Jiaxiu building was built in the Ming Dynasty. After the building was destroyed and rebuilt, it was renamed "Laifeng Pavilion". Jiaxiu building was rebuilt many times in the Qing Dynasty and its original name was restored. The existing buildings are in the first year of Xuantong(1909 year)Rebuilt.
Jiaxiu upstairs and downstairs are three floors, with white stones as columns, which are collected layer by layer, and the height from the bridge deck to the roof is about 20 meters. Nanming River flows through the front of the building and converges into Han Bitan. The side of the building is connected by the stone arch "Fuyu bridge", on which there is an original small pavilion called "Hanbi Pavilion". The Jiaxiu building, with its red beams and green tiles, is surrounded by water and mountains. It is worthy of its name and can be called Jiaxiu</p>
							<a href="#" class="abtn"><img src="images/gengduo.png"/></a>
					
						</li>
					</ul>
					</div>
					<div class="clickBtn"><img src="images/guanbi.png"/></div>
				</div>
				
				<!--Click on the map DI-->
				<!--The order is unchanged: 0 Anshun, 1 Guiyang, 2 Liupanshui, 3 Zunyi, 4 Bijie, 5 Tongren, 6 Xingyi, 7 Kaili and 8 Duyun-->
				<!--1st-->
				<div class="listConter">
				<!--business logo-->
				<ul class="logoTal">
					<li><a href="#"><img src="images/zhuanzhu.png"/></a></li>	
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<li><a href="#"><img src="images/logotype.png"/></a></li>
					<div style="clear: both;"></div>
				</ul>
				<!--scenic spot-->
				
				<div class="mapConter">
					
					<ul class="imgTal">
						<li class="active"><img  src="images/bb1.png"/></li>
						<li><img  class="gray" src="images/bb2.png"/></li>
						<li><img  class="gray" src="images/r1.jpg"/></li>
						<div style="clear: both;"></div>
					</ul>
					<ul class="textTel">
						<li class="active">
							<h3>Jiaxiu Pavilion</h3>
							<p>Jiaxiu building is built on the Nanming River in the south of Guiyang City, Guizhou Province, based on a huge stone in the river. It is a national monument AAA First class tourist attraction.
Jiaxiu building was built in the Ming Dynasty. After the building was destroyed and rebuilt, it was renamed "Laifeng Pavilion". Jiaxiu building was rebuilt many times in the Qing Dynasty and its original name was restored. The existing buildings are in the first year of Xuantong(1909 year)Rebuilt.
Jiaxiu upstairs and downstairs are three floors, with white stones as columns, which are collected layer by layer, and the height from the bridge deck to the roof is about 20 meters. Nanming River flows through the front of the building and converges into Han Bitan. The side of the building is connected by the stone arch "Fuyu bridge", on which there is an original small pavilion called "Hanbi Pavilion". The Jiaxiu building, with its red beams and green tiles, is surrounded by water and mountains. It is worthy of its name and can be called Jiaxiu</p>
							<a href="#" class="abtn"><img src="images/gengduo.png"/></a>
					
						</li>
						<li>
							<h3>Fish in Sour Soup</h3>
							<p>Jiaxiu building is built on the Nanming River in the south of Guiyang City, Guizhou Province, based on a huge stone in the river. It is a national monument AAA First class tourist attraction.
Jiaxiu building was built in the Ming Dynasty. After the building was destroyed and rebuilt, it was renamed "Laifeng Pavilion". Jiaxiu building was rebuilt many times in the Qing Dynasty and its original name was restored. The existing buildings are in the first year of Xuantong(1909 year)Rebuilt.
Jiaxiu upstairs and downstairs are three floors, with white stones as columns, which are collected layer by layer, and the height from the bridge deck to the roof is about 20 meters. Nanming River flows through the front of the building and converges into Han Bitan. The side of the building is connected by the stone arch "Fuyu bridge", on which there is an original small pavilion called "Hanbi Pavilion". The Jiaxiu building, with its red beams and green tiles, is surrounded by water and mountains. It is worthy of its name and can be called Jiaxiu</p>
							<a href="#" class="abtn"><img src="images/gengduo.png"/></a>
					
						</li>
						<li>
							<h3>Rice Wine</h3>
							<p>Jiaxiu building is built on the Nanming River in the south of Guiyang City, Guizhou Province, based on a huge stone in the river. It is a national monument AAA First class tourist attraction.
Jiaxiu building was built in the Ming Dynasty. After the building was destroyed and rebuilt, it was renamed "Laifeng Pavilion". Jiaxiu building was rebuilt many times in the Qing Dynasty and its original name was restored. The existing buildings are in the first year of Xuantong(1909 year)Rebuilt.
Jiaxiu upstairs and downstairs are three floors, with white stones as columns, which are collected layer by layer, and the height from the bridge deck to the roof is about 20 meters. Nanming River flows through the front of the building and converges into Han Bitan. The side of the building is connected by the stone arch "Fuyu bridge", on which there is an original small pavilion called "Hanbi Pavilion". The Jiaxiu building, with its red beams and green tiles, is surrounded by water and mountains. It is worthy of its name and can be called Jiaxiu</p>
							<a href="#" class="abtn"><img src="images/gengduo.png"/></a>
					
						</li>
					</ul>
					</div>
				<div class="right fr">
					<span>Beijing ICP Certificate 030247</span>
					<a href="javascript:;"><img src="images/index24.png" /></a>
					<a href="javascript:;"><img src="images/index25.png" /></a>
				</div>
			</div>
		</div>
	</div>
	<!-- Bottom end -->
</body>

</html>


4, Get more source code

PC pays attention to us

5, Learning materials

A complete set of web front-end zero foundation - Introduction to advanced (Video + source code + development software + learning materials + interview questions) (Tutorial)
Suitable for entry-level to advanced children's shoes ~ send 1000 sets of HTML+CSS+JavaScript template websites

6, More source code

HTML5 final assessment homework source code * includes individuals, food, companies, schools, tourism, e-commerce, pets, electrical appliances, tea, home, hotels, dance, animation, stars, clothing, sports, cosmetics, logistics, environmental protection, books, wedding dress, military, games, festivals, smoking cessation, movies, photography, culture, hometown, flowers Gifts, cars and others can meet the web design needs of College Students' Web homework. You can download what you like!

Tags: Front-end html5 css

Posted on Fri, 26 Nov 2021 03:55:20 -0500 by Hard Styler