HTML5期末大作业:关于旅游网站设计——汉中印象景点 HTML+CSS+JavaScript

HTML5期末大作业:关于旅游网站设计——汉中印象景点介绍HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 大学生网页设计制作成

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 :HTML期末大学生网页设计作业 ,喜欢的可以下载,文章页支持手机PC响应式布局。总共 19 个页面html下载。

2.网页作品编辑方面:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)

3.网页作品布局方面:网页布局整体为LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单,同时简单使用JavaScript制作了表单判断(提交时表单不能为空)

一、作品演示

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现


<!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>

</html>



四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

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


五、源码获取

❉ ~ 关注我,点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

❉3.以上内容技术相关问题可以相互学习,可wx公Z号 ---> web前端小日记 获取更多源码 !

在这里插入图片描述

六、更多HTML期末大作业(成品下载)

>>>戳我>>>点击进入200例期末大作业作品

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

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@码出未来-web网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值