HTML5期末大作业：旅游网站设计——开心旅游网(15页 ...

紫翩逝舞 · 发表于 2023-1-8 14:28:59

HTML5期末大作业：旅游网站设计——开心旅游网(15页) HTML+CSS+JavaScript 主题度假酒店

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

获取更多源码

PC电脑端关注我们
作者主页-更多源码
HTML期末大作业文章专栏
作品介绍

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 &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;>
<html xmlns=&#34;http://www.w3.org/1999/xhtml&#34; style=&#34;overflow: auto; overflow-x:hidden;&#34;>
  <head>
  <title>开心旅游网</title>
  <meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html;charset=UTF-8&#34; />
  <link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;css/screen.css&#34; />
  <script src=&#34;js/jquery.min.js&#34;></script>
  <script src=&#34;js/jquery.flexslider-min.js&#34;></script>
  <script type=&#34;text/javascript&#34;>
      $(window).load(function() {
         $(&#39;.flexslider&#39;).flexslider();
      });
  </script>
  <link rel=&#34;stylesheet&#34; href=&#34;css/lrtk.css&#34; type=&#34;text/css&#34; media=&#34;screen&#34; />
  </head>
  <body>
<div class=&#34;wrapper&#34;>
<div class=&#34;top&#34;>
<div class=&#34;top_link&#34;><a href=&#34;#&#34;>设为首页</a> | <a href=&#34;#&#34; class=&#34;link2&#34;>加入收藏</a></div>
  </div>

<div class=&#34;nav&#34;>
<ul>
      <li><a href=&#34;index.html&#34;>网站首页</a></li>
      <li><a href=&#34;lvyouwh.html&#34;>南京旅游</a></li>
      <li><a href=&#34;njms.html&#34;>南京美食</a></li>
      <li><a href=&#34;jingdian.html&#34;>苏州旅游</a></li>
      <li><a href=&#34;meishi.html&#34;>苏州美食</a></li>
      <li><a href=&#34;fengjing.html&#34;>昆明旅游</a></li>
      <li><a href=&#34;kmms.html&#34;>昆明美食</a></li>
   </ul>
  </div>

<div id=&#34;banner&#34;>
<div class=&#34;flexslider&#34;>
      <ul class=&#34;slides&#34;>
      <li><a href=&#34;#&#34; > <img src=&#34;image/ad1.jpg&#34;  width=&#34;1010&#34; /></a> </li>
      <li><a href=&#34;#&#34; > <img src=&#34;image/ad2.jpg&#34;  width=&#34;1010&#34; /></a> </li>
      <li><a href=&#34;#&#34; > <img src=&#34;image/ad3.jpg&#34;  width=&#34;1010&#34; /></a> </li>
      <li><a href=&#34;#&#34; > <img src=&#34;image/ad4.jpg&#34;  width=&#34;1010&#34; /></a> </li>
      <li><a href=&#34;#&#34; > <img src=&#34;image/ad5.jpg&#34;  width=&#34;1010&#34; /></a> </li>
      <li><a href=&#34;#&#34; > <img src=&#34;image/ad6.jpg&#34;  width=&#34;1010&#34; /></a> </li>
   </ul>
   </div>
  </div>

<div class=&#34;content&#34;>
<div class=&#34;sidebar&#34;>
      <div class=&#34;pro_box&#34;>
      <div class=&#34;jj_cp2&#34;>
         <h3>旅游景点</h3>
      </div>
      <ul class=&#34;pro_list&#34;>
         <li><a href=&#34;jingdian_1.html&#34;>金鸡湖</a></li>
         <li><a href=&#34;jingdian_2.html&#34;>拙政园</a></li>
         <li><a href=&#34;jingdian_3.html&#34;>周庄</a></li>
         <li><a href=&#34;jingdian_4.html&#34;>同里古镇</a></li>
      </ul>
   </div>
      

      <div class=&#34;pro_box&#34;>
      <div class=&#34;jj_cp2&#34;>
         <h3>特色美食</h3>
      </div>
      <ul class=&#34;pro_list&#34;>
         <li><a href=&#34;meishi_1.html&#34;>太湖梅鲚</a></li>
         <li><a href=&#34;meishi_2.html&#34;>太湖白虾</a></li>
         <li><a href=&#34;meishi_3.html&#34;>采芝斋糖果</a></li>
         <li><a href=&#34;meishi_4.html&#34;>松鼠桂鱼</a></li>
      </ul>
   </div>
      
   </div>

<div class=&#34;main_con&#34;>
      <div class=&#34;chanp_box&#34;>
      <div class=&#34;jj_cp&#34;>
         <h3>旅游景点</h3>
      </div>
      <div class=&#34;show_box&#34;>
         <div class=&#34;show_panel&#34;>
         <ul id=&#34;show_list&#34;>
            <li> <a href=&#34;#&#34;><img alt=&#34;&#34; src=&#34;image/j1.jpg&#34; width=&#34;164&#34; height=&#34;168&#34; /><span>景点展示</span></a> <a href=&#34;#&#34;><img alt=&#34;&#34; src=&#34;image/j2.jpg&#34; width=&#34;164&#34; height=&#34;168&#34; /><span>景点展示</span></a> <a href=&#34;#&#34;><img alt=&#34;&#34; src=&#34;image/j3.jpg&#34; width=&#34;164&#34; height=&#34;168&#34; /><span>景点展示</span></a> <a href=&#34;#&#34;><img alt=&#34;&#34; src=&#34;image/j4.jpg&#34; width=&#34;164&#34; height=&#34;168&#34; /><span>景点展示</span></a> </li>
            </ul>
      </div>
      </div>
      
   </div>
      
      <div class=&#34;chanp_box&#34;>
      <div class=&#34;jj_cp&#34;>
         <h3>特色美食</h3>
</div>
      <div class=&#34;show_box&#34;>
         <div class=&#34;show_panel&#34;>
         <ul id=&#34;show_list&#34;>
            <li> <a href=&#34;#&#34;><img alt=&#34;&#34; src=&#34;image/m1.jpg&#34; width=&#34;164&#34; height=&#34;168&#34; /><span>特色美食</span></a> <a href=&#34;#&#34;><img alt=&#34;&#34; src=&#34;image/m2.jpg&#34; width=&#34;164&#34; height=&#34;168&#34; /><span>特色美食</span></a> <a href=&#34;#&#34;><img alt=&#34;&#34; src=&#34;image/m3.jpg&#34; width=&#34;164&#34; height=&#34;168&#34; /><span>特色美食</span></a> <a href=&#34;#&#34;><img alt=&#34;&#34; src=&#34;image/m5.jpg&#34; width=&#34;164&#34; height=&#34;168&#34; /><span>特色美食</span></a> </li>
            </ul>
      </div>
      </div>
      
   </div>
      
      <div class=&#34;jj_box&#34;>
      <div class=&#34;jj_cp&#34;>
         <h3>开心旅游网南概况</h3>

      </div>
      <div class=&#34;jj_cloumn&#34;> <a href=&#34;#&#34;><img alt=&#34;&#34; src=&#34;image/1.jpg&#34; width=&#34;237&#34; height=&#34;166&#34;/></a>
         <div class=&#34;jj_txt&#34;>
         <p>开心旅游网主要介绍南京，苏州河昆明的旅游景点和特色美食。带您领略旅游的无限开心一刻。</p>
         <p>苏州，古称吴，简称苏，又称姑苏、平江等，中国华东地区特大城市之一，位于江苏省东南部、长江以南、太湖东岸、长江三角洲中部，是江苏省省辖市。</p>
         <p>苏州历史悠久，是国家首批24个历史文化名城之一。苏州有文字记载的历史已逾四千年，是吴文化的发祥地和集大成者，历史上长期是江南地区的政治经济文化中心，苏州是天下四聚之一，苏州城始建于公元前514年，历史学家顾颉刚先生经过考证，认为苏州城为中国现存最古老的城市。</p>
         <p>南京文化古迹遍布，从中可以探寻历史的源头：中山陵依山而建，结构严整，观之而生一股浩然之气；夫子庙建筑群古色古香，漫步其间，让你体味明清时代的市井繁荣；中华门气势宏伟，设计巧妙，置身城内，壁垒森然，耳边似有战马嘶鸣；此外还有灵谷寺、石象路、三国东吴所筑石头城遗址、明代朱元璋的陵墓（明孝陵）以及革命纪念地雨花台等，引人遐思无限。</p>
         <p>昆明，别称&#34;春城&#34;，是云南省会，云南省唯一的特大城市和西南地区第三大城市（仅次于成都、重庆），是云南省政治、经济、文化、科技、交通中心，西部地区重要的中心城市和旅游、商贸城市，亦是中国面向东南亚、南亚、东盟开放的重要枢纽城市。</p>
      </div>
         
      </div>
      
   </div>
      
   </div>

  </div>

  </div>

<div class=&#34;foot&#34;>
<div class=&#34;copyright&#34;>
<p>版权所有&copy;开心旅游网</p>
<p><a href=&#34;http://mail.qq.com/&#34;>联系我们</a><a href=&#34;http://www.baidu.com/&#34; target=&#34;_blank&#34;> 友情链接</a></p>
  </div>

  </div>

</body>
</html>
<hr/>
四、获取更多源码

作者主页-更多源码
HTML期末大作业文章专栏
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号获取更多源码 !
五、学习资料

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

<hr/>
六、更多源码

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

		自动登录	找回密码
密码			立即注册