HTML5期末大作业：旅游网页设计与实现——旅游风景区 ...

短发二三年 · 发表于 2022-12-4 16:56:44

> ⛵ 源码获取文末联系 ✈

Web前端开发技术 描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制作 | HTML期末大学生网页设计作业，Web大学生网页

HTML：结构
CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

@TOC
<hr/>前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；（2）css文件：css全部页面样式,文字滚动, 图片放大等；（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）
网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　 (2)二级页面：从首页点击进入之后的页面叫做二级页面 (3)三级页面：从二级页面点击进入的页面
网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的 首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名 导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用. 网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
<hr/>网页演示

在这里插入图片描述

在这里插入图片描述

HTML结构代码

<!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;>
<head>
<meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34;>
<title>丰都县名山风景旅游区</title>
<link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;css/public.css&#34;>
<link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;css/famousMountain.css&#34;>
</head>
<body>
<p><a href=&#34;javascript:;&#34;>返回上一层</a></p>

<header>
<img class=&#34;logo f_left&#34; src=&#34;picture/logo.png&#34;>
<div class=&#34;company_name f_left&#34;>
      <h3><a href=&#34;&#34;>丰都县名山风景旅游区</a></h3>
</div>
<p class=&#34;welcome f_right&#34;><a href=&#34;&#34;>登录</a><a>|</a><a href=&#34;&#34;>注册</a></p>
</header>



<nav id=&#34;nav&#34; class=&#34;nav&#34;>
<div class=&#34;section nav_section&#34;>
      <ul class=&#34;nav_ul f_left&#34; id=&#34;navUl&#34;>
         <li id=&#34;nav1&#34; value=&#34;1&#34;><a href=&#34;scheduleContent.html&#34;>首页</a>
         </li>
         <li id=&#34;nav2&#34; value=&#34;2&#34;><a href=&#34;&#34;>景点介绍</a></li>
         <li id=&#34;nav3&#34; value=&#34;3&#34;><a href=&#34;&#34;>名山风景</a>
            <ul class=&#34;submenu&#34;>
                  <li><a href=&#34;#&#34;>图片风景</a></li>
                  <li><a href=&#34;#&#34;>视频风景</a></li>
            </ul>
         </li>
         <li id=&#34;nav4&#34; value=&#34;4&#34;><a href=&#34;&#34;>名山资讯</a></li>
         <li id=&#34;nav5&#34; value=&#34;5&#34;><a href=&#34;&#34;>名山指南</a></li>
         <li id=&#34;nav6&#34; value=&#34;6&#34;><a href=&#34;&#34;>名山风味</a>
            <ul class=&#34;submenu&#34;>
                  <li><a href=&#34;#&#34;>热销美食</a></li>
                  <li><a href=&#34;#&#34;>上新美食</a></li>
            </ul>
         </li>
         <li id=&#34;nav7&#34; value=&#34;7&#34;><a href=&#34;scheduleContent.html&#34;>在线预定</a>
            <ul class=&#34;submenu&#34;>
                  <li><a href=&#34;scheduleContent.html&#34;>在线预定</a></li>
                  <li><a href=&#34;#&#34;>私人预定</a></li>
            </ul>
         </li>
      </ul>
      <div class=&#34;search f_right&#34;>
         <input type=&#34;text&#34;>
         <a href=&#34;&#34;><div class=&#34;search_bt f_right&#34;></div></a>
      </div>
</div>
</nav>



<div class=&#34;fullSlide&#34;>
<div class=&#34;bd&#34;>
      <ul>
         <li _src=&#34;url(picture/banner_1.jpg)&#34;><a href=&#34;#&#34;></a></li>
         <li _src=&#34;url(picture/banner_2.jpg)&#34;><a href=&#34;#&#34;></a></li>
         <li _src=&#34;url(picture/banner_3.jpg)&#34;><a href=&#34;#&#34;></a></li>
      </ul>
</div>
<div class=&#34;hd&#34;><ul></ul></div>
<span class=&#34;prev&#34;></span>
<span class=&#34;next&#34;></span>
</div>




<main>

<div class=&#34;introduce&#34;>
      <div class=&#34;introduce_box&#34;>
         <div class=&#34;introduce_box_title f_left&#34;></div>
         
         <video width=&#34;600&#34; height=&#34;382&#34; controls=&#34;&#34; poster=&#34;picture/introduce_pic1.png&#34;>
            <source src=&#34;file/ms.mp4&#34; type=&#34;video/mp4&#34;>
         </video>
         <div class=&#34;introduce_box_right f_right&#34;>
            <div></div>
            <h4><a href=&#34;#&#34;>丰都县名山风景旅游区</a></h4>
            <p>丰都名山景区内鬼城仿阳间司法体系，营造了一个等级森严，融逮捕、羁押、
庭审、判决、教化功能为一体的“阴曹地府”，以惩治生前作奸犯科者，遂
使海内外善男信女们进山朝拜，或祈求神灵庇佑，或自我反省忏悔。虽阎王
判官小鬼之传说虚妄，但其惩恶扬善的社会教化功用又为人们所称道。</p>
            <a class=&#34;look f_right&#34;>查看详情</a>
         </div>
      </div>
</div>



<div class=&#34;scenery&#34;>
<div class=&#34;scenery_box&#34;>
      <div class=&#34;scenery_box_title f_left&#34;></div>
      <div class=&#34;scenery_box_lfet f_left&#34; id=&#34;pic&#34;>
         <div class=&#34;hover_bg2&#34;></div>
         <a href=&#34;&#34;>望<br>乡<br>台</a>
      </div>
      <div class=&#34;scenery_box_right f_right&#34;>
         <ul class=&#34;pic&#34;>
            <li class=&#34;pic_1&#34; id=&#34;pic&#34;><div class=&#34;hover_bg1&#34;></div><a href=&#34;&#34;>天子殿</a></li>
            <li class=&#34;pic_2&#34; id=&#34;pic&#34;><div class=&#34;hover_bg1&#34;></div><a href=&#34;&#34;>奈何桥</a></li>
            <li class=&#34;pic_3&#34; id=&#34;pic&#34;><div class=&#34;hover_bg1&#34;></div><a href=&#34;&#34;>鬼门关</a></li>
            <li class=&#34;pic_4&#34; id=&#34;pic&#34;><div class=&#34;hover_bg1&#34;></div><a href=&#34;&#34;>玉楼阁</a></li>
         </ul>
      </div>
      <div class=&#34;scenery_box_look f_left&#34;><a href=&#34;#&#34;>查看更多</a></div>
</div>
</div>



<div class=&#34;news&#34;>
<div class=&#34;news_box&#34;>
      <div class=&#34;news_box_title f_left&#34;></div>
      <div class=&#34;news_box_lfet f_left&#34;></div>
      <div class=&#34;news_box_right f_right&#34;>
         <ul>
            <li class=&#34;num_1&#34;><a href=&#34;&#34;>庙会期间名山景前广场搭建祭坛，开启道家传统祭祀、祭祖仪式，传播弘扬以孝善为核心的传统美德。</a></li>
            <li class=&#34;num_2&#34;><a href=&#34;&#34;>祭祖大典过后便是敬香有来自全国各地浙江、山东、贵州、重庆...敬香团参与到其中祈求来年顺顺利利。</a></li>
            <li class=&#34;num_3&#34;><a href=&#34;&#34;>在节假日来过名山的小伙伴都会对周边游荡的鬼怪，有着极其深刻的印象，黑白无常的高跷组合，酒...</a></li>
            <li class=&#34;num_4&#34;><a href=&#34;&#34;>去年庙会，夜游鬼城一经开启，直接就成为了的年度爆款，而现在夜游鬼城也已经年满周岁，今年它...</a></li>
         </ul>
      </div>
      <div class=&#34;news_box_look f_left&#34;><a href=&#34;#&#34;>查看更多</a></div>
</div>
</div>




<div class=&#34;guide&#34;>
<div class=&#34;guide_box&#34;>
      <div class=&#34;guide_box_title f_left&#34;></div>
      <div class=&#34;guide_box_up f_left&#34;>
         <div class=&#34;guide_box_up_left f_left&#34;>
            <div class=&#34;left_color_bg&#34;>
                  <div class=&#34;f_left&#34;></div>
                  <h4><a href=&#34;#&#34;>动车</a></h4>
            </div>
            <p>全程约1小时30分钟</p>
            <div class=&#34;left_path f_left&#34;>
                  <div class=&#34; f_left&#34;></div>
                  <ul class=&#34; f_left&#34;>
                     <li class=&#34;left_path_one&#34;>重庆北站北广场</li>
                     <li class=&#34;left_path_two&#34;><p>丰都火车站</p>乘坐201、202、203路公交车</li>
                     <li class=&#34;left_path_two&#34;><p>新县城</p>乘坐109路公交车</li>
                     <li class=&#34;left_path_there&#34;>名山风景旅游区</li>
                  </ul>
            </div>

         </div>
         <div class=&#34;guide_box_up_right f_right&#34;>
            <div class=&#34;right_color_bg&#34;>
                  <div class=&#34;f_left&#34;></div>
                  <h4><a href=&#34;#&#34;>客车</a></h4>
            </div>
            <p>全程约2小时</p>
            <div class=&#34;right_path f_left&#34;>
                  <div class=&#34; f_left&#34;></div>
                  <ul class=&#34; f_left&#34;>
                     <li class=&#34;right_path_one&#34;>重庆四公里交通枢纽</li>
                     <li class=&#34;right_path_two&#34;><p>丰都新县城</p>乘坐109路公交车</li>
                     <li class=&#34;right_path_there&#34;>名山风景旅游区</li>
                  </ul>
            </div>
         </div>
      </div>
      <div class=&#34;guide_box_down f_left&#34;>
         <div class=&#34;fire f_left&#34;>
            <div class=&#34;fire_color_bg&#34;>
                  <h4><a href=&#34;#&#34;>热门景点</a></h4>
            </div>

            <div class=&#34;hdjl_box_news f_left&#34;>
                  <ul class=&#34;hdjl_box_news f_left&#34;>
                     <li><span><a href=&#34;&#34;>鬼国神宫</a></span></li>
                     <li><span><a href=&#34;&#34;>寥阳殿</a></span></li>
                  </ul>
                  <ul class=&#34;hdjl_box_news f_left&#34;>
                     <li><span><a href=&#34;&#34;>奈何桥</a></span></li>
                     <li><span><a href=&#34;&#34;>五玉山玉皇圣地</a></span></li>
                  </ul>
                  <ul class=&#34;hdjl_box_news f_left&#34;>
                     <li><span><a href=&#34;&#34;>“阴曹地府”雕像群</a></span></li>
                     <li><span><a href=&#34;&#34;>望乡台</a></span></li>
                  </ul>
                  <ul class=&#34;hdjl_box_news f_left&#34;>
                     <li><span><a href=&#34;&#34;>百子殿</a></span></li>
                     <li><span><a href=&#34;&#34;>天子殿</a></span></li>
                  </ul>
                  <ul class=&#34;hdjl_box_news f_left&#34;>
                     <li><span><a href=&#34;&#34;>鬼门关</a></span></li>
                     <li><span><a href=&#34;&#34;>二仙楼</a></span></li>
                  </ul>
                  <ul class=&#34;hdjl_box_news f_left&#34;>
                     <li><span><a href=&#34;&#34;>黄泉路</a></span></li>
                     <li><span><a href=&#34;&#34;>无常殿</a></span></li>
                  </ul>
            </div>
         </div>
         <div class=&#34;map f_right&#34;></div>

      </div>
</div>
</div>




<div class=&#34;schedule&#34;>
<div class=&#34;schedule_box&#34;>
      <div class=&#34;schedule_box_title f_left&#34;></div>
      <div class=&#34;schedule_box_left f_left&#34;>
         <div></div>
         <a href=&#34;scheduleContent.html&#34;>在线预定</a>
         <p>跟团游\自由行</p>
      </div>
      <div class=&#34;schedule_box_right f_right&#34;>
         <div></div>
         <a>私人预定</a>
         <p>专属于你的私人旅行</p>
      </div>
</div>
</div>

</main>



<footer>
<p>Copyright© 2020 Fengdu famous mountains scenery tourist area 丰都县名山风景旅游区  渝ICP备09094XXX号</p>
</footer>

<script type=&#34;text/javascript&#34; src=&#34;js/jquery.js&#34;></script>
<script type=&#34;text/javascript&#34; src=&#34;js/superslide.2.1.js&#34;></script>
<script type=&#34;text/javascript&#34; src=&#34;js/famousMountain.js&#34;></script>
</body>
</html><hr/>学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光 —————————————————
<hr/>学习更多

关注我 | 点赞博文 | 每天带你涨知识
<hr/>

在这里插入图片描述

巍涛 · 发表于前天 04:32

学习下

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