HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码-CFANZ编程社区

HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码

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

作品介绍

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

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

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

文章目录

HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
作品介绍
一、作品展示
二、文件目录
三、代码实现
四、学习资料
五、完整源码
六、更多源码

一、作品展示

HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码_javascript

HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码_旅游网页html_02

HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码_旅游网页html_03

HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码_javascript_04

HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码_html_05

HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码_html_06

二、文件目录

HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码_html5_07

三、代码实现

<!DOCTYPE HTML>
<html>
<head>
<title>旅游景点|境内旅游-旅游景点旅行社网站</title>
<meta name="renderer" content="webkit">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="applicable-device" content="pc,mobile">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="description" content="" />
<meta name="keywords" content="旅游景点|境内旅游" />
<link rel='stylesheet' href='./static/css/style.css'>
</head>
<body>

<div class="load-box"></div>
<header>
  <div class="head-box">
    <div class="width-box">
      <div class="logo-box">
        <a href="" title="旅游景点旅行社网站">

      <img src="./static/image/1506052119.png" alt="旅游景点旅行社网站">

          <h2>旅游</h2>

          <h4>400 000 0000</h4>

        </a>
      </div> 

<div class="login-box">
  <a href="login.html">登录</a>
  <a href="register.html">注册</a>
</div>

    </div>
  </div>
</header>
<nav>
  <div class="nav-box">
    <div class="width-box">
      <div class="nav-cut">
        <ul class="nav-ul">

          <li class="nav-li "><a href="index.html" title="旅游景点旅行社网站">首页</a></li>

          <li class="nav-li active navs margin-left-"><a href="you.html" title="跟团游" >跟团游</a></li>

          <li class="nav-li  navs margin-left-"><a href="you.html" title="自助游" >自助游</a></li>

          <li class="nav-li  navs margin-left-"><a href="you.html" title="自驾游" >自驾游</a></li>

          <li class="nav-li  navs margin-left-"><a href="you.html" title="酒店" >酒店</a></li>

          <li class="nav-li   margin-left-"><a href="you.html" title="景点" >景点</a></li>

          <li class="nav-li   margin-left-"><a href="gonglue.html" title="攻略" >攻略</a></li>

          <li class="nav-li   margin-left-"><a href="gonglue.html" title="交通" >交通</a></li>

        </ul>
      </div>

      <div class="search-cut">
        <div class="search-button"></div>
        <div class="search-box">

          <form method="get" action="gonglue.html">
        <input type="hidden" name="lang" value="cn">

      <input type="hidden" name="class1" value="10001">

            <input type="text" placeholder="请输入搜索关键词！" name="searchword" value="">
            <button type="submit"></button>
          </form>

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

<section>
  <div class="width-box">
  <div class="banner-box transform-box">
    <div class="met-banner banner-ny-h" data-height='' style=''>

    <div class="slick-slide">

      <img class="cover-image" data-size="1170_100" src="./static/image/1506069811.jpg" srcset='' sizes="(max-width: 767px) 767px" alt="">

        </div>  

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

<section class="main">
  <div class="width-box">

  <div class="main-left ">
      <div class="card-list">
      <div class="met-page-ajax" data-scale='0.5'>

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="shownews.php?lang=cn&id=54" title="2017海南三亚旅游攻略实用版" target='_self'><h3>2017海南三亚旅游攻略实用版</h3></a>
      <img class="card-image lazyloadx" data-original='./static/image/1506334085.jpg'>
            <p> 人的一生中至少要有两次冲动，一次为奋不顾身的爱情，一次为说走就走的旅行。旅行，一直是我的最爱，所以，我愿意“冒险”一次，约上闺蜜一起开始一段旅行。     这个春季，我选择三亚。（什么季节去海南最好呢，有人担心夏天会不会太热，其实夏天在海边凉风习习，水温正适合体质较弱的人群）。     ..</p>
          </div>
          <div class="card-operation">
            <div class="card-author">
              <img class="lazyloadx" data-original="./static/image/user.jpg">
              <font>admin</font>
            </div>
            <div class="card-time">发布于 2017-09-26</div>
            <div class="card-geek">
              <font class="eye">376</font>
              <font class="share">&nbsp;
          <span>
           <a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=2017海南三亚旅游攻略实用版&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pic=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506334085.jpg"></a>
           <a class="weixin" data-href="http://show.metinfo.cn/muban/M1156012/359/strategy/shownews.php?lang=cn&id=54"></a>
           <a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=2017海南三亚旅游攻略实用版&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pics=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506334085.jpg"></a>
        </span>
        </font>
            </div>
          </div>
        </div>

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="shownews.php?lang=cn&id=57" title="与海浪共舞，享垂钓乐趣！一起去三亚海钓！" target='_self'><h3>与海浪共舞，享垂钓乐趣！一起去三亚海钓！</h3></a>
      <img class="card-image lazyloadx" data-original='./static/image/1506335872.jpg'>
            <p>作为中国最南部的一座滨海城市，三亚拥有得天独厚的旅游资源：阳光、沙滩、海风、椰林、新鲜空气……而这一切仿佛都在诉说着：到三亚不去海钓是一种遗憾。海钓在欧美发达国家已经有了上百年的历史，是一种既刺激有充满着无限乐趣的休闲玩乐方式，海钓爱好者们若是到了三亚，可以去哪些地方进行海钓活动呢?以下这..</p>
          </div>
          <div class="card-operation">
            <div class="card-author">
              <img class="lazyloadx" data-original="./static/image/user.jpg">
              <font>admin</font>
            </div>
            <div class="card-time">发布于 2017-09-25</div>
            <div class="card-geek">
              <font class="eye">46</font>
              <font class="share">&nbsp;
          <span>
           <a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=与海浪共舞，享垂钓乐趣！一起去三亚海钓！&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D57&pic=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335872.jpg"></a>
           <a class="weixin" data-href="http://show.metinfo.cn/muban/M1156012/359/strategy/shownews.php?lang=cn&id=57"></a>
           <a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=与海浪共舞，享垂钓乐趣！一起去三亚海钓！&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D57&pics=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335872.jpg"></a>
        </span>
        </font>
            </div>
          </div>
        </div>

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="shownews.php?lang=cn&id=56" title="海南旅游自由行攻略" target='_self'><h3>海南旅游自由行攻略</h3></a>
      <img class="card-image lazyloadx" data-original='./static/image/1506335186.jpg'>
            <p>一、出发前的准备&nbsp; 到了三亚肯定是要下海的，泳衣、游泳眼镜、耳塞都要准备好。替换衣物、太阳伞、太阳帽、太阳眼镜、沙滩拖鞋也要带上。三亚的阳光狠，所以就得使用护肤品。防晒霜是必须配备的，晒后镇定修护露、保湿喷雾、白面膜等都可以带上。洗发液、护发素也是必备的。海水很伤头发的，酒店提供..</p>
          </div>
          <div class="card-operation">
            <div class="card-author">
              <img class="lazyloadx" data-original="./static/image/user.jpg">
              <font>admin</font>
            </div>
            <div class="card-time">发布于 2017-09-25</div>
            <div class="card-geek">
              <font class="eye">28</font>
              <font class="share">&nbsp;
          <span>
           <a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=海南旅游自由行攻略&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D56&pic=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335186.jpg"></a>
           <a class="weixin" data-href="http://show.metinfo.cn/muban/M1156012/359/strategy/shownews.php?lang=cn&id=56"></a>
           <a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=海南旅游自由行攻略&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D56&pics=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335186.jpg"></a>
        </span>
        </font>
            </div>
          </div>
        </div>

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="shownews.php?lang=cn&id=55" title="海南三亚旅游攻略实用版－五天四晚游" target='_self'><h3>海南三亚旅游攻略实用版－五天四晚游</h3></a>
      <img class="card-image lazyloadx" data-original='./static/image/1506335126.jpg'>
            <p>7.27 厦门——三亚 20:55~23:05 首都航空 JD5736 白天可以上班不请假交通花费：520*2=1040RMB住宿花费：330RMB，住凤凰机场酒店，候机楼斜对面30 m。7.28 南山寺and大小洞天交通花费：8路到国光豪生酒店4 RMB；过马路转25/57路到南山寺10..</p>
          </div>
          <div class="card-operation">
            <div class="card-author">
              <img class="lazyloadx" data-original="./static/image/user.jpg">
              <font>admin</font>
            </div>
            <div class="card-time">发布于 2017-09-25</div>
            <div class="card-geek">
              <font class="eye">26</font>
              <font class="share">&nbsp;
          <span>
           <a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=海南三亚旅游攻略实用版－五天四晚游&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D55&pic=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335126.jpg"></a>
           <a class="weixin" data-href="http://show.metinfo.cn/muban/M1156012/359/strategy/shownews.php?lang=cn&id=55"></a>
           <a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=海南三亚旅游攻略实用版－五天四晚游&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D55&pics=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335126.jpg"></a>
        </span>
        </font>
            </div>
          </div>
        </div>

        </div>

    <div class="hidden-xs">
      <div class="card-page" data-pages=1>
      <p>

      <a ><</a>

      <a class="active" >1</a>

      <a >></a>

    </p>
      </div>
  </div>
<div class="met-page-ajax-body visible-xs-block invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
  <button type="button" class="btn btn-default btn-block btn-squared ladda-button" id="met-page-btn" data-style="slide-left" data-url="/muban/M1156012/359/strategy/?lang=cn&class1=108&class2=0&class3=0&mbpagelist=1" data-page="1"><i class="icon wb-chevron-down margin-right-5" aria-hidden="true"></i>加载更多</button>
</div>

      </div>
    </div>
    <div class="main-right">

      <div class="card-tags">
        <h4>热搜标签</h4>
        <ul>

          <li><a href="../search/?lang=cn&searchword=亚龙湾热带森林公园" title="亚龙湾热带森林公园">亚龙湾热带森林公园</a></li>

          <li><a href="../search/?lang=cn&searchword=西沙群岛" title="西沙群岛">西沙群岛</a></li>

          <li><a href="../search/?lang=cn&searchword=蜈支洲岛" title="蜈支洲岛">蜈支洲岛</a></li>

          <li><a href="../search/?lang=cn&searchword=三天两夜" title="三天两夜">三天两夜</a></li>

          <li><a href="../search/?lang=cn&searchword=西沙群岛" title="西沙群岛">西沙群岛</a></li>

          <li><a href="../search/?lang=cn&searchword=西岛" title="西岛">西岛</a></li>

        </ul>
      </div>

      <div class="card-active">
        <h4>自助游攻略</h4>
        <ul>

          <li>
            <a href="../zizhu/showproduct.php?lang=cn&id=55" title="海南-三亚三天三夜自助游">
              <img class="lazyloads" data-original='./static/image/1506311787.jpg' alt="海南-三亚三天三夜自助游">
              <span>海南-三亚三天三夜自助游</span>
            </a>
          </li>

          <li>
            <a href="../zizhu/showproduct.php?lang=cn&id=79" title="三亚一地5天4晚“岛人行岛”豪华游">
              <img class="lazyloads" data-original='./static/image/1506321153.jpg' alt="三亚一地5天4晚“岛人行岛”豪华游">
              <span>三亚一地5天4晚“岛人行岛”豪华游</span>
            </a>
          </li>

          <li>
            <a href="../zizhu/showproduct.php?lang=cn&id=57" title="三亚到西沙群岛4天3晚自助游">
              <img class="lazyloads" data-original='./static/image/1506320253.jpg' alt="三亚到西沙群岛4天3晚自助游">
              <span>三亚到西沙群岛4天3晚自助游</span>
            </a>
          </li>

        </ul>
      </div>

      <div class="card-hots">
        <h4>为您推荐</h4>
        <ul>

      <li><a href="../strategy/shownews.php?lang=cn&id=54" title="2017海南三亚旅游攻略实用版" target='_self'>2017海南三亚旅游攻略实用版</a></li>

      <li><a href="../strategy/shownews.php?lang=cn&id=57" title="与海浪共舞，享垂钓乐趣！一起去三亚海钓！" target='_self'>与海浪共舞，享垂钓乐趣！一起去三亚海钓！</a></li>

      <li><a href="../strategy/shownews.php?lang=cn&id=56" title="海南旅游自由行攻略" target='_self'>海南旅游自由行攻略</a></li>

      <li><a href="../strategy/shownews.php?lang=cn&id=55" title="海南三亚旅游攻略实用版－五天四晚游" target='_self'>海南三亚旅游攻略实用版－五天四晚游</a></li>

    </ul>
      </div>

    </div>

  </div>
</section>
<footer>
  <div class="foot-box">
    <div class="width-box">
      <div class="foot-left">

<div class="met-links">
  <ol class="breadcrumb">
    <li>友情链接 :</li>

    <li>
      <a href="http://www.baidu.com/" title="" target="_blank">

        去哪儿网

      </a>
    </li>

    <li>
      <a href="http://www.baidu.com/" title="" target="_blank">

        旅游网

      </a>
    </li>

    <li>
      <a href="http://www.baidu.com/" title="" target="_blank">

        海南旅游网

      </a>
    </li>

    <li>
      <a href="http://www.baidu.com/" title="" target="_blank">

        三亚旅游

      </a>
    </li>

  </ol>
</div>

      <p>企业网站管理系统</p>

    </div>
      <div class="foot-right">
        <div class="foot-lang">

      </div>
      <div class="powered_by_metinfo">Powered&nbsp;by&nbsp;<a href="" target="_blank" title="企业网站管理系统">breeze</a>&nbsp;</div>
    </div>
    </div>
  </div>
</footer>

<div class="weixin-box">
  <b><em>X</em>分享到微信朋友圈</b>
  <i></i>
  <p>打开微信，使用“扫一扫”，点击右上角“分享到朋友圈”。</p>
</div>

<button type="button" class="btn btn-icon btn-primary btn-squared met-scroll-top hide"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>


<script src="./static/js/shop_lang_cn.js"></script>

<script src="./static/js/style.js"></script>

<script src="./static/js/shop_v3.js"></script>

</body>
</html>

四、学习资料

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码_html_08

五、完整源码

【百度网盘-源码下载地址】

链接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw

提取码：8888

六、更多源码

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

HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码_php_09