制作一个简单HTML旅游网站（HTML+CSS+JS）新疆设计与实现7个页面

已于 2024-07-10 16:50:30 修改
阅读量1k 收藏 7
点赞数 12
分类专栏： html+css+js旅游 文章标签： html 旅游 css
于 2024-06-10 02:23:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78133614/article/details/139569002
版权

一、👨‍🎓网站题目

旅游，当地特色，历史文化，特色小吃等网站的设计与制作。

二、✍️网站描述

👨‍🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

三、📚网站介绍


📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

 四、🌐网站效果


五、🪓 代码实现


🧱HTML

<body>
	<!-- banner -->
	<div class="banner">  
		<div class="header agileinfo-header"><!-- header -->
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">新疆</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<h1><a href="index.html">新<i class="fa fa-globe" aria-hidden="true"></i> 疆</a></h1>
					</div> 
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-left"> 
							<li><a href="index.html" class="w3ls-hover active">主页</a></li>
							<li><a href="#about" class="btn w3ls-hover scroll">关于新疆</a></li>   
							<li><a href="#services" class="btn w3ls-hover scroll">服务</a></li>
							<li><a href="#team" class="btn w3ls-hover scroll">关于我们</a></li>
							<li><a href="#gallery" class="btn w3ls-hover scroll">新疆风光</a></li>
							<li><a href="#testimonials" class="btn w3ls-hover scroll">线路点评</a></li>
							<li><a href="#contact" class="btn w3ls-hover scroll">联系我们</a></li>
						</ul>	   
						<div class="detail-w3l">
			<ul>
				<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i> 0111-9898245</li>
				
			</ul>
		</div>

						<div class="clearfix"> </div>
					</div><!-- //navbar-collapse --> 
				</div><!-- //container-fluid -->
			</nav>
		</div><!-- //header -->	
		<!-- banner-text -->
		<div class="banner-text"> 
			<div class="container">
				<div class="flexslider">
					<ul class="slides">
						<li>
							<div class="banner-w3lstext">
								<h2>新疆</h2>
								<p>"新疆，大自然的调色板：一场穿越四季的奇幻之旅！"</p>
							</div>
						</li>
						<li>
							<div class="banner-w3lstext">
								<h3>   新疆 </h3>
                                <P>"新疆探险：从雪山到沙漠，从草原到湖泊，无尽的美景等你来发现！"</P>							
                            </div>
						</li>
						<li>
							<div class="banner-w3lstext">
								<h3>   新疆 </h3>
                                <P>"穿越新疆，寻找失落的绿洲：一场心灵的洗礼与震撼！</P>							
                            </div>
						</li>
					</ul> 
				</div> 	 
			</div>
		</div>
		<!-- //banner-text -->    
	</div>
	<!-- //banner --> 
	<!-- about -->
<div class="about" id="about">
	<div class="container">
	<div class="about-heading">
		<h2>关于新疆</h2>
	
	</div>
		<div class="about-grids">
		<div class="col-md-6 about-left">
			<img src="images/a1.jpg" alt="" height="400" />
		</div>
		<div class="col-md-6 about-right">
        <h3>新疆</h3>
大概是创世者在勾勒山河画卷时格外偏爱的地方。
</br>逶迤雪山，广袤草原；浩瀚沙漠，苍茫戈壁。种种山河盛况，在这里展露。
</br>葱郁绿洲，湛蓝湖泊；飘香瓜果，四时风情。
</br>寸寸旖旎风光，让人想醉倒其中，做一场又一场缠绵入骨的梦。
</br>有人说，去过新疆就相当于看遍了世界。这里既有不经雕刻的自然风光，也有千年遗留的璀璨文明。

			<div class="more">
				<a href="#" data-toggle="modal" data-target="#myModal">新疆</a>
			</div>
		</div>
		<div class="clearfix"></div>
		</div>
		</div>
		</div>
		<div class="about-grids1" id="services">
		<div class="container">
		<div class="col-md-6 about-bottom-left">
			<div class="w3-about-bottom-head">
			<h3>阿勒泰</h3>
			<p>终有一天，你会以任何理由来到李娟笔下的阿勒泰。这里是阿勒泰，是梦中的乌托邦是风花雪月之外的另一种浪漫~深蓝明净的天空，一碧万顷的草场水流在草丛间闪烁，浅浅的沼泽边生满苔藓连风中的松树都会用它们丝绒般的叶子歌唱你的名字
</p>
			<div class="more">
				<a href="#" data-toggle="modal" data-target="#myModal">阿勒泰</a>
			</div>
			</div>
		</div>
		<div class="col-md-6 about-bottom-right">
			<div class="col-md-6 about-bottom-icon1">
			<i class="fa fa-tripadvisor" aria-hidden="true"></i>
			<h4>200</h4>
			</div>
			<div class="col-md-6 about-bottom-icon1">
			<i class="fa fa-cutlery" aria-hidden="true"></i>
			<h4>300</h4>
			</div>
			<div class="clearfix"></div>
						<div class="col-md-6 about-bottom-icon1">
						<i class="fa fa-bed" aria-hidden="true"></i>
			<h4>450</h4>
			</div>
			<div class="col-md-6 about-bottom-icon1">
			<i class="fa fa-map-signs" aria-hidden="true"></i>
			<h4>500</h4>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
		</div>
		</div>
<!-- modal -->
	<div class="modal about-modal fade" id="myModal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header"> 
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="span1" aria-hidden="true">&times;</span></button>						
						<h4 class="modal-title"> 新疆</h4>
					</div> 
					<div class="modal-body">
					<div class="agileits-w3layouts-info">
						<img src="images/m1.jpg" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- //modal -->

<!-- //about -->
<!-- /offer -->
<div class="w3-offer" id="w3-offer">
<div class="container">
	<div class="w3-offer-head">
	<h3>新疆精华自驾线路推荐</h3>
	
	
	</div>
	<div class="w3-offer-grids">
		<div class="col-md-9 w3-left-offer-grid">
		<div class="col-md-6 w3-left-offer-content">
		<div class="col-md-2 w3-left-offer-icon">
		<i class="fa fa-renren" aria-hidden="true"></i>
		</div>
		<div class="col-md-10 w3-left-offer-icon">
		<p>穿越绿海——新疆伊犁河谷生态休闲旅游线路
特色：游览有“塞外江南”之称的伊犁河谷，全程可见雪山、草原、森林、花海交织的绝美画卷。
主要景点：那拉提草原、喀拉峻草原、唐布拉草原等。
体验：领略伊犁厚重的历史文化和浓郁的民族风情。
</p>
		</div>
		<div class="clearfix"></div>
		</div>
		<div class="col-md-6 w3-left-offer-content">
		<div class="col-md-2 w3-left-offer-icon">
		<i class="fa fa-arrows" aria-hidden="true"></i>
		</div>
		<div class="col-md-10 w3-left-offer-icon">
		<p>感受七彩——新疆东天山生态休闲旅游线路
特色：领略万亩旱田、千年古木胡杨林、天山原始森林等特色景观。
主要景点：博格达峰、吐鲁番盆地、哈密大海道等。
体验：体验大自然的神奇与魅力，感受大自然的壮丽与辽阔
</p>
		</div>
		<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
		<div class="col-md-6 w3-left-offer-content1">
		<div class="col-md-2 w3-left-offer-icon">
		<i class="fa fa-fort-awesome" aria-hidden="true"></i>
		</div>
		<div class="col-md-10 w3-left-offer-icon">
		<p>个性化行程规划与推荐：旅行社应根据游客的喜好、需求和预算，为其定制独特的旅游行程，并推荐合适的旅游目的地，确保游客能够充分体验当地的文化和风情</p>
		</div>
		<div class="clearfix"></div>
		</div>
		<div class="col-md-6 w3-left-offer-content1">
		<div class="col-md-2 w3-left-offer-icon">
		<i class="fa fa-subway" aria-hidden="true"></i>
		</div>
		<div class="col-md-10 w3-left-offer-icon">
		<p>崇敬英雄——新疆独库公路风景道旅游线路
特色：横穿天山中段，连接南北疆，是“全国十大最美公路”之一。
主要景点：哈希勒根达坂、巩乃斯林场、那拉提草原等。
体验：“五里不同景、十里不同天、一天阅四季”的绝美风景，领略大自然的鬼斧神工。
</p>
		</div>
		<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
		</div>
		<div class="col-md-3 w3-right-offer-grid">
		</div>
		<div class="clearfix"></div>
	
	</div>
	<div class="w3-offer-bottom-grid">
		<div class="col-md-3 w3-bottom-offer1">
		<i class="fa fa-mixcloud" aria-hidden="true"></i>
			<h3>个性化行程规划与推荐：</h3>
			
		</div>
		<div class="col-md-3 w3-bottom-offer1">
		<i class="fa fa-sort-numeric-desc" aria-hidden="true"></i>
		<h3>全面的旅游服务与支持</h3>
		</div>
		<div class="col-md-3 w3-bottom-offer1">
		<i class="fa fa-wifi" aria-hidden="true"></i>
		<h3>丰富的旅游信息与咨询</h3>
		</div>
		<div class="col-md-3 w3-bottom-offer1">
		<i class="fa fa-delicious" aria-hidden="true"></i>
		<h3>独特的旅游体验与增值服务</h3>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="w3-offer-pos-img">
		<img src="images/suit1.png" alt="img">
	</div>
</div>
</div>
<!-- //offer -->
<!-- team -->
	<div class="team jarallax" id="team">
		<div class="team-dot">
			<div class="container">
				<div class="w3ls-heading team-heading">
					<h3>关于我们</h3>
					
				</div>
				<div class="team_gds">
					<div class="col-md-3 team_gd1">
						<div class="team_pos">
							<div class="team_back"></div>
							<img class="img-responsive" src="images/tm1.jpg"  alt=" ">
							<div class="team_info">
								<a href="#"  class="face_one"><i class=" so1 fa fa-facebook fc1" aria-hidden="true"></i></a>
								<a href="#"  class="face_one"><i class=" so2 fa fa-twitter fc2" aria-hidden="true"></i></a>
								<a href="#"  class="face_one"><i class=" so3 fa fa-google fc3" aria-hidden="true"></i></a>
							</div>
						</div>
						<h4>小帅</h4>
					</div>
				
					<div class="col-md-3 team_gd1">
						<div class="team_pos">
							<div class="team_back"></div>
							<img class="img-responsive" src="images/tm2.jpg"  alt=" ">
							<div class="team_info">
								<a href="#"  class="face_one"><i class=" so1 fa fa-facebook fc1" aria-hidden="true"></i></a>
								<a href="#"  class="face_one"><i class=" so2 fa fa-twitter fc2" aria-hidden="true"></i></a>
								<a href="#"  class="face_one"><i class=" so3 fa fa-google fc3" aria-hidden="true"></i></a>
							</div>
						</div>
						<h4>琪琪</h4>
					</div>
					<div class="col-md-3 team_gd1">
						<div class="team_pos">
							<div class="team_back"></div>
							<img class="img-responsive" src="images/tm3.jpg"  alt=" ">
							<div class="team_info">
								<a href="#"  class="face_one"><i class=" so1 fa fa-facebook fc1" aria-hidden="true"></i></a>
								<a href="#"  class="face_one"><i class=" so2 fa fa-twitter fc2" aria-hidden="true"></i></a>
								<a href="#"  class="face_one"><i class=" so3 fa fa-google fc3" aria-hidden="true"></i></a>
							</div>
						</div>
						<h4>王飞</h4>
					</div>
					<div class="col-md-3 team_gd1">
						<div class="team_pos">
							<div class="team_back"></div>
							<img class="img-responsive" src="images/tm4.jpg"  alt=" ">
							<div class="team_info">
								<a href="#"  class="face_one"><i class=" so1 fa fa-facebook fc1" aria-hidden="true"></i></a>
								<a href="#"  class="face_one"><i class=" so2 fa fa-twitter fc2" aria-hidden="true"></i></a>
								<a href="#"  class="face_one"><i class=" so3 fa fa-google fc3" aria-hidden="true"></i></a>
							</div>
						</div>
						<h4>理理</h4>
					</div>
					<div class="clearfix"></div>		
				</div>
			</div>
		</div>
	</div>
	<!-- //team -->
<!-- gallery -->
	<div class="gallery" id="gallery">
		<h3 class="w3-hallery-head">新疆风光</h3>
		
		<div class="w3agile_gallery_grids">
			<div class="col-md-3 w3agile_gallery_grid">
				<div class="w3agile_gallery_image">
					<a class="sb" href="images/g11.jpg" title="Travel Spot">
						<figure>
							<img src="images/g11.jpg" alt="" class="img-responsive" />
							<figcaption>
								<h4>新疆</h4>
								<p>
									新疆的自然风光如画般美丽，每一处都让人流连忘返，这次的旅行线路选择真的值得一游
								</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
			<div class="col-md-3 w3agile_gallery_grid">
				<div class="w3agile_gallery_image">
					<a class="sb" title="Travel Spot" href="images/g12.jpg">
						<figure>
							<img src="images/g12.jpg" alt="" class="img-responsive" />
							<figcaption>
								<h4>dolore magna</h4>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
									tempor.
								</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
			<div class="col-md-3 w3agile_gallery_grid">
				<div class="w3agile_gallery_image">
					<a class="sb" title="Travel Spot" href="images/g13.jpg">
						<figure>
							<img src="images/g13.jpg" alt="" class="img-responsive" />
							<figcaption>
								<h4>新疆</h4>
								<p>
									新疆的自然风光如画般美丽，每一处都让人流连忘返，这次的旅行线路选择真的值得一游
								</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
			<div class="col-md-3 w3agile_gallery_grid">
				<div class="w3agile_gallery_image">
					<a class="sb" title="Travel Spot" href="images/g14.jpg">
						<figure>
							<img src="images/g14.jpg" alt="" class="img-responsive" />
							<figcaption>
								<h4>新疆</h4>
								<p>
									新疆的自然风光如画般美丽，每一处都让人流连忘返，这次的旅行线路选择真的值得一游
								</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
			<div class="col-md-3 w3agile_gallery_grid">
				<div class="w3agile_gallery_image">
					<a class="sb" title="Travel Spot" href="images/g15.jpg">
						<figure>
							<img src="images/g15.jpg" alt="" class="img-responsive" />
							<figcaption>
								<h4>新疆</h4>
								<p>
									新疆的自然风光如画般美丽，每一处都让人流连忘返，这次的旅行线路选择真的值得一游
								</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
			<div class="col-md-3 w3agile_gallery_grid">
				<div class="w3agile_gallery_image">
					<a class="sb" title="Travel Spot" href="images/g16.jpg">
						<figure>
							<img src="images/g16.jpg" alt="" class="img-responsive" />
							<figcaption>
								<h4>dolore magna</h4>
								<p>
									Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
									tempor.
								</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
			<div class="col-md-3 w3agile_gallery_grid">
				<div class="w3agile_gallery_image">
					<a class="sb" title="Travel Spot" href="images/g17.jpg">
						<figure>
							<img src="images/g17.jpg" alt="" class="img-responsive"height="404"  />
							<figcaption>
								<h4>新疆</h4>
								<p>
									新疆的自然风光如画般美丽，每一处都让人流连忘返，这次的旅行线路选择真的值得一游
								</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
			<div class="col-md-3 w3agile_gallery_grid">
				<div class="w3agile_gallery_image">
					<a class="sb" title="Travel Spot" href="images/g18.jpg">
						<figure>
							<img src="images/g18.jpg" alt="" class="img-responsive" height="404" />
							<figcaption>
								<h4>新疆</h4>
								<p>
									新疆的自然风光如画般美丽，每一处都让人流连忘返，这次的旅行线路选择真的值得一游
								</p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		   <div class="clearfix"> </div>
		</div>
	
	</div>
<!-- //gallery -->

<!-- testimonials -->
	<div class="testimonials" id="testimonials">
		<div class="container">
			<div class="w3_agile_team_grid">
				
				<div class="w3_agile_team_grid_right">
					<h3>线路<span>点 </span>评</h3>
					
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="w3ls_testimonials_grids">
				 <section class="center slider">
						<div class="agileits_testimonial_grid">
							<div class="w3l_testimonial_grid">
								<p>新疆的自然风光如画般美丽，每一处都让人流连忘返，这次的旅行线路选择真的值得一游！</p>
								<div class="w3l_testimonial_grid_pos">
									<img src="images/t1.jpg" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
						<div class="agileits_testimonial_grid">
							<div class="w3l_testimonial_grid">
								<p>在新疆的旅行中，深入体验了多元文化的魅力，感受到了不同民族的独特风情，这次行程真是不虚此行！

</p>
								<div class="w3l_testimonial_grid_pos">
									<img src="images/t2.jpg" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
						<div class="agileits_testimonial_grid">
							<div class="w3l_testimonial_grid">
								<p>I这条新疆旅游线路包含了众多精华景点，行程安排丰富而合理，让我们充分领略了新疆的美丽与魅力，是一次满意的旅行选择！</p>
								<div class="w3l_testimonial_grid_pos">
									<img src="images/t3.jpg" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
				</section>
			</div>
		</div>
	</div>
<!-- //testimonials -->
<!-- contact -->
	<div class="contact" id="contact">
	<div class="container">  
			<div class="w3l-services-heading">
				<h3>联系我们</h3>
			
			</div>
			<div class="agile-contact-grids">
						<div class="col-md-6 w3-agile-address-right">
<!-- tabs section -->
<div class="jquery-script-clear"></div>
<div class="demo">
	
			
		<div id="verticalTab">
			<ul class="resp-tabs-list">
				<li>
					<div class="tab1">
						<h3>中国</h3>
					</div>
				</li>
				<li>
					
					<div class= "tab1">
						<h3>Usa</h3>
						
					</div>
					
				</li>
				<li>
					
					<div class="tab1">
						<h3>Qatar</h3>
						
					</div>
				</li>
				<li>
					
					<div class="tab1">
						<h3>Uk</h3>
					</div>
				</li>
				<li>
					
					<div class=" tab1">
						<h3>Paris</h3>
					</div>
				</li>
			</ul>
			<div class="resp-tabs-container">
			<div>
				<div class=" tabs-right1">
						<h3>中国</h3>
						<h4> 致我们</h4>
						<div class="tab-bottom">
							<p><i class="fa fa-map-marker" aria-hidden="true"></i>新疆维吾尔自治区乌鲁木齐市天山区解放南路88号。</p>
							<p><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:mail@example.com">mail@example.com</a></p>
							<p><i class="fa fa-phone" aria-hidden="true"></i>0111-89766545</p>
							<p><i class="fa fa-fax" aria-hidden="true"></i>19808765656</p>
						</div>
						
						
				</div>	
				
					<div class="clearfix"></div>
			</div>
			<div>
				<div class=" tabs-right1">
						<h3>monty har</h3>
						<h4> tour consultant</h4>
						
						<div class="tab-bottom">
							<p><i class="fa fa-map-marker" aria-hidden="true"></i>4012 50 Ave, Lloy, SK S9V 0P4,Usa</p>
							<p><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:mail@example.com">mail@example.com</a></p>
							<p><i class="fa fa-phone" aria-hidden="true"></i>+010 233 455 6789</p>
							<p><i class="fa fa-fax" aria-hidden="true"></i>567-594-6931</p>
						</div>
						
							
						
				</div>	
				
					<div class="clearfix"></div>
			</div>
			<div>
				<div class=" tabs-right1">
						<h3>baby mars</h3>
						<h4>tour consultant</h4>
						
						<div class="tab-bottom">
							<p><i class="fa fa-map-marker" aria-hidden="true"></i>4100 50 Ave, Lloy, SK S9V 0P4, Qatar</p>
							<p><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:mail@example.com">mail@example.com</a></p>
							<p><i class="fa fa-phone" aria-hidden="true"></i>+010 233 455 6789</p>
							<p><i class="fa fa-fax" aria-hidden="true"></i>567-594-6931</p>
						</div>
						
							
						
				</div>	
				
					<div class="clearfix"></div>
			</div>
			<div>
				<div class=" tabs-right1">
						<h3>marsh hip</h3>
						<h4>tour consultant</h4>
						
						<div class="tab-bottom">
							<p><i class="fa fa-map-marker" aria-hidden="true"></i>4025 50 Ave, Lloyd, SK S9V 0P4,Uk</p>
							<p><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:mail@example.com">mail@example.com</a></p>
							<p><i class="fa fa-phone" aria-hidden="true"></i>+010 233 455 6789</p>
							<p><i class="fa fa-fax" aria-hidden="true"></i>567-594-6931</p>
						</div>
						
							
						
				</div>	
				
					<div class="clearfix"></div>
			</div>
			<div>
				<div class=" tabs-right1">
						<h3>subbu roy</h3>
						<h4>tour consultant</h4>
						
						<div class="tab-bottom">
							<p><i class="fa fa-map-marker" aria-hidden="true"></i>4231 50 Ave, Lloy, SK S9V 0P4, Paris</p>
							<p><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:mail@example.com">mail@example.com</a></p>
							<p><i class="fa fa-phone" aria-hidden="true"></i>+010 233 455 6789</p>
							<p><i class="fa fa-fax" aria-hidden="true"></i>567-594-6931</p>
						</div>
						
							
						
				</div>	
				
					<div class="clearfix"></div	>
			
				</div>
			</div>
		

<!-- //agents section -->
						<div class="clearfix"> </div>
					</div>
					</div>
					
				</div>
				<div class="col-md-6 contact-form">
					<form action="#" method="post">
						<input type="text" name="姓" placeholder="First Name" required>
						<input class="email" name="名" type="text" placeholder="Last Name" required>
						<input type="text" name="电话" placeholder="Mobile Number" required>
						<input class="email" name="手机" type="text" placeholder="Email" required>
						<textarea name="留言" placeholder="Message" required></textarea>
						<input type="submit" value="发送">
					</form>
				</div>
				<div class="clearfix"> </div>	
			</div>
		</div>
	</div>
	<div style="height: 30px; clear: both"></div>

	<!-- //contact -->
	<!-- map -->
	<div class="container">
	<div class="col-md-6 map-left-grid">
		<h3 class="w3-contact-vist">Visit us :</h3>
		<div class="col-md-6 map-contact-address">
			<div class="w3-map-address-head">
				<ul>
				<li><h3>文化中心</h3></li>
				<li><i class="fa fa-connectdevelop" aria-hidden="true"></i></li>
				<li><p>	341212</p></li>
				<li><h4>Tel:<span>0123-98077676</span></h4></li>
				<li><h4>Fax:<span>18290873635</span></h4></li>
				<li><a href="mailto:mail@example.com">abcd@qq.com</a></li>
				</ul>
			</div>
			
		</div>
		<div class="col-md-6 map-contact-address">
		<div class="w3-map-address-head">
				<ul>
				<li><h3>个人中心</h3></li>
				<li><i class="fa fa-connectdevelop" aria-hidden="true"></i></li>
				<li><p>341212</p></li>
				<li><h4>电话:<span>0111-89766545  </span></h4></li>
				<li><h4>手机:<span>19808765656</span></h4></li>
				<li><a href="mailto:mail@example.com">abcd@qq.com</a></li>
				</ul>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="col-md-6 map-right-grid">
	<div class="agileits-w3layouts-map">
		<iframe src="" class="map" allowfullscreen=""></iframe>
	</div>
	</div>
	<div class="clearfix"></div>
	</div>
	<!-- //map -->
<div class="footer">
		<div class="container">
			<div class="social">
				<ul>
					<li><a href="#"><i class="fa fa-facebook"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter"></i></a></li>
					<li><a href="#"><i class="fa fa-rss"></i></a></li>
					<li><a href="#"><i class="fa fa-vk"></i></a></li>
				</ul>
			</div>
			<div class="border"></div>
			<div class="agileits-w3layouts-copyright">
				<p>主办：新疆维吾尔自治区人民政府办公厅 承办：新疆维吾尔自治区人民政府电子政务中心<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
		</div>
	</div>



  
</body>
</html>

六、🥇 如何让学习不再盲目


很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。

七、🎁更多干货


1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码：
QQ:3021557545

绿泡泡：XiaoMei_NN

4.有任何意见或者不懂得地方可以在评论区留言，也可以私信，我会认真看也会回复的哦

软件技术NINI
关注
  • 12
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
HTML5期末大作业：旅游网页设计与实现——旅游风景区网站HTML+CSS
11-28 900
html网页制作代码 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
Web大学生网页作业成品——美食餐饮网站设计与实现(HTML+CSS+JavaScript)
weixin_BJ050106的博客
12-20 587
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【
HTML网页制作——HTML+CSS+JavaScript仿京东购物商城网页制作(7页)
qq_524614081的博客
01-07 1413
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。 ⚽精彩专栏
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现面.md
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
制作一个简单HTML西安旅游网页(HTML+CSS)
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
一个简单的HTML网页 个人网站设计与实现 HTML+CSS+JavaScript自适应个人相册展示留言博客模板
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
HTML网页设计制作大作业 html+css+js 宠物之家 网页设计与实现
12-20
宠物之家的网页设计与实现是一项综合性的HTML网页设计制作大作业，它涵盖了HTML、CSS和JavaScript这三种核心技术，旨在帮助同学们提升网页制作能力并实践实际项目。在这个项目中，学生可以学习到如何创建一个功能...
HTML实现图片查看与隐藏
你羡慕的生活都是你没熬过的苦。
07-08 511
你好呀，我是小邹。在网页设计中，提供一个直观且用户友好的图片查看功能是提升用户体验的重要一环。本文将详细介绍如何使用HTML、CSS和JavaScript来实现图片的查看与隐藏功能。通过本教程，你将学会如何让页面上的图片在点击时放大显示，以及如何通过再次点击或点击背景来关闭放大的图片。
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 409
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
一文清晰了解HTML——简单实例
最新发布
weixin_73074505的博客
07-08 327
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
第一章节：HTML 基础
Toasten
07-08 972
Web（World Wide Web）即全球广域网，也称为万维网。我们常说的 Web端 就是网页端。网页 是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera 等。
vue学习day02-Vue指令-v-html、v-show与v-if、v-else与v-else-if、v-on、v-bind、v-for、v-model
2301_76648183的博客
07-07 727
当表达式值为true时，无显著区别，当值为false时，v-show通过控制css的display：none来控制显示与隐藏。如果不加key，v-for的默认行为会尝试原地修改元素（就地复用）提供一个地址，这里是百度的地址，通过v-html渲染。作用：设置元素的innerHTML。语法：v-html=“表达式”提供一个布尔值和两个盒子。点击“切换显示与隐藏”
一文清晰了解HTML
weixin_73074505的博客
07-08 505
【代码】用最简单的话一文清晰了解HTML。
【HTML入门】第四课 - 换行、分割横线和html的注释
xingyu_qie的专栏
07-08 518
这一小节，我们继续说HTML的入门知识，包括换行、横线分割以及注释（html的注释）。
html高级篇
qq_48257021的博客
07-04 990
translform:translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）transform:translate3d（x，y，）：其中x、y、z分别指要移动的轴的方向的距离。translform:translateX（100px）：仅仅是在x轴上移动。translform:translateY（100px）：仅仅是在Y轴上移动。·z轴：垂直屏幕注意：往外面是正值，往里面是负值。·x轴：水平向右注意：X右边是正值，左边是负值。
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript代码
05-29
很高兴回答您的问题。这里给出一个简单的HTML+CSS+JavaScript代码示例，用于设计和实现一个绿色古典旅游景区的网站。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>绿色古典旅游景区</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>绿色古典旅游景区</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">景点介绍</a></li> <li><a href="#">预定门票</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <section> <h2>欢迎来到绿色古典旅游景区</h2> <p>这里是一座绿色、古典的旅游景区，拥有众多自然景观和历史文化遗址。我们提供最佳的旅游体验，让您留下美好的回忆。</p> <button>了解更多</button> </section> <section> <h2>景点介绍</h2> <ul> <li> <img src="scenery1.jpg" alt="景点1"> <h3>景点1</h3> <p>景点1的介绍。</p> </li> <li> <img src="scenery2.jpg" alt="景点2"> <h3>景点2</h3> <p>景点2的介绍。</p> </li> <li> <img src="scenery3.jpg" alt="景点3"> <h3>景点3</h3> <p>景点3的介绍。</p> </li> </ul> </section> <section> <h2>预定门票</h2> <form> <label>姓名：<input type="text" name="name"></label> <label>电话：<input type="text" name="phone"></label> <label>邮箱：<input type="email" name="email"></label> <label>门票数量：<input type="number" name="quantity"></label> <button type="submit">提交</button> </form> </section> </main> <footer> <p>版权所有 © 绿色古典旅游景区</p> </footer> <script type="text/javascript" src="script.js"></script> </body> </html> ``` CSS代码： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #003300; color: #fff; padding: 20px; } header h1 { margin: 0; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #fff; text-decoration: none; } main { margin: 20px; } section { margin-bottom: 30px; } section h2 { margin-top: 0; } section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } section li { flex-basis: calc(33.33% - 20px); margin-right: 20px; margin-bottom: 20px; } section li:last-child { margin-right: 0; } section li img { width: 100%; height: auto; } form label { display: block; margin-bottom: 10px; } form input { padding: 5px; margin-bottom: 10px; border-radius: 5px; border: none; } form button { background-color: #003300; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } form button:hover { background-color: #009900; } footer { background-color: #ccc; color: #333; text-align: center; padding: 10px; } ``` JavaScript代码： ```javascript window.onload = function() { var button = document.querySelector('button'); button.addEventListener('click', function() { alert('感谢您的关注！'); }); }; ``` 这些代码可以帮助您创建一个简单的绿色古典旅游景区网站。当然，具体实现还需要根据您的需求和技能水平进行调整。希望这些信息对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值