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

news2024/12/23 17:20:42

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

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

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

文章目录🌰

  • 一、网页介绍📖
  • 一、网页效果🌌
  • 二、代码展示😈
    • 1.HTML结构代码 🧱
  • 三、个人总结😊
  • 四、更多干货🚀

一、网页介绍📖

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.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥在这里插入图片描述

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

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

相关文章

基于Java+Swing实现超级玛丽游戏

基于Java+Swing实现超级玛丽游戏

基于JavaSwing实现超级玛丽游戏一、系统介绍二、功能展示三、其他系统一、系统介绍 超级玛丽小游戏的JAVA程序&#xff0c;进入游戏后首先按空格键开始&#xff0c;利用方向键来控制的马里奥的移动&#xff0c;同时检测马里奥与场景中的障碍物和敌人的碰撞&#xff0c;并判断马…
阅读更多...
JVM八股文，面试会被问到什么？都在这里啦 ~

JVM八股文，面试会被问到什么？都在这里啦 ~

目录 1、JVM内存划分 1.1、程序计数器&#xff08;Program Counter Register&#xff09; 1.2、方法区&#xff08;Method Area&#xff09; 1.3、本地方法栈&#xff08;Native Method Stacks&#xff09; 1.4、虚拟机栈&#xff08;JVM Stacks&#xff09; 1.5、Java堆…
阅读更多...
溢出的文字省略号显示

溢出的文字省略号显示

溢出的文字省略号显示 1、单行文本溢出显示省略号 源代码 必须满足三个条件&#xff1a;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; nowrap强制一行内显示文本(默认normal自动换行)&#xff0…
阅读更多...
vscode跨语言调试

vscode跨语言调试

所谓“工欲善其事&#xff0c;必先利其器”&#xff0c;作为一个程序员&#xff0c;调试在项目开发过程中的重要性自然是不言而喻的。 最近项目中遇到的项目是由python和cpp完成的&#xff0c;python端会调用到cpp的库。由于做二次开发需要进行跨语言联调&#xff0c;所以在这…
阅读更多...
QList与QVector遍历方法与性能比较

QList与QVector遍历方法与性能比较

目录 一、 性能测试 二、 QList与QVector耗时对比分析 三、QList遍历方式对比分析 四、QVector遍历方式对比分析 一、 性能测试 最近使用opengl画点云数据时发现比较卡顿&#xff0c;原因是我使用了QList数据结构&#xff0c;后面改为QVector改善很多&#xff0c;速度提升1倍。…
阅读更多...
什么是数学思维

什么是数学思维

什么是数学 数学 [英语&#xff1a;mathematics&#xff0c;源自古希腊语μάθημα&#xff08;mthēma&#xff09;&#xff1b;经常被缩写为math或maths]&#xff0c;是研究数量、结构、变化、空间以及信息等概念的一门学科。 数学 是人类对事物的抽象结构与模式进行严格…
阅读更多...
大学生影视主题网页制作 HTML+CSS+JS仿360影视网站 dreamweaver电影HTML网站制作

大学生影视主题网页制作 HTML+CSS+JS仿360影视网站 dreamweaver电影HTML网站制作

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 文章目录一、网页介绍一…
阅读更多...
数据结构：排序

数据结构：排序

目录 插入排序 插入排序 希尔排序 选择排序 选择排序 堆排序 交换排序 冒泡排序 快速排序 递归实现&#xff1a; ●hoare版本 ●三数取中小区间法优化 ●挖坑版本 ●双指针版本 非递归 ●用栈实现 ●用队列实现 归并排序 ● 递归 ●非递归 总结 来了朋友&a…
阅读更多...
slot的理解

slot的理解

首先&#xff0c;大概了解一下插槽&#xff1a; 插槽是什么 ![在这里插入图片描述](https://img-blog.csdnimg.cn/90b04660769e49c286ee2e1821d2a2bb.png 插槽&#xff1a;在HTML中 slot 元素 &#xff0c;作为 Web Components 技术套件的一部分&#xff0c;是Web组件内的一个占…
阅读更多...
HashMap1.8也会发生死循环

HashMap1.8也会发生死循环

在网上搜资料时候然后发现网上都说1.7版本的HashMap会发生死链也就是死循环&#xff0c;但是在HashMap中也会产生死循环&#xff0c;接下来直接看代码吧 代码 类名字我忘记改了这是我以前看park时候弄的但是这不重要 当你运行 public class parkAndUnpark {static Map<…
阅读更多...
微服务守护神-Sentinel-降级规则

微服务守护神-Sentinel-降级规则

引言 书接上篇 微服务守护神-Sentinel-流控规则 &#xff0c;上面介绍了Sentinel流控规则&#xff0c;本篇继续来Sentinel的降级规则。 降级规则 那啥为降级呢&#xff1f;降级可以理解为下降等次&#xff0c;比如&#xff1a;你从广州到北京&#xff0c;有钱时&#xff0c;…
阅读更多...
Kafka的认证

Kafka的认证

Kafka支持基于SSL和基于SASL的安全认证机制。 基于SSL的认证主要是指Broker和客户端的双路认证。即客户端认证broker的证书&#xff0c;broker也认证客户端的证书。 Kafka还支持通过SASL做客户端认证。SASL是提供认证和数据安全服务的框架。Kafka支持的SASL机制有5种&#xff…
阅读更多...
Docker容器化技术入门（一）Docker简介

Docker容器化技术入门（一）Docker简介

Docker容器化技术入门&#xff08;一&#xff09;Docker简介前言&#xff08;一&#xff09;Docker简介1 Docker是什么&#xff1f;1.1 Docker的出现1.2 Docker的理念1.3 一句话2 容器与虚拟机比较2.1 容器发展简史2.2 传统虚拟机技术2.3 容器虚拟化技术2.4 对比3 Docker能干什…
阅读更多...
华硕编程竞赛11月JAVA专场 D题飞机大战 题解

华硕编程竞赛11月JAVA专场 D题飞机大战 题解

作者主页&#xff1a;Designer 小郑 作者简介&#xff1a;Java全栈软件工程师一枚&#xff0c;来自浙江宁波&#xff0c;负责开发管理公司OA项目&#xff0c;专注软件前后端开发&#xff08;Vue、SpringBoot和微信小程序&#xff09;、系统定制、远程技术指导。CSDN学院、蓝桥云…
阅读更多...
org.eclipse.e4.core.di.InjectionException: Unable to proces

org.eclipse.e4.core.di.InjectionException: Unable to proces

eclipse RCP 项目在eclipse 插件程序中正常运行&#xff0c;导出eclipse product后运行报错。路径&#xff1a;【项目名称】–>workspace–>.metadata–>.log 报错信息如下&#xff1a; !SESSION 2022-12-08 17:19:22.227 ------------------------------------------…
阅读更多...
MATLAB、R用改进Fuzzy C-means模糊C均值聚类算法的微博用户特征调研数据聚类研究...

MATLAB、R用改进Fuzzy C-means模糊C均值聚类算法的微博用户特征调研数据聚类研究...

全文链接&#xff1a;http://tecdat.cn/?p30766本文就将采用改进Fuzzy C-means算法对基于用户特征的微博数据进行聚类分析。去年&#xff0c;我们为一位客户进行了短暂的咨询工作&#xff0c;他正在构建一个主要基于微博用户特征聚类研究的分析应用程序&#xff08;点击文末“…
阅读更多...
从零开始带你实现一套自己的CI/CD（二）Jenkins+Sonar Qube

从零开始带你实现一套自己的CI/CD（二）Jenkins+Sonar Qube

目录一、简介二、Sonar环境搭建2.1 下载Docker镜像2.2 使用docker-compose部署三、Sonar Qube基本使用3.1 Maven实现代码检测3.2 Sonar-scanner实现代码检测四、Jenkins集成Sonar Qube4.1 下载插件4.2 SonarQube生成Token4.3 Jenkins配置Sonar Token信息4.4 Jenkins全局工具配置…
阅读更多...
word如何设置页码？一分钟教你设置Word文档的页码！

word如何设置页码？一分钟教你设置Word文档的页码！

你知道Word怎么设置页码吗&#xff1f;可能你还找不到页码在何处。相信有很多人也会遇到这些类似的问题。如何在Word文档里面的任意一页设置页码呢&#xff1f;word如何设置页码&#xff1f;现在小编就把设置页码的过程和截图分享出来&#xff0c;本文仅供参考使用。有需要的朋…
阅读更多...
算法刷题打卡第40天：打家劫舍

算法刷题打卡第40天：打家劫舍

打家劫舍 难度&#xff1a;中等 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。…
阅读更多...
全解一款六面体结构化网格划分利器-NUMECA IGG

全解一款六面体结构化网格划分利器-NUMECA IGG

作者 |卢工FunRun 仿真秀优秀讲师 导读&#xff1a;前不久&#xff0c;VIP群有人提问&#xff1a;“老师&#xff0c;NUMECA如何计算带蜗壳叶轮机呢”&#xff1f;笔者使用NUMECA FINE/Turbo&#xff08;以下简称Turbo&#xff09;软件解决叶轮机械气动性能仿真计算已有三年多&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023