学生网站模板—千岛湖旅游(6页) HTML+CSS+JavaScript web网页设计—— 出游 旅途

最新推荐文章于 2024-06-02 13:21:50 发布
最新推荐文章于 2024-06-02 13:21:50 发布
阅读量299 收藏 3
点赞数
分类专栏： html网页设计作业 web大学生个人网站作业模 学生div+css静态网页设计成品 文章标签： css 前端 html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_524614081/article/details/122353456
版权
这是一个HTML5期末大作业，展示了千岛湖旅游网站的设计，包含首页、公园简介、新闻动态、图片墙和详细地址等页面。网站使用HTML、CSS和JavaScript实现，包括焦点图插件和滚动图插件，提供了丰富的交互效果，如头部导航栏的点击样式、信息列表的鼠标悬停效果等。代码中实现了焦点图的自动切换和手动控制，以及滚动图的左右滑动功能。
摘要由CSDN通过智能技术生成

HTML5期末大作业：千岛湖旅游网站设计——千岛湖旅游(6页) HTML+CSS+JavaScript web网页设计—— 出游 旅途

文章目录

一、作品展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!DOCTYPE html>
<html>
	<head>
		<title>首页</title>
		<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> 
		<link rel="stylesheet" type="text/css" href="css/initi.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<!-- 下面滚动图插件开始 -->
		<link rel="stylesheet" type="text/css" href="css/plus1.css" />
		<!-- 下面滚动图插件结束 -->
		<!-- 焦点图插件开始 -->
		<link type="text/css" href="css/style.css" rel="stylesheet"/>
		<!-- 焦点图插件结束 -->
		<script type="text/javascript" src="js/jquery.js"></script>
		<!-- 焦点图插件开始 -->
		<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
		<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
		<!-- 焦点图插件结束 -->
		<script type="text/javascript">
			$(function() {
				//焦点图插件代码开始
				$(".main_visual").hover(
					function(){
						$("#btn_prev,#btn_next").fadeIn()
					},
					function(){
						$("#btn_prev,#btn_next").fadeOut()
					}
				);
				$dragBln = false;
				$(".main_image").touchSlider({
					flexible : true,
					speed : 200,
					btn_prev : $("#btn_prev"),
					btn_next : $("#btn_next"),
					paging : $(".flicking_con a"),
					counter : function (e){
						$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
					}
				});
				$(".main_image").bind("mousedown", function() {
					$dragBln = false;
				});
				
				$(".main_image").bind("dragstart", function() {
					$dragBln = true;
				});
				
				$(".main_image a").click(function(){
					if($dragBln) {
						return false;
					}
				});
				timer = setInterval(function(){
					$("#btn_next").click();
				}, 5000);
				$(".main_visual").hover(
					function(){
						clearInterval(timer);
					},
					function(){
						timer = setInterval(
							function(){
								$("#btn_next").click();
							},5000
						);
					}
				);
				
				$(".main_image").bind("touchstart",function(){
					clearInterval(timer);
				}).bind("touchend", function(){
					timer = setInterval(function(){
						$("#btn_next").click();
					}, 5000);
				});
				//焦点图插件代码结束
				
				//topbar 单击样式
				$(".topbar li a").click(function(){
					$(this).css("color", "#0153a5");
					$(this).parent().siblings().find("a").css("color", "#666");
				});
				
				//鼠标经过列表样式
				$(".left_ul li").hover (
					function(){
						$(this).addClass("li_click_b");
					},
					function(){
						$(this).removeClass("li_click_b");
					}
				);
				
				<!-- 下面滚动图插件开始 -->
				$li1 = $(".apply_nav .apply_array");
				$window1 = $(".apply .apply_w");
				$left1 = $(".apply .img_l");
				$right1 = $(".apply .img_r");
				$window1.css("width", $li1.length*176);
				var lc1 = 0;
				var rc1 = $li1.length-5;
				$left1.click(function(){
					if (lc1 < 1) {
						
						return;
					}
					lc1--;
					rc1++;
					$window1.animate({left:'+=176px'}, 1000);
				});
				$right1.click(function(){
					if (rc1 < 1){
						
						return;
					}
					lc1++;
					rc1--;
					$window1.animate({left:'-=176px'}, 1000);
				});
				<!-- 下面滚动图插件结束 -->
			});
		</script>
	</head>
	<body>
		<div class="main">
			<div class="header">
				<div class="help">
					<a href="">联系我们</a> | 
					<a href="">站点帮助</a> | 
					<a href="">问题反馈</a> 
				</div>
			</div>
			<div class="topbar">
				<ul>
					<li><a class="clicked" href="index.html">首页</a></li>
					<li><a href="about.html">公园简介</a></li>
					<li><a href="news.html">新闻动态</a></li>
					<li><a href="show.html">图片墙</a></li>
					<li><a href="map.html">详细地址</a></li>
					<li><a>图片展示</a></li>
					<li><a>联系我们</a></li>
					<li><a>学习资料</a></li>
					<li><a>搞笑图片</a></li>
				</ul>
			</div>
			<!-- 好像只有添加iframe才能使头部独立成一个文件来处理，而且使用js给导航栏添加单击样式
			<iframe name="contain" width="100%" height="100%"></iframe>
			-->
			<div class="content">
				<!-- 焦点图开始 -->
				<div class="main_visual">
					<div class="flicking_con">
						<a href="#">1</a>
						<a href="#">2</a>
						<a href="#">3</a>
						<a href="#">4</a>
						<a href="#">5</a>
					</div>
					<div class="main_image">
						<ul>
							<li><span class="img_1"></span></li>
							<li><span class="img_2"></span></li>
							<li><span class="img_3"></span></li>
							<li><span class="img_1"></span></li>
							<li><span class="img_2"></span></li>
						</ul>
						<a href="javascript:;" id="btn_prev"></a>
						<a href="javascript:;" id="btn_next"></a>
					</div>
				</div>
				<!-- 焦点图结束 -->
				
				<!-- 通知 -->
				<div class="notice">
					<p>通知：<a href="">1. 冬季来临大家注意保暖。 </a><a href="" class="more">更多>></a></p>
				</div>
				
				<!-- 信息展示框 -->
				<div class="message">
					<div class="left">
						<div class="left_m">
							<div class="one_left">
								<img src="images/one.jpg" style="*float: left" />
								<img src="images/more_y.jpg" class="float_right" />
								<div class="clear"></div>
							</div>
							<ul class="left_ul">
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li class="li_click"><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
							</ul>
							<div class="clear: both"></div>
						</div>
						<div class="shadow">
							<img src="images/shadow.jpg" />
						</div>
					</div>
					<div class="right">
						<div class="right_m">
							<div class="one_left">
								<img src="images/two.jpg" style="_float: left" />
								<div class="clear"></div>
							</div>
							<div class="login">
								<table>
									<tr>
										<td>
											<p class="user">用户名：</p>
										</td>
										<td>
											<input type="text" name="username" class="username" />
										</td>
										<td>
											
										</td>
									</tr>
									<tr>
										<td>
											<p class="pass">密<span style="margin: 0px 6px 0px 7px"></span>码：</p>
										</td>
										<td>
											<input type="text" name="password" class="password" />
										</td>
										<td>	
											<p class="forget"> 忘记密码！</p>
										</td>
									</tr>
									<tr>
										<td>
											<input type="submit" value="登录" class="sub" />
										</td>
										<td>
											<input type="reset" value="取消" class="res" />
										</td>
										<td></td>
									</tr>									
								</table>
							</div>
							<div class="clear: both"></div>
						</div>
						<div class="shadow">
							<img src="images/shadow.jpg" />
						</div>
					</div>
					<div class="clear"></div>
					<div class="left">
						<div class="left_m">
							<div class="one_left">
								<img src="images/three.jpg" style="*float: left" />
								<img src="images/more_b.jpg" class="float_right" />
								<div class="clear"></div>
							</div>
							<ul class="left_ul">
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li ><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
							</ul>
							<div class="clear: both"></div>
						</div>
						<div class="shadow">
							<img src="images/shadow.jpg" />
						</div>
					</div>
					<div class="right">
						<div class="right_m">
							<div class="one_left">
								<img src="images/four.jpg" style="*float: left" />
								<img src="images/more_b.jpg" class="float_right" />
								<div class="clear"></div>
							</div>
							<ul class="left_ul">
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li ><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
							</ul>
							<div class="clear: both"></div>
						</div>
						<div class="shadow">
							<img src="images/shadow.jpg" />
						</div>
					</div>
					<div class="clear"></div>
				</div>
				
				
				
				<!-- 下面滚动图片代码 -->
				<div class="apply">
					<div class="img_l"><img src="images/left.gif" /></div>
					<div class="apply_nav">
						<div class="apply_w">
							<div class="apply_array">
								<div class="apply_img"><img src="images/sinaminiblog.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/kaixin001.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">开心001</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/renren.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人网</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/sinaminiblog.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/kaixin001.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">开心001</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/renren.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人网</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/sinaminiblog.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/kaixin001.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">开心001</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/renren.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人网</a></div>
							</div>
							
						</div>
					</div>
					<div class="img_r"><img src="images/right.gif" /></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="footer">
			<p class="address">地址：陕西省宝鸡市千阳县南寨镇闫家村五组27号</p>
			<p>张旭超个人版权所有</p>
		</div>
		<p style="text-align: center">
			来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a>
		</p>
	</body>
</html>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码

优质内容贡献
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5期末大作业：千岛湖旅游网站设计——千岛湖旅游(6页) HTML+CSS+JavaScript web网页设计—— 出游 旅途
11-26 229
HTML5期末大作业：千岛湖旅游网站设计——千岛湖旅游(6页) HTML+CSS+JavaScript web网页设计—— 出游 旅途 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下
千岛湖旅游景点网站模板.rar
05-24
千岛湖旅游景点网站模板基于jquery.js和jquery.touchSlider.js制作，蓝色风格，全套模板，包含首页、公园简介、新闻动态、图片墙、地图等网站模板页面。
JavaScript大作业 基于HTML+CSS+JavaScript站酷静态页面官网7页
最新发布
dreamweaver网页设计
06-02 869
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)
weixin__BJ050106的博客
01-10 780
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
北京旅游HTML学生网页设计作品 dreamweaver作业静态HTML网页设计模板 北京旅游景点网页作业制作 HTML+CSS+JS
网页设计与制作
12-19 270
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；网页编辑方面。
HTML+CSS简单的网页制作期末作业——浙江旅游景点介绍网页制作
QQ_____365392777的博客
12-03 194
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
基于HTML旅游网站项目的设计与实现——千岛湖旅游景点网站模板(6个页面)HTML+CSS+JavaScript
08-10
该项目名为“基于HTML旅游网站项目的设计与实现——千岛湖旅游景点网站模板”，是一个专门针对学生HTML静态网页设计作业而设计的项目。它旨在帮助学生理解并掌握HTML、CSS和JavaScript的基本用法及其在网页设计中的...
千岛湖旅游地产-度假酒店市场报告.pdf
07-07
千岛湖旅游地产-度假酒店市场报告.pdf
杭州千岛湖润和度假村修建性详细规划方案-33页.pdf
07-07
杭州千岛湖润和度假村修建性详细规划方案-33页.pdf
AutoCAD设计图纸中式-别墅三层-杭州千岛湖（全）-dwg源格式.zip
11-27
本资料包“中式-别墅三层-杭州千岛湖（全）-dwg源格式.zip”正是基于AutoCAD的建筑设计图纸，涵盖了从概念设计到施工细节的全过程，对于学习者或专业人士来说，是一份极具价值的参考资料。 首先，我们来了解CAD...
【web开发网页制作】Html+Css旅游主题杭州网页大作业（6页面）【附源码下载】
赏樱看雪撸代码
12-12 284
期末作业网页制作练习，网页制作大作业，旅游主题网页，介绍风景网页制作，网页制作demo源代码，多个页面旅游网页制作，html+css多页面样例，原创网页制作源代码。
56个网站模板合集（HTML+CSS+JavaScript）
12-27
56个网站模板合集:Bootstrap Metro UI CSS 布局实例模板,Bootstrap3响应式后台管理系统模板Detail,Bootstrap后台管理系统登陆模板页面,Metro风格手机网站模板HTML5+CSS3模板JCMobile,超级大气漂亮的响应式Bootstrap3后台模板AirAdmin下载等等。
动态网页模板
12-25
嵌入了动态插件以及图片，得出的效果很显然，让人焕然一新，最后希望能帮到大家。
网站模板 web css div js
03-08
漂亮的门户网站模板，值得你珍藏（网站模板 web css div js）
js网页模板
04-25
好的资源就应该一起快了的分享，这是个网页模板的。
HTML+CSS+JavaScript前端模板
12-24
网页模板，HTML课程设计大作业，后台管理界面，可打开直接使用
Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页，含有table表格，js表单验证还有首页视频。以及列表页。浮动布局。div+css+js
HTML网页设计
07-28 7472
1网页简介此作品为学生个人主页网页设计题材，HTML+CSS布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平,非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。......
大二学生基于Html+Css+javascript的网页制作——动漫设计公司响应式网站模板 (10个页面)
qq_38518191的博客
05-09 1009
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
我需要一个用HTML5加css3制作一个杭州的旅游攻略的网页代码
06-08
很抱歉，由于篇幅限制，我无法在这里提供完整的HTML5和CSS3代码。不过，以下是一个简单的HTML5和CSS3代码示例，可供您参考： HTML5代码： ``` <!DOCTYPE html> <html> 杭州旅游攻略 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值