0
点赞
收藏
分享

微信扫一扫

网页设计作业 HTML5期末大作业：旅游网站设计——蓝色的地方旅游门户(9页) HTML+CSS+JavaScript

船长_Kevin 2022-01-08 阅读 28
javascriptcsshtmlhtml5css3

HTML5期末大作业：旅游网站设计——蓝色的地方旅游门户(9页) HTML+CSS+JavaScript

作品介绍

1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

一、作品展示

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

二、文件目录

在这里插入图片描述

三、代码实现



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>首页 - 吃 - 兴文旅游网</title>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollfollow.js"></script>
<script type="text/javascript" src="js/flash.js"></script>
<script type="text/javascript" src="js/int.js"></script>
</head>
<body>
<div id="topBar">
	<div class="wrapper">
		<div class="l">游客您好，欢迎访问兴文旅游资讯网！</div>
		<div class="r">
			<a href="#" onclick="window.external.AddFavorite(location.href,'兴文旅游网');">加入收藏</a>
			<a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage(location.href);">设为首页</a>
			<span>
			<a href="http://shop.xingwentour.gov.cn/" target="_blank">旅游商城</a>|
			<a href="http://www.xwta.gov.cn" target="_blank">政务网</a>|
			<a href="http://en.xingwentour.gov.cn" target="_blank">English</a>
			</span>
		</div>
	</div>
</div>
<div id="header">
	<div class="wrapper">
		<div class="logo">
			<a href="/"><img src="images/logo.gif" alt="兴文旅游资讯网" /></a>
			<h1>兴文县旅游门户　兴文县旅游信息平台</h1>
		</div>
		<form target="_blank" action="/search.aspx" method="get"><div class="search">
			<dl>
				<dd><a id="search_type1" onclick="select_search_type(1);return false;" href="#" class="current">景点</a></dd>
				<dd><a id="search_type2" onclick="select_search_type(2);return false;" href="#">线路</a></dd>
				<dd><a id="search_type3" onclick="select_search_type(3);return false;" href="#">资讯</a></dd>				
			</dl>
			<ul>
				<li><a href="/live/hotel_list.aspx" target="_blank">酒店住宿</a></li>
				<li><a href="/eat/foodshops.aspx" target="_blank">餐饮娱乐</a></li>
			</ul>	
			<div>
				<input type="text" name="q" onfocus="if(this.value=='这是一个神奇的搜索'){this.value='';}" value="这是一个神奇的搜索" />
				<input name="search_type" id="search_type" value="1" type="hidden"  /><button type="submit">搜索</button>
			</div>
			<p><strong>热门搜索：</strong><a href="/search.aspx?search_type=1&q=%D0%CB%CE%C4%CA%AF%BA%A3">兴文石海</a><a href="/search.aspx?search_type=1&q=%83k%CD%F5%C9%BD%BE%B0%C7%F8">僰王山景区</a><a href="/search.aspx?search_type=3&q=+%CF%E3%CB%AE%C9%BD"> 香水山</a><a href="/search.aspx?search_type=3&q=qw">qw</a><a href="/search.aspx?search_type=1&q=adsf">adsf</a><a href="/search.aspx?search_type=1&q=%D1%CF%BC%D2%B6%B4">严家洞</a></p>
		</div></form>
	</div>
</div>
<div id="nav">
	<dl>
		<div><iframe src="http://m.weather.com.cn/m/pn8/weather.htm?id=101271110T " width="480" height="20" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" allowtransparency="true" scrolling="no"></iframe></div>
		<dd><a href="/service" target="_blank" class="a1">旅游服务中心</a></dd>
		<dd><a href="/diy/" target="_blank" class="a2">个性化线路设计</a></dd>
		<dd><a href="/xuniyou/" target="_blank" class="a3">虚拟游</a></dd>
	</dl>
	<ul>
		<li><a href="/index.aspx" class="a1">首页</a></li>
		<li><a href="/eat" class="a2">吃</a></li>
		<li><a href="/live" class="a3">住</a></li>
		<li><a href="/traffic" class="a4">行</a></li>
		<li><a href="/tour" class="a5">游</a></li>
		<li><a href="/shop" class="a6">购</a></li>
		<li><a href="/play" class="a7">娱</a></li>
	</ul>
</div> 
<script type="text/javascript">
function select_search_type(n){
	document.getElementById('search_type1').className='';
	document.getElementById('search_type2').className='';
	document.getElementById('search_type3').className='';
	document.getElementById('search_type'+n).className='current';
	document.getElementById('search_type').value=n;
}
</script><div id="main">
	<div id="cate">
		<a class="prev"></a>
		<div class="scroll">
			<ul>
				<li>
					<strong>美食</strong>
					<a href="/eat/feature.aspx">特色美食</a>|<a href="/eat/foodshops.aspx">名菜馆</a>|<a href="/eat/culture.aspx">美食文化</a><br />
					<!--<a href="#">美食地图</a>|--><a href="#">美食达人</a>
				</li>
				<li>
					<strong>住宿</strong>
					<a href="/live/hotel_list.aspx?hotel_type=1">星级酒店</a>|<a href="/live/hotel_list.aspx?hotel_type=2">经济宾馆</a>|<a href="/live/hotel_list.aspx?hotel_type=4">农家乐</a><br />
					<a href="http://shop.xingwentour.gov.cn/Live/" target="_blank" class="blue">酒店预订</a>
				</li>
				<li>
					<strong>旅游</strong>
					<a href="/tour/scenic.aspx">旅游景点</a>|<a href="/tour/line.aspx">精品路线</a>|<a href="/tour/rural.aspx">乡村旅游</a><br />
					<a href="/tour/guides.aspx">导游介绍</a>|<a href="//diy" class="blue">线路定制</a>|<a href="tour/travel_agency.aspx">旅行社</a>
				</li>				
				<li>
					<strong>购物</strong>
					<a href="/shop/specialty.aspx">特产名物</a>|<a href="/shop/shopplace.aspx">购物场所</a>|<a href="/shop/article_list.aspx?cid=16">购物达人</a><br />
					<a href="/shop/article_list.aspx?cid=11">优惠活动</a>|<a href=" http://shop.xingwentour.gov.cn/" class="red b">旅游商城</a>
				</li>
				<li>
					<strong>娱乐</strong>
					<a href="/play/match.aspx?type=2" class="b">旅游节庆</a>|<a href="/play/match.aspx?type=1">民族特色演出</a><br />
					<a href="/play/match.aspx?type=3">体育赛事</a>|<a href="/play/playplace.aspx">娱乐场所</a>
				</li>
				<li>
					<strong>服务</strong>
					<a href="/service/info.aspx">旅游概况</a>|<a href="/service/article.aspx">旅游资讯</a>|<a href="#">游客咨询</a><br />
					<a href="/service/interaction.aspx">旅游互动</a>|<a href="/service/toolinfo.aspx">旅行工具箱</a>
				</li>
			</ul>			
		</div>		
		<a class="next"></a>
	</div>	<div id="page">
		<div class="pageLeft">
			<h2 class="t1">吃</h2>
			<div class="subNav">
				<div>
					<ul>
						<li><a href="feature.aspx" >特色美食</a></li>
						<li><a href="foodshops.aspx"  >名菜馆</a></li>
						<li><a href="culture.aspx" >美食文化</a></li>
						<!--<li><a href="#" >美食地图</a></li>	-->
						<!--<li><a href="#" >美食达人</a></li>	-->
					</ul>
					<form action="/search.aspx" method="get"><p><input type="text" name="q" onfocus="if(this.value=='全文搜索关键字'){this.value='';}" value="全文搜索关键字" /><input name="search_type" type="hidden" value="3" /><button type="submit">搜</button><a href="#">高级</a></p></form>				</div>			
			</div>
			<div class="cust">
				<p><a href="/diy/" target="_blank">定制我的线路</a></p>
			</div>
			<div class="links">
				<h3>旅游小贴士</h3>

				<ul>
					<li><a href="http://shop.xingwentour.gov.cn/Travel/" target="_blank" class="a1">门票预订</a></li>
					<li><a href="http://shop.xingwentour.gov.cn/Live/" target="_blank" class="a2">酒店预订</a></li>
					<li><a href="http://www.weather.com.cn/weather/101271110.shtml" target="_blank" class="a3">天气预报</a></li>
					<li><a href="/service/knowledge_list.aspx" target="_blank" class="a4">出游常识</a></li>
					<li><a href="/service/faq.aspx" target="_blank" class="a5">常见问题</a></li>
					<li><a href="/service/yellowpage.aspx" target="_blank" class="a6">常用电话</a></li>
					<li><a href="http://www.12306.cn/mormhweb/" target="_blank" class="a7">列车查询</a></li>
					<li><a href="http://flight.qunar.com/status/alphlet_order.jsp" target="_blank" class="a8">航班查询</a></li>
				</ul>
			</div>			<div class="ad">
				<a href="#"><img src="images/ad1.jpg" /></a>
			</div>
		</div>		<div class="pageRight">
			<div class="chiMain">
				<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript">
$(function() {
	$('.chiMain .itemA .bPic').cycle({
  	 	fx:      'scrollLeft', 
    	speed:    300,
        timeout: 3000,
        pager:  '.chiMain .itemA .sPic',
        pagerAnchorBuilder: function(idx, slide) {
            return '.chiMain .itemA .sPic li:eq(' + (idx) + ') a';
        }
    });	
});
</script>
				<div class="itemA">
						<ul class="bPic">
                        								<li><img src="images/13358590557048136.jpg" height="270" /><p><a href="article_detail.aspx?aid=30" target="_blank">石米煎蛋</a></p></li>
                            							<li><img src="images/133585869242480091.jpg" height="270" /><p><a href="article_detail.aspx?aid=28" target="_blank">大坝猪儿粑</a></p></li>
                            							<li><img src="images/1335858604366991827.jpg" height="270" /><p><a href="article_detail.aspx?aid=27" target="_blank">野山菌乌鸡</a></p></li>
                            							<li><img src="images/1335858544745679406.jpg" height="270" /><p><a href="article_detail.aspx?aid=26" target="_blank">石磨豆渣</a></p></li>
                            						</ul>
						<ul class="sPic">
                        							<li><a class="current" href="article_detail.aspx?aid=30"><img src="images/small_13358590557048136.jpg" /></a></li>
                            							<li><a  href="article_detail.aspx?aid=28"><img src="images/small_133585869242480091.jpg" /></a></li>
                            							<li><a  href="article_detail.aspx?aid=27"><img src="images/small_1335858604366991827.jpg" /></a></li>
                            							<li><a  href="article_detail.aspx?aid=26"><img src="images/small_1335858544745679406.jpg" /></a></li>
                            						</ul>
				</div>
				<div class="itemB">
					<form name="formsearch" onsubmit="if(document.formsearch.q.value=='请输入关键字'){document.formsearch.q.value='';}" action="foodshops.aspx" method="get"><input type="text" name="q"  onfocus="if(this.value=='请输入关键字'){this.value='';}"  value="请输入关键字" />
					<select name="type"><option value="">所有类别</option><option label="风味酒楼" value="1">风味酒楼</option>
<option label="商务宴请" value="2">商务宴请</option>
<option label="特色小吃" value="3">特色小吃</option>
<option label="农家乐" value="4">农家乐</option>
</select>
					<button type="submit">搜 索</button></form>
				</div>
				<div class="clearit"></div>
				<div class="itemC">
					<h2>名菜馆</h2>
					<ul class="list">
                    							<li><a target="_blank" href="foodshops_detail.aspx?fid=4"><img src="images/small_133430051224932637.jpg" /></a><p><a target="_blank" href="foodshops_detail.aspx?fid=4">兴文县僰苑假日酒店</a></p></li>
                        						<li><a target="_blank" href="foodshops_detail.aspx?fid=3"><img src="images/small_13342995521533953.jpg" /></a><p><a target="_blank" href="foodshops_detail.aspx?fid=3">兴文大酒店餐饮</a></p></li>
                        						<li><a target="_blank" href="foodshops_detail.aspx?fid=2"><img src="images/small_1334299196461429480.jpg" /></a><p><a target="_blank" href="foodshops_detail.aspx?fid=2">潇雅轩</a></p></li>
                        						<li><a target="_blank" href="foodshops_detail.aspx?fid=1"><img src="images/small_13342990377686426.jpg" /></a><p><a target="_blank" href="foodshops_detail.aspx?fid=1">兴文县舒沁苑农家乐</a></p></li>
                        					</ul>
					<ul class="clearit"></ul>
					<a href="foodshops.aspx" class="more" target="_blank">更多</a>
				</div>
				<div class="itemD">
					<h2>美食文化</h2>
					<div>
						<img src="images/chi2.jpg" />
						<ul>
                        								<li><a target="_blank" href="article_detail.aspx?aid=8">兴文名酒-石海洞香酒</a></li>
                            							<li><a target="_blank" href="article_detail.aspx?aid=7">兴文石海猪儿粑</a></li>
                            							<li><a target="_blank" href="article_detail.aspx?aid=6">宜宾的饮食以鲜辣为主要特色</a></li>
                            							<li><a target="_blank" href="article_detail.aspx?aid=5">探寻古老工艺的足迹 合什手工面的前世</a></li>
                            						</ul>
					</div>
				</div>
				<!--<div class="itemE">
					<h2>美食达人</h2>
					<div>
						<strong><a href="#">造造饭蒸馍馍 四川北部白马人的饮食习惯</a></strong>
						<p><span>@不吃猫的鱼</span>在四川平武县、南坪县和甘肃文县境内住着一个部族，人称白马人。白马人族属未定，有“白马氏”、“白马藏”、”白马羌”诸说...</p>
						<a href="#" class="more">更多>></a>
					</div>
					<a href="#"><img src="images/chi3.jpg" /></a>
				</div>-->
			</div>	
		</div>
		<div class="clearit"></div>	
	</div>
		<div id="footer">
		<div class="nav">
			<ul>
            					<li><a href="/service/info_view.aspx?aid=5" target="_blank">关于我们</a></li>
                				<li><a href="/service/info_view.aspx?aid=6" target="_blank">广告服务</a></li>
                				<li><a href="/service/info_view.aspx?aid=7" target="_blank">联系方式</a></li>
                				<li><a href="/service/info_view.aspx?aid=8" target="_blank">网站声明</a></li>
                				<li><a href="/service/info_view.aspx?aid=9" target="_blank">诚聘英才</a></li>
                				<li><a href="/service/info_view.aspx?aid=10" target="_blank">合作伙伴</a></li>
                				<li><a href="#">返回顶部</a></li>
			</ul>
		</div>
		<div class="copyright">
			<div class="l">
				&copy;2011 宜宾市兴文县旅游局 All Rights Reserved. <a href="http://www.miibeian.gov.cn" target="_blank">蜀ICP备10207069号</a>　<a href="/manage/" target="_blank">网站管理</a> <!--<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F61c10ac8bc0b320cb36a7ee421dabefa' type='text/javascript'%3E%3C/script%3E"));
</script>--><br />
				地址：宜宾市长江大道7号B区115室 电话：0831-2323293  邮编：614000 电子邮箱：tour@xingwentour.gov.cn
			</div>
			<div class="r">
				您还可以通过微博联系与关注我们！<br />
				<a href="#" class="a1">关注@新浪微博</a><a href="#" class="a2">关注@腾讯微博</a>
			</div>
			<div class="clearit"></div>
		</div>
	</div></div>
<div id="author">
	<ul>
		<li><img src="images/f1.gif" /></li>
		<li><img src="images/f2.gif" /></li>
		<li><img src="images/f3.gif" /></li>
		<li><img src="images/f4.gif" /></li>
	</ul>
	<p><strong>英派特斯</strong>提供全程网络策划与运营　Design by:<a href="http://www.citycy.com" target="_blank">领城互动</a></p>
</div><a href="#" title="返回顶部" id="goTop"></a>
</body>
</html>

四、获取更多源码

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
在这里插入图片描述

五、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

六、更多源码

HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在这里插入图片描述

举报

相关推荐

HTML5期末大作业：旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript

csshtml5javascript旅游网页HTMLhtml

HTML期末大作业 ~ 凤阳旅游网页设计作业成品(HTML+CSS+JavaScript)

web课程设计网页规划与设计HTML网页设计结课作业我的家乡网页设计实现HTML旅游网页设计实现HTMLHTML作业Html/CSS前端开发

web前端大作业：旅游网页主题网站设计——武汉旅游网页设计(11页)HTML+CSS+JavaScript

web大学生期末作业javascript大作业web前端实训作业htmll大作业html系统/运维

HTML+CSS大作业：旅游网页设计与实现——旅游风景网站6页HTML+CSS+JavaScript实训大作业 HTML+CSS大作业 HTML期末大作业...

htmlcssjavascript旅游风景系统/运维

HTML5期末大作业：北京旅游网页设计制作(1页) 简单静态HTML网页作品 我的旅游网页作业成品 学生旅游网站模板

jscsshtmlwebdiv+cssJava编程语言

HTML+CSS大作业HTML5期末大作业 旅游酒店网站设计——旅游酒店服务预订(1页) web网页设计—— 出游

csshtml前端javascripthtml5

HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现

旅游网站设计HTML期末大作业HTMLjavascript期末作业HTML作业学生网站设计作业源码HTMLHtml/CSS前端开发

HTML大期末作业: 关于城市旅游的HTML网页设计——北京(5页) HTML+CSS+JavaScript 旅游网页设计网页HTML

旅游网页设计网页HTML我的家乡网页设计HTMLHTML期末大作业旅游网页HTMLhtml

HTML5期末大作业：旅游网页设计与实现——旅游风景区网站HTML+CSS+JavaScript 景点静态网页设计 学生DW静态网页设计

html静态网页web课程与设计web前端期末大作业学生网页作业html编程语言

HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)

web大学生期末作业javascript大作业web前端实训作业htmll大作业html系统/运维
0 条评论