web前端网页设计期末课程大作业：旅游网页主题网站设计——三亚旅游网页设计(6个页面) HTML+CSS+JavaScript

news2024/11/24 4:49:06

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

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

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

文章目录🌰

  • 一、网站题目👨‍🎓
  • 二、网站描述✍️
  • 三、网站介绍📖
  • 四、网站效果🌐
  • 五、网站代码制作部分 📕
    • HTML结构代码🧱
    • CSS样式代码🏡
  • 六、遇到问题及如何解决🔍
  • 七、实训总结😊
  • 八、更多干货🎁

一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

三、网站介绍📖

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2）css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）js文件包含：js实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。

四、网站效果🌐

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

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

五、网站代码制作部分 📕

（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

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

        </ul>

        <ul>

          <li>
            <a href="youinfo.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>

        </ul>

        <ul>

          <li>
            <a href="youinfo.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>

        </ul>

        <ul>

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

        </ul>

        <ul>

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

        </ul>

      </div>
    </div>

  </div>

  <div class="width-box">
  <div class="advert-box">
    <a href="http://www.baidu.com" title="旅游景点旅行社网站" target='_self'>
    <img class="lazyloads" data-size="1170_120" data-original="./static/image/1506075016.jpg" alt="旅游景点旅行社网站">
    </a>
  </div>
  </div>

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

      <div class="notice-box"><h3>海南.三亚<em>旅游热线</em>&nbsp;——<em>400-000-0000</em></h3><p>成立9年以来，组织和接待了来自世界各国、各地区的游客100万人次，积累了丰富的旅游接待经验，着<em>“宾客至上，信誉第一”</em>的服务宗旨，严格规范的管理制度，高质量的服务，赢得中外游客的广泛赞誉。</p></div>

      <div class="card-list">

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="gonglueinfo.html" 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%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506334085.jpg"></a>
           <a class="weixin" data-href="http://breeze/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%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506334085.jpg"></a>
        </span>
        </font>
            </div>
          </div>
        </div>

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="gonglueinfo.html" 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%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D57&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335872.jpg"></a>
           <a class="weixin" data-href="http://breeze/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%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D57&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335872.jpg"></a>
        </span>
        </font>
            </div>
          </div>
        </div>

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="gonglueinfo.html" 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">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%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D56&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335186.jpg"></a>
           <a class="weixin" data-href="http://breeze/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%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D56&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335186.jpg"></a>
        </span>
        </font>
            </div>
          </div>
        </div>

        <div class="card-li">
          <div class="card-description">
            <a class="card-title" href="gonglueinfo.html" 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%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D55&pic=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335126.jpg"></a>
           <a class="weixin" data-href="http://breeze/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%2Fbreeze%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D55&pics=http%3A%2F%2Fbreeze%2Fupload%2F201709%2F1506335126.jpg"></a>
        </span>
        </font>
            </div>
          </div>
        </div>

      </div>

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

      <div class="editor-button">
        <a href="" title="报名咨询" target='_self'>
      <img class="lazyloads" data-size="19_17" data-original="./static/image/geek_5.png">
      报名咨询
    </a>
      </div>

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

          <li><a href="#" title="亚龙湾热带天堂森林公园" target='_self'>亚龙湾热带天堂森林公园</a></li>

          <li><a href="#" title="西沙群岛" target='_self'>西沙群岛</a></li>

          <li><a href="#" title="蜈支洲岛" target='_self'>蜈支洲岛</a></li>

          <li><a href="#" title="三天两夜" target='_self'>三天两夜</a></li>

          <li><a href="#" title="西沙群岛" target='_self'>西沙群岛</a></li>

          <li><a href="#" title="西岛" target='_self'>西岛</a></li>

        </ul>
      </div>

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

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

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

          <li>
            <a href="#" 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="#" title="2017海南三亚旅游攻略实用版" target='_self'>2017海南三亚旅游攻略实用版</a></li>

      <li><a href="#" title="与海浪共舞，享垂钓乐趣！一起去三亚海钓！" target='_self'>与海浪共舞，享垂钓乐趣！一起去三亚海钓！</a></li>

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

      <li><a href="#" 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="http://www.breeze.cn/#copyright" 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>

CSS样式代码🏡


body {
  padding-top: 0px;
}
.site-menubar {
  position: fixed;
  top: 66px;
  z-index: 1400;
  height: 100%;
  height: -webkit-calc(100% - 66px);
  height:         calc(100% - 66px);
  font-family: "Roboto", sans-serif;
  color: rgba(163, 175, 183, .9);
  background: #263238;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
          box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
.site-menubar-body {
  height: 100%;
  height: -webkit-calc(100% - 76px);
  height:         calc(100% - 76px);
}
.site-menubar ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.site-menubar a {
  outline: none;
}
.site-menubar a:hover,
.site-menubar a:focus {
  text-decoration: none;
}
.site-menubar.site-menubar-light {
  background: #fff;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
          box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
.site-menubar.site-menubar-light .scrollable-inverse.scrollable .scrollable-bar-handle {
  background: rgba(163, 175, 183, .6);
}
.site-menubar-section {
  padding: 0 30px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.site-menubar-section > h4,
.site-menubar-section > h5 {
  color: #76838f;
}
.site-menubar-section .progress:last-child {
  margin-bottom: 0;
}
.site-menubar-footer {
  position: fixed;
  bottom: 0;
  z-index: 1400;
  display: block;
}

六、遇到问题及如何解决🔍

实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。

七、实训总结😊

通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。

八、更多干货🎁

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

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

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/89753.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

类装载器ClassLoader 、执行引擎ExecutionEngine【Java培训】

类装载器ClassLoader 、执行引擎ExecutionEngine【Java培训】

1. 定义 负责加载class文件&#xff0c;class文件在文件开头有特定的文件标示&#xff0c;并且ClassLoader只负责class文件的加载&#xff0c;至于它是否可以运行&#xff0c;则由Execution Engine决定。 Java培训 2. 类加载器分类 虚拟机自带的加载器启动类加载器&#xff0…
阅读更多...
【现代机器人学】学习笔记六：闭链运动学

【现代机器人学】学习笔记六：闭链运动学

这一章的内容主要讲并联机器人的相关算法&#xff0c;内容在全书中属于比较少&#xff0c;仅仅介绍概念的章节。 恰好部门中有一位同事就是专门做并联机器人出身的博士&#xff0c;也请他帮忙看了一下内容&#xff0c;但他觉得写书的这个人可能也不是非常懂并联机器人&#xf…
阅读更多...
Java集合——Collection

Java集合——Collection

Collection集合 Collection接口下主要有三大子接口 List Queue Set 1. List List是有序可重复集合&#xff0c;根据索引下标来访问元素 List接口常见的三个实现类&#xff1a;ArrayList 、LinkedList、Vector 特点&#xff1a; 集合中的元素允许重复集合中的元素有序&…
阅读更多...
UE4 Cook指定平台资源

UE4 Cook指定平台资源

内容烘焙 | 虚幻引擎文档 (unrealengine.com) 虚幻引擎以内部使用的特定格式存储内容资源&#xff0c;如PNG用于存储纹理 数据&#xff0c;WAV用于音频数据。但是&#xff0c;该内容需要针对各平台转换为不同的格式&#xff0c; 因为平台使用专有格式&#xff0c;或者平台不支…
阅读更多...
Revit中“幕墙网格”编辑斜向网格和柱断墙梁

Revit中“幕墙网格”编辑斜向网格和柱断墙梁

一、Revit中“幕墙网格”编辑斜向网格 我们可以为幕墙添加任意间距的水平和垂直的网格线&#xff0c;但是对于斜向网格线我们却只能通过设置其实例属性中的角度来控制其生成一系列等间距的斜向网格&#xff0c;那么如果遇到不等间距的斜向网格线我们应该如何绘制呢? 首先通过设…
阅读更多...
博宜OJ练习题基础题目中个别问题的题（欢迎一起讨论）

博宜OJ练习题基础题目中个别问题的题（欢迎一起讨论）

中国博宜练习题个别问题&#xff0c;望讨论前言题目1解题思路提交后正确代码&#xff1a;个人写的错误代码题目2正确代码2个人写的错误代码2以上是个人目前遇到的两个问题&#xff0c;不知道是直接使用“max”函数的问题 还是什么&#xff0c;如果是“max”函数问题第一个测试点…
阅读更多...
多线程与高并发（二）

多线程与高并发（二）

【锁的底层实现】&#xff1a; 【 简介 】&#xff1a; JDK早期的时候是重量级的 &#xff0c; 会去找OS系统申请锁 &#xff0c;效率非常低。 后来的改进——《锁升级过程》。 【锁升级过程】&#xff1a; sync( Object ) 【偏向锁】&#xff1a; markword记录这个线程ID&…
阅读更多...
[附源码]Python计算机毕业设计Django基于JEE平台springbt技术的订餐系统

[附源码]Python计算机毕业设计Django基于JEE平台springbt技术的订餐系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
以太网 MSTP多实例生成树的简介、MSTP与RSTP、STP之间的联系、MSTP BPDU格式介绍、MSTP关键名词介绍）

以太网 MSTP多实例生成树的简介、MSTP与RSTP、STP之间的联系、MSTP BPDU格式介绍、MSTP关键名词介绍）

2.12.0 以太网 MSTP多实例生成树&#xff08;简介、MSTP与RSTP、STP联系、MSTP BPDU格式、MSTP关键名词介绍&#xff09; 主要参考&#xff1a;华为S2750, S5700, S6700 V200R005(C00&C01&C02&C03) 产品文档 《MSTP基本概念》 MSTP快速生成树简介MSTP关键名词介绍1…
阅读更多...
springboot+mybatis+mysql实现的个人博客管理系统（功能包含登录，栏目管理、文章管理、评论管理、系统设置、用户管理、发布博客、评论等）

springboot+mybatis+mysql实现的个人博客管理系统（功能包含登录，栏目管理、文章管理、评论管理、系统设置、用户管理、发布博客、评论等）

博客目录springbootmybatis实现的个人博客管理系统实现功能截图系统功能使用技术代码完整源码springbootmybatis实现的个人博客管理系统 本系统是一个个人博客管理系统&#xff0c;比较新的框架springbootmybatis实现&#xff0c;分为普通用户和管理员&#xff0c;普通用户可以…
阅读更多...
【软件测试】测试人接手新应用程序怎么测？看看这几个方法......

【软件测试】测试人接手新应用程序怎么测？看看这几个方法......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 应用程序很复杂的&a…
阅读更多...
三、数据链路层（三）差错控制

三、数据链路层（三）差错控制

目录 3.1检错编码 3.1.1奇偶校验码 3.1.2循环冗余码&#xff08;CRC&#xff09; 3.2纠错编码 3.2.1海明码 传输差错可分为两种&#xff1a; 位错&#xff1a;帧中某些位出现了差错&#xff0c;也称比特差错、误码。帧错&#xff1a;帧的丢失、重复或失序等错误。 通常利…
阅读更多...
面试题：数据结构和算法

面试题：数据结构和算法

1、时间复杂度解释一下 算法的时间复杂度&#xff0c;用来度量算法的运行时间&#xff0c;记作: T(n) O(f(n))。它表示随着 输入大小n 的增大&#xff0c;算法执行需要的时间的增长速度可以用 f(n) 来描述。 当 T(n) c&#xff0c;c 为一个常数的时候&#xff0c;我们说这个…
阅读更多...
[附源码]Python计算机毕业设计Django基于vue+mysql开发的考试系统

[附源码]Python计算机毕业设计Django基于vue+mysql开发的考试系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
Java web 2022跟学尚硅谷(九)书城项目

Java web 2022跟学尚硅谷(九)书城项目

Java web 2022跟学尚硅谷九书城项目需求分析数据库设计ER图书城1.0简单部署项目类图相关代码UserControllerUserDAOImplUserDAOBookCartItemOrderOrderItemUserUserServiceImplUserServiceapplicationContext.xml书城1.1实现功能1. 用户登录2. 首页图书列表展示3. 首页价格筛选…
阅读更多...
Vue3-ElemenPlu,全栈开发后台系统1-1-2-9第一章，第二章前端系统架构设计

Vue3-ElemenPlu,全栈开发后台系统1-1-2-9第一章，第二章前端系统架构设计

Vue3+ElementPlus Lo2+MongoDB 菜单按钮权限，JWT认证，审批流，常规的CRUD,模块化，组件化 技术栈： 架构设计，vue3全家桶，koa2, 权限： Role-Based A
阅读更多...
[附源码]Node.js计算机毕业设计辅导员班级量化管理系统Express

[附源码]Node.js计算机毕业设计辅导员班级量化管理系统Express

项目运行 环境配置&#xff1a; Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境&#xff1a;最好是Nodejs最新版&#xff0c;我…
阅读更多...
IMX6启动流程

IMX6启动流程

目录 1. 流程图 2. u-boot.imx的构造 1. 流程图 正常情况下&#xff0c;一台IMX6设备的启动路径就是图中自上而下最左边那条路&#xff1a; 启动/复位后先检查CPU的ID(每颗芯片独一无二) ------> 检查复位状态(有没有按下复位键) ------> 检查boot模式(mmc? USB? SPI…
阅读更多...
ARM寄存器组织（常见专用寄存器、控制寄存器CPSR）

ARM寄存器组织（常见专用寄存器、控制寄存器CPSR）

目录 一、寄存器的概念 1、什么是寄存器&#xff1f; 2、寄存器的分类 3、不同工作模式下使用的寄存器 二、常见专用寄存器 1、R15&#xff08;PC,Program Counter&#xff09; 2、R14&#xff08;LR,Link Register&#xff09; 3、R13&#xff08;SP,Stack Pointer&am…
阅读更多...
FineReport大数据分析工具- 统一切换轮播图表接口

FineReport大数据分析工具- 统一切换轮播图表接口

1. 概述 1.1 版本 报表服务器版本 功能变动 11.0 - 1.2 预期效果 某些场景下&#xff0c;需要让一张报表内的多个轮播图表同时切换。那么该如何实现呢&#xff1f;效果如下图所示&#xff1a; 1.3 实现思路 按钮添加点击事件&#xff0c;通过 JS 脚本调用接口统一切换轮播…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023