web前端期末大作业——基于html+css+javascript+jquery+bootstrap响应式户外旅游网站

news2024/11/25 2:36:55

👨‍🎓学生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>
<title>Home</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script src="js/jquery.min.js"></script>
<!-- //js -->
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Eco Travel Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
</head>
	
<body>
<!-- banner -->
	<div class="banner-with-text">
		<div class="container">
<!-- header -->	
		<div class="header">
			<div class="header-top">
				<input type="text" placeholder="搜查" required=" ">
			</div>
			<div class="clearfix"> </div>
			<div class="header-bottom">
				<div class="header-bottom-left">
					<a href="index.html">生态<span>旅行</span></a>
				</div>
				<div class="header-bottom-right">
					<span class="menu">菜单</span>
					<ul class="nav1">
						<li class="cap"><a href="index.html">首页</a></li>
						<li><a href="about.html">关于</a></li>
						<li><a href="events.html">事件</a></li>
						<li><a href="gallery.html">美术馆</a></li>
						<li><a href="blog.html">博客</a></li>
						<li><a href="contact.html">联系</a></li>
					</ul>
					<!-- script for menu -->
						<script> 
							$( "span.menu" ).click(function() {
							$( "ul.nav1" ).slideToggle( 300, function() {
							 // Animation complete.
							});
							});
						</script>
					<!-- //script for menu -->
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>	
<!-- //header -->
<!-- Slider-starts-Here -->
				<script src="js/responsiveslides.min.js"></script>
				 <script>
				    // You can also use "$(window).load(function() {"
				    $(function () {
				      // Slideshow 4
				      $("#slider3").responsiveSlides({
				        auto: true,
				        pager: true,
				        nav: false,
				        speed: 500,
				        namespace: "callbacks",
				        before: function () {
				          $('.events').append("<li>before event fired.</li>");
				        },
				        after: function () {
				          $('.events').append("<li>after event fired.</li>");
				        }
				      });
				
				    });
				  </script>
			<!--//End-slider-script -->
			<div  id="top" class="callbacks_container wow fadeInUp" data-wow-delay="0.5s">
				<ul class="rslides" id="slider3">
					<li>
						<div class="banner">	
							<div class="jumbotron banner-info">
								<h1>坐伏龙</h1>
								<p>我们清楚地知道，这是一个普遍的错误
									鸦片酊，鸦片酊，鸦片酊
									他有一个真实的和准建筑师的经历
									我要向你解释鸦片酊，鸦片酊，鸦片酊
									他是一个发明家，也是一个准建筑师。</p>
								<p><a class="btn btn-primary btn-lg" href="single.html" role="button">READ MORE</a></p>
							</div>
						</div>
					</li>
ooter-top-grid">
				<h3>与我们联系</h3>
				<div class="twi-txt">
					<div class="twi">
						
					</div>
					<div class="twi-text">
						<p>在Twitter上关注我们</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="twi-txt1">
					<div class="twi">
						
					</div>
					<div class="twi-text">
						<p>
							
							在Flickr上查看我们</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="twi-txt1">
					<div class="twi">
						
					</div>
					<div class="twi-text">
						<p>成为Facebook的粉丝</p>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="col-md-4 footer-top-grid">
				<h3>附加功能</h3>
				<ul class="last">
					<li>乌特姆-基布斯丹临时酒店</li>
					<li>还是你需要一份工作？</li>
					<li>这种需求经常发生。</li>
					<li>以及志愿者,</li>
					<li>你不能利用他们</li> 
					<li>这里有一些人是聪明和被轻视的。</li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
		<div class="footer">
			<p>版权及副本；2015.公司名称保留所有权利。<a target="_blank" href="http://www.17sucai.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
		</div>
	</div>
<!-- //footer -->	
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>
<!-- //here ends scrolling icon -->
</body>
</html>

CSS样式代码🏡

.header-bottom-left a span{
	display:block;
}
.header-bottom-left a:hover{
	text-decoration:none;
	color:#fff;
}
.header-bottom-right{
	float:right;
	width:65%;
}
.header-bottom-right span{
	display:none;
}
.header-bottom-right{
	background:#9cc303;
	border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
}
.header-bottom-right ul{
	padding:1em 2em;
	margin:0;
}
.header-bottom-right ul li{
	display:inline-block;
	margin:0 15px;
}
.header-bottom-right ul li a{
	font-size:15px;
	color:#fff;
	text-decoration:none;
	font-family: 'Roboto Slab', serif;
}
.header-bottom-right ul li a:hover,.header-bottom-right ul li.cap a{
	color:#000;
	text-decoration:none;
}
/*-- //header --*/
/*-- banner --*/
.banner-with-text{
	background: url(../images/2.jpg) no-repeat 0px -170px;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	min-height: 770px;
}
.banner-with-text1{
	background: url(../images/2.jpg) no-repeat 0px -170px;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	min-height:170px;
}
.banner-info{
	margin:5em 0 0 33em;
	width: 54%;
	background:none !important;
	padding: 3em !important;
}
.jumbotron{
	padding:15em 0 0 5em;
}
.jumbotron h1{
	color:#FFFFFF !important;
	font-weight: 300;
	margin: 0;
	font-size: 40px !important;
	font-family: 'Roboto Slab', serif;
}

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

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

七、实训总结😊

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

八、更多干货🎁

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

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

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

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

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

相关文章

分析高数值孔径物镜的聚焦

分析高数值孔径物镜的聚焦

摘要 高数值孔径物镜广泛用于光学光刻、显微镜等。因此&#xff0c;在聚焦模拟中考虑光的矢量性质是非常重要的。 VirtualLab非常容易支持这种镜头的光线和光场追迹分析。 通过光场追迹&#xff0c;可以清楚地展示不对称焦斑&#xff0c;这源于矢量效应。 照相机探测器和电磁场…
阅读更多...
解决台式机麦克风不可用问题，只有音频输出，无音频输入

解决台式机麦克风不可用问题，只有音频输出，无音频输入

解决台式机麦克风不可用问题 戴尔灵越3880 最近因为需要开线上会议&#xff0c;发现戴尔台式机音频只有输出没有输入&#xff0c;也就是只能听见声音&#xff0c;无法输入声音。 先后尝试了各种驱动安装更新之类的调试&#xff0c;无果。 之后通过戴尔支持解决~ 这里多说一…
阅读更多...
京东主图视频上传，如何关联商品投放？

京东主图视频上传，如何关联商品投放？

京东主图视频怎么做&#xff0c;如何上传主图视频&#xff1f;大家都知道商品可以展示五张主图&#xff0c;主图可以帮助买家更好地了解产品卖点。而主图视频可以更全面的展示产品&#xff0c;对此京麦还设置了不同类型的视频模板&#xff0c;但是很多新手商家往往在上传视频的…
阅读更多...
适配器模式（Gateway中GatewayFilter和GlobalFilter整合实现）

适配器模式（Gateway中GatewayFilter和GlobalFilter整合实现）

文章目录GlobalFilter(代表全局过滤器)GatewayFilter(代表路由过滤器)GlobalFilterAdapter(适配器关键)测试类执行结果在SpringCloud Gateway中有两个不同的过滤器接口&#xff0c;分别是GatewayFilter和GlobalFilter。 GlobalFilter&#xff1a;全局过滤器。不需要再配置文件…
阅读更多...
在外公网调阅公司内网资料文件【内网穿透】

在外公网调阅公司内网资料文件【内网穿透】

优盘体积小巧重量轻&#xff0c;是不少人移动存储数据的首选。但优盘虽然方便携带&#xff0c;但也正是因为小巧和轻便&#xff0c;导致一不留神就会丢失&#xff0c;并且存储的数据也会有损坏的风险&#xff0c;因此在云存储概念兴起后&#xff0c;就快速成为数据存储的新风尚…
阅读更多...
网络安全之反序列化漏洞复现

网络安全之反序列化漏洞复现

0x01 Apereo cas简介 Apereo CAS 单点登陆系统是Java服务器环境下使用较为广泛的单点登陆系统。 CAS 全程Central Authentication Service&#xff08;中心认证服务&#xff09;&#xff0c;是一个单点登录协议&#xff0c;Apereo CAS是实现该协议的软件包。 单点登录定义 …
阅读更多...
【面试】Android 大厂必问的8大模块，你掌握了几个？

【面试】Android 大厂必问的8大模块，你掌握了几个？

自15年毕业进入社会从事 Android 开发行业&#xff0c;&#xff0c;已经将近有八年的时光了&#xff1b; 在这将近八年的时间内&#xff0c; 我从 小厂打杂到进入到核心团队&#xff0c;再跳槽到大厂&#xff1b; 在华为呆过一段时间&#xff0c;18年四月份进了阿里一直到现在&…
阅读更多...
体态识别算法在 Android 端部署实例

体态识别算法在 Android 端部署实例

背景介绍 随着软硬件技术的发展&#xff0c;智能穿戴式设备逐渐从概念走向商用化。在过去几年内&#xff0c;Google、Apple以及Sony等科技公司在体积、功耗控制以及成本等方面做得越来越好&#xff0c;推出了一大批可穿戴产品&#xff0c;具有代表性的成果有&#xff1a;1. 智能…
阅读更多...
Cy5 Alkyne,1223357-57-0,花青素Cyanine5炔基用于点击化学标记反应

Cy5 Alkyne,1223357-57-0,花青素Cyanine5炔基用于点击化学标记反应

CAS号&#xff1a;1223357-57-0 | 英文名&#xff1a; Cyanine5 alkyne&#xff0c;Cy5 Alkyne | 中文名&#xff1a;花青素CY5炔基 CASNumber&#xff1a;1223357-57-0 Molecular formula&#xff1a;C35H42ClN3O Molecular weight&#xff1a;556.19 Purity&#xff1a;9…
阅读更多...
【CNN】ResNet——开启的深度学习从1到无限可能的新时代

【CNN】ResNet——开启的深度学习从1到无限可能的新时代

前言 深度残差网络&#xff08;Deep residual network, ResNet&#xff09;的提出是CNN图像史上的一件里程碑事件&#xff0c;ResNet在2015年发表当年取得了图像分类&#xff0c;检测等等5项大赛第一&#xff0c;并又一次刷新了CNN模型在ImageNet上的历史记录。直到今天&#…
阅读更多...
《看漫画学Python》1、2版分享，python最佳入门教程，中学生用业余时间都能学会，北大教授看完都这样定义它

《看漫画学Python》1、2版分享，python最佳入门教程，中学生用业余时间都能学会，北大教授看完都这样定义它

前言 学习Python的小伙伴大部分应该都知道《看漫画学Python&#xff1a;有趣、有料、好玩、好用&#xff08;全彩版&#xff09;》这本书&#xff01; 但是刚开始接触Python的朋友都会有一个共同的烦恼&#xff0c;自学好无聊&#xff0c;好枯燥&#xff0c;不想坚持了……所…
阅读更多...
Ajax使用

Ajax使用

简介&#xff1a; 全称:Asynchronous JavaScript And XML 中文名:异步js与XML 作用:网页使用JavaScript脚本实现前端与服务器的异步交互技术,可以在不刷新网页的前 提下实现和服务器的数据交互 注意:ajax不是一种编程语言&#xff0c;而是使用JS的一种技术。 使用步骤 步骤&am…
阅读更多...
最佳镜像搬运工 Skopeo 指南

最佳镜像搬运工 Skopeo 指南

最佳镜像搬运工 Skopeo 指南 文章目录最佳镜像搬运工 Skopeo 指南1. 概述2. Skopeo 是如何工作的&#xff1f;3. 为什么要用 Skopeo&#xff1f;3.1 灵活性3.2 安全性和可访问性3.3 功能多样性4. 安装4.1 Fedora4.2 RHEL / CentOS Stream ≥ 84.3 RHEL/CentOS ≤ 7.x4.4 Ubuntu…
阅读更多...
GPU显存占满但利用率却很低

GPU显存占满但利用率却很低

来帕多瓦联培已经一个多月了&#xff0c;最近调代码跑实验又发现了这个问题。这里提供另外一个解决思路。一个原因还是 cpu没跟上gpu节奏。 通常我们都会用尽可能大的 batch 来占满显存。但是如果cpu的读取和传输跟不上的话就会导致gpu利用率时上时下&#xff0c;而且训练时间…
阅读更多...
2022.3IDEA配置grep console

2022.3IDEA配置grep console

首先安装Grep Console (这个大家都会吧) 安装之后 打开File 选项的Setting→Other Settings→Grep Console 3. 打开之后默认的样式是下图&#xff08;我做了一下标识&#xff09; whole line:是否一整行都是这个样式。用于区分一个关键字和一行字case insensitive: 不勾选就行…
阅读更多...
spring cache (ehcache方式)

spring cache (ehcache方式)

目录前置pom: jar配置文件:ehcache.xmlapplication.ymlMyEhCacheCacheConfiguration.java效果图禁用 MyEhCacheCacheConfiguration.java启用 MyEhCacheCacheConfiguration.java前置 会演示springcache的使用方式 项目地址: https://gitee.com/xmaxm/test-code/blob/master/cha…
阅读更多...
第五章 神经网络（上）

第五章 神经网络（上）

5.1 神经元模型 神经网络目前使用的最广泛的定义为“神经网络是由具有适应性的简单单元组成的广泛并行互联的网络&#xff0c;它的组织能够模拟生物神经系统对真实世界物体所作出的交互反应。神经网络中最基本的成分是神经元模型&#xff0c;即上述定义的简单单元。 在生物神经…
阅读更多...
离线安装Redis集群(redis-6.2.4)

离线安装Redis集群(redis-6.2.4)

记录&#xff1a;326 场景&#xff1a;在CentOS 7.9操作系统上&#xff0c;使用redis-6.2.4版本&#xff0c;在三台机器上&#xff0c;离线安装Redis集群。 版本&#xff1a; 操作系统&#xff1a;CentOS 7.9 Redis版本&#xff1a;redis-6.2.4 1.主机规划 目标&#xff…
阅读更多...
物联网僵尸网络再次发起大规模攻击事件回顾

物联网僵尸网络再次发起大规模攻击事件回顾

执行摘要 随着物联网的不断发展&#xff0c;物联网安全也被越来越多的人所关注。我们于 2016 年发布《物联网安全 白皮书》&#xff0c;进行物联网安全的科普介绍&#xff1b;于 2017 年发布《2017 物联网安全年报》&#xff0c;关注物联网资产 在互联网上的暴露情况、物联网设…
阅读更多...
预训练模型相对位置编码和绝对位置编码的通俗理解

预训练模型相对位置编码和绝对位置编码的通俗理解

1 transformer最经典的理解&#xff1a; http://jalammar.github.io/illustrated-transformer/ 2 位置编码 相对位置编码(relative position representation)&#xff1a;https://zhuanlan.zhihu.com/p/397269153 Transformer中的相对位置编码(Relative Position Embedding)…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023