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

news2024/12/22 16:47:51

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

🏀 精彩专栏推荐👇🏻👇🏻👇🏻

💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

  • 一、网站题目👨‍🎓
  • 二、网站描述✍️
  • 三、网站介绍📖
  • 四、网站效果🌐
  • 五、网站代码制作部分 📕
    • 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 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/14656.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

A-Level经济例题解析及练习Computing MPL and VMPL

A-Level经济例题解析及练习Computing MPL and VMPL

知识点&#xff1a;Computing MPL and VMPL例题&#xff1a; Question: Computing MPL and VMPL P $5/bushel. Find MPL and VMPL, fill them in the blank spaces of the table. Then graph a curve with VMPL on the vertical axis, L on horizontal axis.解析&#xff1a;…
阅读更多...
891. 子序列宽度之和（每日一难phase3-4）

891. 子序列宽度之和（每日一难phase3-4）

891. 子序列宽度之和 一个序列的 宽度 定义为该序列中最大元素和最小元素的差值。 给你一个整数数组 nums &#xff0c;返回 nums 的所有非空 子序列 的 宽度之和 。由于答案可能非常大&#xff0c;请返回对 109 7 取余 后的结果。 子序列 定义为从一个数组里删除一些&…
阅读更多...
简单工厂模式、工厂模式、抽象工厂模式和加入反射、配置优化后的抽象工厂模式之间的关系和区别

简单工厂模式、工厂模式、抽象工厂模式和加入反射、配置优化后的抽象工厂模式之间的关系和区别

通过两张图简单解释一下什么是简单工厂模式、工厂模式、抽象工厂模式 简单工厂模式是属于创建型模式&#xff0c;又叫做静态工厂方法&#xff08;Static Factory Method&#xff09;模式&#xff0c;但不属于23种GOF设计模式之一。简单工厂模式是由一个工厂对象决定创建出哪一种…
阅读更多...
Mac上 Word安装Mendeley插件

Mac上 Word安装Mendeley插件

Mac上 Word安装Mendeley插件问题背景解决方法针对Mendeley Desktop针对Mendeley Reference Manager参考链接问题背景 可能因如同时安装了Word和WPS等&#xff0c;导致Word上安装Mendeley插件失败&#xff08;Unable to install the Microsoft Word Plugin&#xff09;。目前网…
阅读更多...
协同细菌觅食优化算法（Matlab代码实现）

协同细菌觅食优化算法（Matlab代码实现）

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…
阅读更多...
知识蒸馏IRG算法实战：使用ResNet50蒸馏ResNet18

知识蒸馏IRG算法实战：使用ResNet50蒸馏ResNet18

摘要 复杂度的检测模型虽然可以取得SOTA的精度&#xff0c;但它们往往难以直接落地应用。模型压缩方法帮助模型在效率和精度之间进行折中。知识蒸馏是模型压缩的一种有效手段&#xff0c;它的核心思想是迫使轻量级的学生模型去学习教师模型提取到的知识&#xff0c;从而提高学…
阅读更多...
Golang入门笔记（11）—— 包

Golang入门笔记（11）—— 包

使用包的原因&#xff1a; 1.不可能把所有的不同业务功能的函数都放在一个源文件中&#xff0c;这样不便于管理。通常的做法是&#xff1a;我们会把具有相同一些功能和业务的维度的函数&#xff0c;分门别类的放在不同的源文件中。 2.不同的包名&#xff0c;可以解决两个函数…
阅读更多...
Java面对对象的特征之二：继承性 ：why？

Java面对对象的特征之二：继承性 ：why？

一、继承性的好处&#xff1a; 减少了代码的冗余&#xff0c;提高了代码便于功能的扩展为之后的多态性的使用&#xff0c;提高了前提 二、继承性的格式&#xff1a;class A extends B{} A:子类、派生类、subclass B&#xff1a;父类、超类、基类、superclass 提现&#xff1…
阅读更多...
数据中台解决方案-最新全套文件

数据中台解决方案-最新全套文件

数据中台解决方案-最新全套文件一、建设背景面临的挑战1、数据孤岛2、管理困难3、感知不强4、融合不足5、响应滞后二、思路架构三、建设方案四、获取 - 数据中台全套最新解决方案合集一、建设背景 在数字化转型及大数据战略布局背景下&#xff0c;建设大数据平台及数据应用。其…
阅读更多...
idea连接kerberos认证的hive

idea连接kerberos认证的hive

其实用dbeaver连接hive就可以了。但是呢&#xff0c;idea也有这个功能&#xff0c;本着研究下的想法就试试。 结果最后成功了 最后记录下。 参考文章。感觉不太行 PyCharm,idea通过插件database连接带Kerberos的hive_不饿同学的博客-CSDN博客 里面提到了两个解决办法&#…
阅读更多...
D. Non-zero Segments(前缀和)

D. Non-zero Segments(前缀和)

Problem - 1426D - Codeforces 题意: 科利亚得到一个整数数组a1,a2,...,an。这个数组既可以包含正整数也可以包含负整数&#xff0c;但是Kolya不喜欢0&#xff0c;所以这个数组不包含任何零。 Kolya不喜欢他的数组中某些子段的总和为0&#xff0c;子段是数组中一些连续的元素…
阅读更多...
IDR 学习笔记

IDR 学习笔记

Multiview Neural Surface Reconstruction by Disentangling Geometry and Appearance 主页&#xff1a;https://lioryariv.github.io/idr/ 论文&#xff1a;https://arxiv.org/abs/2003.09852 代码&#xff1a;https://github.com/lioryariv/idr 效果展示 idr_fountain效果图…
阅读更多...
【面试题】循环队列队列实现栈栈实现队列

【面试题】循环队列队列实现栈栈实现队列

1️⃣设计循环队列OJ链接 2️⃣用队列实现栈OJ链接 3️⃣用栈实现队列OJ链接 这几道面试题需要栈和队列的知识&#xff0c;它们的相关知识可以看我的上一篇文章 1️⃣设计循环队列 先来了解一下环形队列&#xff0c;这也是循环队列的思想&#xff0c;空间是固定的&#xff0c;数…
阅读更多...
Kafka分区策略

Kafka分区策略

默认分区器DefaultPartitioner &#xff08;1&#xff09;指明partition的情况下&#xff0c;直 接将指明的值作为partition值&#xff1b; &#xff08;2&#xff09;没有指明partition值但有key的情况下&#xff0c;将key的hash值与topic的 partition数进行取余得到partiti…
阅读更多...
代谢组学——最接近生物表型的组学

代谢组学——最接近生物表型的组学

■ 什么是代谢组学 在基于基因组-转录组-蛋白质组-代谢组的系统生物学框架内&#xff0c;代谢组学 (metabolomics/metabonomics) 处于最下游&#xff0c;最接近生物表型&#xff0c;主要通过考察生物体系在某一特定时期内受到刺激或扰动前后所有小分子代谢物 (分子量小于 1500…
阅读更多...
信创国产化大背景下，应用性能体验如何保障？

信创国产化大背景下，应用性能体验如何保障？

信创产业是拉动中国经济增长不可或缺的重要抓手。从2020年我国迈入信创发展元年&#xff0c;到2022年信创开始向行业“深水区”迈进&#xff0c;信创产业得到了国家相关政策的大力支持。今年9月底国家下发79号文&#xff0c;全面指导国资信创产业的发展和进度&#xff0c;明确要…
阅读更多...
bootstrap导航窗格响应式二级菜单

bootstrap导航窗格响应式二级菜单

这次碰到的需求是响应式二级导航窗格&#xff0c;默认的导航窗格只有点击下拉框的二级窗格&#xff0c;会有如下问题&#xff1a;一级菜单无法添加超链接&#xff0c;二级菜单展示要多点一下。 实现目标&#xff1a; 1.滑动到指定区域&#xff0c;展示二级菜单。 2.一级菜单和…
阅读更多...
Vue3 - 响应式工具函数（使用教程）

Vue3 - 响应式工具函数（使用教程）

前言 您需要对 ref()、reactive() 有所了解&#xff0c;否则要先学习这些。 Vue3 为响应式提供了一些工具函数&#xff0c;辅助开发&#xff1a; API说明isRef()检查某个值是否为 ref。isProxy()检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowRe…
阅读更多...
前端国际化如何对中文——＞英文自动化翻译小demo

前端国际化如何对中文——＞英文自动化翻译小demo

非专业的国际化语言。 需求是把zh.js文件中的对象的值转换为en.js&#xff08;也就是实现中英文翻译&#xff09; 结果&#xff1a; 话不多说&#xff0c;上技巧&#xff01; 首先找个免费翻译的API接口&#xff0c;我找的百度翻译的API接口。百度翻译开放平台看百度翻译技术…
阅读更多...
仅此一招，再无消息乱序的烦恼

仅此一招，再无消息乱序的烦恼

1. 概览 RocketMQ 早已提供了一组最佳实践&#xff0c;但工作在一线的伙伴却很少知道&#xff0c;项目中的各种随性代码经常导致消息错乱问题&#xff0c;严重影响业务的准确性。为了保障最佳实践的落地&#xff0c;降低一线伙伴的使用成本&#xff0c;统一 MQ 使用规范&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023