Web前端开发技术课程大作业——HTML5旅游景区景点(13页面)HTML CSS JavaScript

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

)

文章目录🌰

一、网站题目👨‍🎓
二、网站描述✍️
三、网站介绍📖
四、网站效果🌐
五、网站代码制作部分 📕
- HTML结构代码🧱
- CSS样式代码🏡
六、遇到问题及如何解决🔍
七、实训总结😊
八、更多干货🎁

一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

三、网站介绍📖

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

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

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

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

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

四、网站效果🌐

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

在这里插入图片描述

五、网站代码制作部分 📕

（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码🧱


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>珍岛集团</title>
	<meta name="keywords" content="珍岛集团">
	<meta name="description" content="珍岛集团">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="shortcut icon" href="images/favicon.ico">
	
	<!-- include main css -->
	<link rel="stylesheet" type="text/css" href="css/slick.css"/>	
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="css/jquery.mmenu.all.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<link href="font-awesome-4.5.0/css/font-awesome.min.css" rel='stylesheet' type='text/css' media="all" />
	<link rel="stylesheet" type="text/css" href="css/animate.css"/>
	
	<!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/r29/html5.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
	
<div>
	<!--header-->
	<header class="header home_p">
	   <div class="container">
		   <div class="logo">
	   	   		<a href="index.html"><img src="images/logo.png" alt="" /></a>
		   </div>
		   <a href="#mmenu" class="phone-nav"><i class="fa fa-list"></i></a>
		  <div class="logo_right">
		  	 <nav class="nav">
		   		<ul>    
		   			<li><a href="index.html" class="active">首页</a></li>
		   			<li><a href="scenic_overview.html">景区概况</a></li>
		   			<li><a href="court_travel.html">文苑之旅</a>
		   				<ul>
		   					<li><a href="court_travel.html">茶艺中心</a></li>  
		   					<li><a href="court_travel.html">万竹林海</a></li>
		   					<li><a href="court_travel.html">创意中心</a></li>
		   					<li><a href="court_travel.html">花草园艺</a></li>
		   				</ul>
		   			</li>
		   			<li><a href="comfortable.html">舒雅住宅</a></li>
		   			<li><a href="news.html">新闻动态</a>
		   				<ul>
		   					<li><a href="news.html">公司新闻</a></li>
		   					<li><a href="news.html">行业新闻</a></li>
		   				</ul>
		   			</li>
		   			<li><a href="feedback.html">留言中心</a></li>
		   			<li><a href="contact.html">联系我们</a></li>
		   		</ul>
		  	 </nav>
		  	 <div class="search">
		  	 	<span class="sea_x">
		  	 		<input type="" name="" id="" placeholder="请输入关键词">
		  	 		<i class="fa fa-search"></i>		  	
		  	 	</span>
		  	 	<span class="y_z">
		  	 		<a href="" class="zh active">中</a><a href="" class="en">En</a>
		  	 		
		  	 	</span>
		  	 </div>
		  </div>
	   	
	   </div>
	</header>
			
	<!--banner  start-->
	<section class="banner">
	    <div><a href="index.html"><img src="images/banner1.jpg" alt=""></a></div>
	    <div><a href="index.html"><img src="images/banner1.jpg" alt=""></a></div>
	    <div><a href="index.html"><img src="images/banner1.jpg" alt=""></a></div>
	</section>
	<!--banner end-->
	<div class="jqgk">
		<div class="contai">
			<div class="top_tit">
				<span class="span1"><a href="scenic_overview.html">景区概况</a></span><br />
				<span class="span2">SCENIC OVERVIEW</span>
			</div>
			<p class="wow bounceIn">
				上海珍岛商业管理有限公司位于国家级经济技术开发区，是首批专注于精品民宿的新型创业连锁平台。<br />
公司成立于2016年2月，注册资金1000万元。珍岛使命在于构筑“万众创新、大众创业”的新型平台，建立一个为历史和未来负责的、“留得住浓浓的乡愁”的城镇化村落服务体系，<br />
为中国城镇化进程中的美丽乡村建设贡献一份力量。
			</p>
			<div class="xia_x">
				<span class="img"></span>
			</div>
		</div>	
	</div>
	<div class="wyzl">
		<div class="top_tit">
			<span class="span1"><a href="court_travel.html">文苑之旅</a></span><br />
			<span class="span2">COURT TRAVEL</span> 
		</div>
		<ul class="clearfix"> 
			<li class="wow bounceIn">
				<a href="court_travel.html"><img src="images/home_1.png" alt="" class="vcenter" /><i></i></a>
				<a href="court_travel.html">万竹林海(一)</a>
			</li>
			<li class="wow bounceIn">
				<a href="court_travel.html"><img src="images/home_2.png" alt="" class="vcenter" /><i></i></a>
				<a href="court_travel.html">万竹林海(二)</a>
			</li>
			<li class="wow bounceIn">
				<a href="court_travel.html"><img src="images/home_3.png" alt="" class="vcenter" /><i></i></a>
				<a href="court_travel.html">万竹林海(三)</a>
			</li>
		</ul>
	</div>
	<!--wyzl end-->


</body>
</html>

CSS样式代码🏡

.slick-slider {
	position:relative;
	display:block;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-ms-touch-action:pan-y;
	touch-action:pan-y;
	-webkit-tap-highlight-color:transparent
}
.slick-list {
	position:relative;
	overflow:hidden;
	display:block;
	margin:0;
	padding:0;
	z-index:1
}
.slick-list:focus {
	outline:none
}
.slick-list.dragging {
	cursor:pointer;
	cursor:hand
}
.slick-slider .slick-track {
	-webkit-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0)
}
.slick-track {
	position:relative;
	left:0;
	top:0;
	display:block
}
.slick-track:before,.slick-track:after {
	content:"";
	display:table
}
.slick-track:after {
	clear:both
}
.slick-loading .slick-track {
	visibility:hidden
}
.slick-slide {
	float:left;
	height:100%;
	min-height:1px;
	display:none
}
[dir="rtl"] .slick-slide {
	float:right
}
.slick-slide img {

六、遇到问题及如何解决🔍

实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。

七、实训总结😊

通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。

八、更多干货🎁

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

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

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬