HTML5期末大作业：景点介绍网站设计——汉中印象景点介绍 (19页) HTML CSS JavaScript 学生旅行 游玩 主题住宿网页
HTML5期末大作业：景点介绍网站设计——汉中印象景点介绍 (19页) HTML+CSS+JavaScript 学生旅行 游玩 主题住宿网页
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
获取更多源码
PC电脑端关注我们
作品介绍
1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。
2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
@TOC
一、作品展示
二、文件目录
三、代码实现
<!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=utf-8" />
<title>汉中印象</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="">
<div class="w" style="height:80px; margin-top:5px;">
<!--logo-->
<div style="float:left;">
<div class="logo"><img src="img/5.jpg" /></div>
<div class="lg"><img src="img/3.jpg" /></div>
</div>
<!--menu菜单-->
<div class="menu">
<ul>
<li><a href="index.html">*页</a></li>
<li><a href="hzms.html" target="_blank">汉中美食</a></li>
<li><a href="fjms.html" target="_blank">风景名胜</a></li>
<li><a href="lygl.html" target="_blank">旅游指南</a></li>
<li><a href="lsyz.html" target="_blank">历史遗址</a></li>
<li class="zh"><a href="lsrw.html" target="_blank">历史人物</a></li>
</ul>
</div>
</div>
<div class="top w"><img src="img/top.jpg" id="img" /></div>
<!--banaer图片-->
<div class="w">
<div class="hz">汉中简介</div>
<div class="lb"><img src="img/3.hz.JPG" /></div>
<div class="wz">
<span> 汉中市位于陕西省西南部，古称:南郑、梁州、天汉，是汉王朝的发祥地，长江第一大支流汉
江的源头，秦巴山片区三大中心城市之一，有<b style="color:#F00;">“汉家发祥地，中华聚宝盆”</b>的美誉。</span>
<span>
汉中北依秦岭，南屏巴山，中部是汉中盆地，自古就被称为“天府之国”和“鱼米之乡”，历
来都是兵家必争之地。因境内洋县生存有全国一级保护鸟类、“**珍禽”——朱鹮，故又被称为
“朱鹮之乡”。现辖汉台区、南郑县、城固县、洋县、勉县、西乡、宁强、略阳、镇巴、留坝、佛
坪1区10县。
</span>
<span>
汉中是国家历史文化名城、**优秀旅游城市、国家生态示范区建设试点地区、全国双拥模范
城、国家卫生城市。主产水稻、小麦、油菜等，有大熊猫、金丝猴、羚牛、朱鹮等珍稀动物，自然
环境与物产非常丰富。拥有长青国家级自然保护区、佛坪国家级自然保护区、宁强青木川国家级自
然保护区、米仓山国家级自然保护区、略阳大鲵国家级自然保护区、略阳珍稀水生动物国家级自然
保护区，有4个国家级森林公园，被公认为地球上同一纬度生态最好和最适宜人类居住的地区之一。
<b style="color:#F00;">汉中是南水北调中线水源地源头。</b></span>
</div>
</div> <!--汉中简介-->
<div class="w">
<div class="left">
<div class="bk">
<div class="left1"><font>风 景 名 胜</font></div>
<div class="left2">
<ul>
<li><a href="liping.html" target="_blank">黎 平 森 林 公 园</a></li>
<li style="border-bottom:#999 1px dashed;"></li>
<li><a href="fjtz.html" target="_blank">石 门 栈 道 风 景 区</a></li>
<li style="border-bottom:#999 1px dashed;"></li>
<li><a href="qmc.html" target="_blank">华 阳 古 镇 青 木 川</a></li>
<li style="border-bottom:#999 1px dashed;"></li>
<li><a href="tiantaishan.html" target="_blank">天 台 山 森 林 公 园</a></li>
<li style="border-bottom:#999 1px dashed;"></li>
<li><a href="zhuhuan.html" target="_blank">朱 鹮 自 然 保 护 区</a></li>
<li style="border-bottom:#999 1px dashed;"></li>
</ul>
</div>
</div>
<div class="bk1">
<div class="left1"><font>旅 游 指 南</font></div>
<div class="left2">
<ul>
<li><a href="lipingGL.html" target="_blank">黎 平 森 林 公 园</a></li>
<li style="border-bottom:#999 1px dashed;"></li>
<li><a href="lipingGL.html" target="_blank">石 门 栈 道 风 景 区</a></li>
<li style="border-bottom:#999 1px dashed;"></li>
<li><a href="lipingGL.html" target="_blank">华 阳 古 镇 青 木 川</a></li>
<li style="border-bottom:#999 1px dashed;"></li>
<li><a href="lipingGL.html" target="_blank">天 台 山 森 林 公 园</a></li>
<li style="border-bottom:#999 1px dashed;"></li>
<li><a href="lipingGL.html" target="_blank">朱 鹮 自 然 保 护 区</a></li>
<li style="border-bottom:#999 1px dashed;"></li>
</ul>
</div>
</div>
</div> <!--左边列表-->
<div class="con">
<div class="con1"><font>汉 中 美 食</font><a href="hzms.html" >更多 》</a></div>
<div class="con2">
<p>门水库的修建使褒斜道遗址被水淹没。石门栈道是在褒斜栈道原址上方抬高72米仿建而成，全长1.8km，浓缩了古栈道的七种形制，以及“邮、亭、驿”等古建筑。成为汉中旅游的一张精美名片。 目前，褒斜栈道（即石门栈道）位于石门栈道景区内，景区中湖光山色两相映，翠峰林立，景色宜人，早在清朝同治时期就被文人王晚香概括为“褒谷二十四景的修建使褒斜道遗址被水淹没。石门栈道是在褒斜栈道原址上方的修建使褒斜道遗址被水淹没。石门栈道是在褒斜栈道原址上方”而闻名于世。</p>
</div>
<div id="bgd">
<div class="vbgd" onmouseover="picstops()" onmouseout="picstart()">
<div class="tp" id="tp1">
<img src="img/sy.1.JPG"/>
<img src="img/sy.2.JPG"/>
<img src="img/sy.3.JPG"/>
<img src="img/sy.4.JPG" />
<img src="img/ms.JPG"/>
<img src="img/ms1.JPG"/>
<img src="img/ms2.JPG"/>
<img src="img/ms3.JPG" />
</div>
<div id="tp2"></div>
</div>
</div>
<div class="con3"><font>历 史 遗 址</font><a href="lsyz.html" >更多 》</a></div>
<div class="con4" id="gd">
<div class="vgd" onmouseover="stops()" onmouseout="start()">
<div id="gd1">
<div>
<img src="img/4.hz.JPG" width="246" height="200"/>
<p>武 侯 墓</p>
</div>
<div> <img src="img/yz.1.JPG" width="246" height="200"/>
<p>褒 河 栈 道</p>
</div>
<div>
<img src="img/yz3.JPG" width="246" height="200"/>
<p>武 侯 墓</p>
</div>
</div>
<div id="gd2"></div>
</div>
</div>
</div> <!--中间内容-->
<div class="right">
<div class="r1"><font>历 史 人 物</font><a href="lsrw.html" target="_blank">更多 》</a></div>
<div class="rbk">
<div class="r2">
<p>刘备（161年－223年6月10日）字玄德，东汉末年幽州涿郡涿县（今河北省涿州市）人，西汉中山靖王刘胜的后代，三国时期蜀汉开国皇帝、政治家、史家又称他为先主。</p>
</div>
<div class="r3"><img src="img/linbei.PNG" /></div>
</div>
<div class="rbk1">
<div class="r2">
<p>诸葛亮（181年－234年10月8日[1]），字孔明，号卧龙（也作伏龙），汉族，徐州琅琊阳都（今山东临沂市沂南县）人，三国时期蜀汉丞相，杰出的政治家、军事家、散文家、书法家、发明家</p>
</div>
<div class="r5"><img src="img/zgl.PNG"/></div>
</div>
</div> <!--右边内容-->
</div>
<div class="copy w">
<pre>
Copyright 2008-2010 Bluestation Net,All Rights Reserved 版本所有：汉中旅游
景点地址：陕 西 省 汉 中 市 全 境
陕ICP备09160023号 咨询电话：0916-4969720 技术支持：华育国际
</pre>
</div> <!--copy-->
</body>
<script>
var arr=new Array(img/top.jpg,img/top21.jpg,img/top22.jpg);
var i=0;//下标
var t=null;
function change(){
//清除计时器
window.clearTimeout(t);
//获取图片对象
var img=document.getElementById(img);
//改变图片路径
img.src=arr[i];
//下标的增加
i++;
//下标范围的控制
if(i>arr.length-1){
i=0;
}
//设置计数器
t=window.setTimeout(change(),2000);
}
change();
</script>
<script type="text/javascript">
var gd =document.getElementById(gd)
var gd1 = document.getElementById(gd1)
var gd2 = document.getElementById(gd2)
var time=null;
gd2.innerHTML=gd1.innerHTML;
function gundong () {
//alert(gd.scrollLeft)
if (gd.scrollLeft>gd1.offsetWidth) {
gd.scrollLeft-=gd1.offsetWidth
}else{
gd.scrollLeft+=2;
};
}
function start () {
// 清空定时器
window.clearInterval(time);
//定义定时器
time = window.setInterval(gundong(),30)
}
function stops () {
// 清空定时器
window.clearInterval(time);
}
start()
</script>
<script>
var bgd =document.getElementById("bgd")
var tp1=document.getElementById("tp1")
var tp2=document.getElementById("tp2")
tp2.innerHTML=tp1.innerHTML;
var tm=null;
function picgundong () {
//alert(gd.scrollLeft)
if (bgd.scrollLeft>tp1.offsetWidth) {
bgd.scrollLeft-=tp1.offsetWidth
}else{
bgd.scrollLeft+=5;
};
}
function picstart () {
// 清空定时器
window.clearInterval(tm);
//定义定时器
tm = window.setInterval(picgundong(),60)
}
function picstops () {
// 清空定时器
window.clearInterval(tm);
}
picstart ()
</script>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他* 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
免责声明：本站所有内容及图片均采集来源于网络，并无商业使用，如若侵权请联系删除。
资讯 观察行业视觉，用专业的角度，讲出你们的心声。
2024-07-05
搭建一个app平台要多少钱？费用都在哪些地方
搭建一个app平台要多少钱 搭建一个app平台的费用取决于多个因素，包括应用的复杂性、功能需求、设计要求、···
Load More 2024-05-22
建设官网能给公司带来什么？建设公司官网应该考虑什么
建设官网能给公司带来什么 在当今数字化时代，建设一个优质的公司官网对于企业来说至关重要。它不仅是公司···
Load More 2024-05-22
公司官网的建设有什么建议？公司官网建设的步骤是什么
公司官网的建设有什么建议 随着互联网的迅速发展，公司官网已经成为品牌宣传和业务拓展的重要工具。一个令···
Load More 2024-05-22
公司官网建设注意什么事项？建设官网对公司有什么好处
公司官网建设注意什么事项 在建设公司官网时，有几个关键事项要注意，以确保网站能够吸引用户并提供良好的···
Load More 2024-05-08
建设公司官网需要什么条件？建设公司官网需要考虑哪些
建设公司官网需要什么条件 在现代社会，公司官网已成为企业展示形象和吸引客户的重要工具。要建设一个成功···
Load More 