WEB前端大作业HTML静态网页设计旅游景点区主题——三亚旅游网页设计

举报
IT司马青衫 发表于 2022/08/13 16:52:23 2022/08/13
【摘要】 家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成过渡效果、鼠标滑过效果等,使用表格、表单补充模块,为方便新手学习页面中没有使用js有需要的可以自行添加。 ...

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成过渡效果、鼠标滑过效果等,使用表格、表单补充模块,为方便新手学习页面中没有使用js有需要的可以自行添加。


⚽精彩专栏推荐👇🏻👇🏻👇🏻

【作者主页——🔥获取更多优质源码】
【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】


@TOC

一、网页介绍📖

1 网页简介:此作品为学生个人主页网页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码,这是一个不错的网页制作,画面精明,代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。

3.知识应用:技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件)所需的知识点。


一、网页效果🌌

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


二、代码展示😈


1.HTML结构代码 🧱

代码如下(示例):以下仅展示部分代码供参考~


<!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>
<!--[if lte IE 8]>
  <div class="text-center padding-top-50 padding-bottom-50 bg-blue-grey-100">
  <p class="browserupgrade font-size-18">你正在使用一个<strong>过时</strong>的浏览器。请<a href="http://browsehappy.com/" target="_blank">升级您的浏览器</a>,以提高您的体验。</p>
  </div>
<![endif]-->
<div class="load-box"></div>
<header>
  <div class="head-box">
    <div class="width-box">
      <div class="logo-box">
        <a href="javascript:;" 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/1506069563.jpg" srcset='' sizes="(max-width: 767px) 767px" alt="">
   
        </div>  

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

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

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

    <div class="price-box">
      <div class="price-nav transform-box">
        <ol class="price-ul">
          <li class="price-li active"><a title="跟团游">热门推荐</a></li>

          <li class="price-li"><a title="一日游">一日游</a></li>

          <li class="price-li"><a title="二日游">二日游</a></li>

          <li class="price-li"><a title="三日游">三日游</a></li>

          <li class="price-li"><a title="四日游">四日游</a></li>

          <li class="price-li"><a title="五日游">五日游</a></li>

          <li class="price-li"><a title="六日游">六日游</a></li>

          <li class="price-li"><a title="七日游">七日游</a></li>

        </ol>
      </div>
      <div class="price-cut">
        <ul class="active">

          <li>
            <a href="gonglueinfo.html" title="海口到三亚三天两晚品牌游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506322241.jpg' alt="海口到三亚三天两晚品牌游">
              <span>海口到三亚三天两晚品牌游</span>
        <font>660.00元</font>
            </a>
          </li>

          <li>
            <a href="gonglueinfo.html" title="三亚-西沙三日游精华线" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321574.jpg' alt="三亚-西沙三日游精华线">
              <span>三亚-西沙三日游精华线</span>
        <font>1280.00元</font>
            </a>
          </li>

          <li>
            <a href="gonglueinfo.html" title="豪华游轮 西沙七日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321623.jpg' alt="豪华游轮 西沙七日游">
              <span>豪华游轮 西沙七日游</span>
        <font>4999.00元</font>
            </a>
          </li>

          <li>
            <a href="gonglueinfo.html" title="海南三亚-西沙六日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321389.jpg' alt="海南三亚-西沙六日游">
              <span>海南三亚-西沙六日游</span>
        <font>3880.00元</font>
            </a>
          </li>

          <li>
            <a href="gonglueinfo.html" title="三亚一地5天4晚“岛人行岛”豪华游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506321153.jpg' alt="三亚一地5天4晚“岛人行岛”豪华游">
              <span>三亚一地5天4晚“岛人行岛”豪华游</span>
        <font>3680.00元</font>
            </a>
          </li>

          <li>
            <a href="gonglueinfo.html" title="天堂森林公园-亚龙湾沙滩1日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506307339.jpg' alt="天堂森林公园-亚龙湾沙滩1日游">
              <span>天堂森林公园-亚龙湾沙滩1日游</span>
        <font>145.00元</font>
            </a>
          </li>

          <li>
            <a href="gonglueinfo.html" title="【南海之梦号邮轮】西沙群岛4天3晚游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506319633.jpg' alt="【南海之梦号邮轮】西沙群岛4天3晚游">
              <span>【南海之梦号邮轮】西沙群岛4天3晚游</span>
        <font>1680.00元</font>
            </a>
          </li>

          <li>
            <a href="gonglueinfo.html" title="(2天精品A线)绝美蜈支洲2日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506310281.jpg' alt="(2天精品A线)绝美蜈支洲2日游">
              <span>(2天精品A线)绝美蜈支洲2日游</span>
        <font>225.00元</font>
            </a>
          </li>

        </ul>

        <ul>

          <li>
            <a href="gonglueinfo.html" title="天堂森林公园-亚龙湾沙滩1日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506307339.jpg' alt="天堂森林公园-亚龙湾沙滩1日游">
              <span>天堂森林公园-亚龙湾沙滩1日游</span>
        <font>145.00元</font>
            </a>
          </li>

        </ul>

        <ul>

          <li>
            <a href="gonglueinfo.html" title="(2天精品A线)绝美蜈支洲2日游" target='_self'>
              <img class="lazyloadx" data-original='./static/image/1506310281.jpg' alt="(2天精品A线)绝美蜈支洲2日游">
              <span>(2天精品A线)绝美蜈支洲2日游</span>
        <font>225.00元</font>
            </a>
          </li>

        </ul>

        <ul>


      <div class="card-active">
        <h4>推荐路线</h4>
        <ul>

          <li>
            <a href="javascript:;" title="海南-三亚三天三夜自助游" target='_self'>
              <img class="lazyloads" data-original='./static/image/1506311787.jpg'>
              <span>海南-三亚三天三夜自助游</span>
            </a>
          </li>

          <li>
            <a href="javascript:;" title="三亚一地5天4晚“岛人行岛”豪华游" target='_self'>
              <img class="lazyloads" data-original='./static/image/1506321153.jpg'>
              <span>三亚一地5天4晚“岛人行岛”豪华游</span>
            </a>
          </li>

          <li>
            <a href="javascript:;" title="三亚到西沙群岛4天3晚自助游" target='_self'>
              <img class="lazyloads" data-original='./static/image/1506320253.jpg'>
              <span>三亚到西沙群岛4天3晚自助游</span>
            </a>
          </li>

        </ul>
      </div>

      <div class="card-hots">
        <h4>热门排行</h4>
        <ul>

      <li><a href="javascript:;" title="2017海南三亚旅游攻略实用版" target='_self'>2017海南三亚旅游攻略实用版</a></li>

      <li><a href="javascript:;" title="与海浪共舞,享垂钓乐趣!一起去三亚海钓!" target='_self'>与海浪共舞,享垂钓乐趣!一起去三亚海钓!</a></li>

      <li><a href="javascript:;" title="海南旅游自由行攻略" target='_self'>海南旅游自由行攻略</a></li>

      <li><a href="javascript:;" 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="javascipt:;" 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?20171025163800"></script> -->

</body>
</html>



三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分;
  2. 所有页面相互超链接,可到三级页面,有5-10个页面组成;
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术;
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转;
  5. 要有JS特效,如定时切换和手动切换图片新闻;
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用;
  7. 页面清爽、美观、大方,不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏”一键三连哦!

2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥!


💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。