Lmmso-Loser 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 120|回复: 0

HTML期末大作业~基于HTML+CSS+JavaScript旅游网站设计与实现(6个页面)

[复制链接]
  • TA的每日心情
    无聊
    昨天 18:58
  • 签到天数: 22 天

    [LV.4]偶尔看看III

    177

    主题

    22

    回帖

    1541

    积分

    管理员

    积分
    1541
    发表于 2023-1-19 08:07:29 | 显示全部楼层 |阅读模式 来自 重庆大足县
    HTML期末大作业~HTML+CSS+JavaScript旅游网站设计与实现->绿色古典的旅游度假景区(6个页面)     临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从动手?网页要求的总数目太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~
         原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面夺目,非常适合初学者学习利用。
         作品先容     1.网页作品简介方面 :绿色古典的旅游度假景区,观光社服务公司,旅游景区规划项目管理公司网站html模板下载。包含:景区概况、文苑之旅、舒雅住宅、新闻动态、联系我们等6个页面
         2.网页作品编辑方面:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可利用恣意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可利用)
         3.网页作品布局方面:网页布局团体为LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容利用图片列表布局,结果页面插入了表格,联系我们利用图片对齐方式设置了左对齐。
         4.网页作品技能方面:利用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单,同时简单利用JavaScript制作了表单判断(提交时表单不能为空)
               文章目录

          
    • HTML期末大作业~HTML+CSS+JavaScript旅游网站设计与实现->绿色古典的旅游度假景区(6个页面)
    • 作品先容
    • 一、作品演示


        • 1.首页
        • 2.景区概况
        • 3.文苑之旅
        • 4.联系我们
        • 5. 新闻动态

    • 二、代码目录
    • 三、代码实现
    • 四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
    • 五、源码获取
    • 六、更多HTML期末大作业作品文章
    • 七、更多表白源码
             一、作品演示      1.首页

         
          2.景区概况

         
          3.文苑之旅

         
          4.联系我们

         
          5. 新闻动态

         
         二、代码目录     
         三、代码实现   
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <meta name="renderer" content="webkit"/>
    6. <meta name="force-rendering" content="webkit"/>
    7. <title></title>
    8. <link type="text/css" rel="stylesheet" href="css/style.css" />
    9. <link type="text/css" rel="stylesheet" href="css/animate.css" />
    10. <script></script>
    11. <script></script>
    12. <script>
    13. $(document).ready(function () {
    14.   $("ul.nav li").hover(function () {
    15.                 $(this).find(".navtwo").toggle();
    16.         })        
    17. })
    18. </script>
    19. </head>

    20. <body>

    21.   <ul class="nav">
    22.     <li>
    23.       首页
    24.     </li>
    25.     <li>
    26.       景区概况
    27.     </li>
    28.     <li>
    29.       文苑之旅
    30.       
    31.         文苑之旅
    32.         文苑之旅
    33.         文苑之旅
    34.       
    35.     </li>
    36.     <li>
    37.       舒雅住宅
    38.     </li>
    39.     <li>
    40.       新闻动态
    41.       
    42.         公司新闻
    43.         行业新闻
    44.       
    45.     </li>
    46.     <li>
    47.       联系我们
    48.     </li>
    49.   </ul>



    50.   
    51.       <img src="https://blog.csdn.net/images/banner1.jpg" width="100%"/>
    52.       <img src="https://blog.csdn.net/images/banner1.jpg" width="100%" />
    53.   
    54.   
    55.    



    56.   
    57.    
    58.       <p>景区概况</p>
    59.       <span class="ccsl">SCENIC OVERVIEW</span>
    60.    
    61.    
    62.       石家庄飞天益游天下旅行社有限公司是首批专注于精品民宿的新型创业连锁平台。<br>公司成立于2017年2月,注册资金1000万元。益游使命在于构筑"万众创新、大众创业"的新型平台,建立一个为历史和未来负责的、"留得住浓浓的乡愁"的城镇化村落服务体系,<br>为中国城镇化进程中的美丽乡村建设贡献一份力量。
    63.    
    64.    
    65.       <span class="img"></span>
    66.    
    67.   



    68.   
    69.     <p>文苑之旅</p>
    70.     <span class="ccsl">COURT TRAVEL</span>
    71.   
    72.   <ul>
    73.     <li>
    74.       
    75.       
    76.         <img src="https://blog.csdn.net/images/1.png" />
    77.       
    78.       <p class="ccsl">万竹林海(一)</p>
    79.     </li>
    80.     <li>
    81.       
    82.       
    83.         <img src="https://blog.csdn.net/images/1.png" />
    84.       
    85.       <p class="ccsl">万竹林海(一)</p>
    86.     </li>
    87.     <li>
    88.       
    89.       
    90.         <img src="https://blog.csdn.net/images/1.png" />
    91.       
    92.       <p class="ccsl">万竹林海(一)</p>
    93.     </li>
    94.   </ul>



    95.   
    96.     <p>舒雅住宅</p>
    97.     <span class="ccsl">COURT TRAVEL</span>
    98.   
    99.   
    100.    
    101.       
    102.         <ul style="margin-left: 0px; overflow: hidden">
    103.           <li><img src="https://blog.csdn.net/images/2.png" /></li>
    104.           <li><img src="https://blog.csdn.net/images/2.png" /></li>
    105.           <li><img src="https://blog.csdn.net/images/2.png" /></li>
    106.         </ul>
    107.       
    108.    
    109.    
    110.       <img src="https://blog.csdn.net/images/3.png" />
    111.       客 | 房 | 介 | 绍
    112.       桃花林苑中有各式客房100套,房型分为中式、现代两个类型,以满足客人的不同需求…
    113.       
    114.         <p class="up">上一个</p>
    115.         <p class="down">下一个</p>
    116.       
    117.    
    118.   
    119.   <script>
    120.     $(function () {
    121.         var left = $(".up");
    122.         var right = $(".down");
    123.         var obj = $(".subBox0 ul");
    124.         var w = obj.find("li").innerWidth();

    125.         left.click(function () {
    126.             obj.find("li:last").prependTo(obj);
    127.             obj.css("margin-left", -w);
    128.             obj.animate({ "margin-left": 0 });
    129.         });

    130.         right.click(function () {
    131.             obj.animate({ "margin-left": -w }, function () {
    132.                 obj.find("li:first").appendTo(obj);
    133.                 obj.css("margin-left", "0");
    134.             });
    135.         });
    136.         var moving = setInterval(function () { right.click() }, 3000);
    137.         obj.hover(function () {
    138.             clearInterval(moving);
    139.         }, function () {
    140.             moving = setInterval(function () { right.click() }, 3000);
    141.         })
    142.     });
    143.    </script>
    144.    
    145.     <span class="img"></span>
    146.    



    147.   
    148.    
    149.       <p>新闻动态</p>
    150.       <span class="ccsl">NEWS</span>
    151.    
    152.     <ul>
    153.       <li>
    154.         
    155.           暑假去哪玩?桃花苑天地避暑甚好!
    156.           暑期近在眼前,还在犹豫带孩子去哪儿玩吗?炎热的夏天,一颗躁动的心,背上收拾好的背包,走遍大好河山感受大千世界,还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣,回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。
    157.         
    158.         
    159.           <span>07.21</span>
    160.           <time>2016</time>
    161.         
    162.         
    163.       </li>
    164.       <li>
    165.         
    166.           暑假去哪玩?桃花苑天地避暑甚好!
    167.           暑期近在眼前,还在犹豫带孩子去哪儿玩吗?炎热的夏天,一颗躁动的心,背上收拾好的背包,走遍大好河山感受大千世界,还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣,回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。
    168.         
    169.         
    170.           <span>07.21</span>
    171.           <time>2016</time>
    172.         
    173.         
    174.       </li>
    175.       <li>
    176.         
    177.           暑假去哪玩?桃花苑天地避暑甚好!
    178.           暑期近在眼前,还在犹豫带孩子去哪儿玩吗?炎热的夏天,一颗躁动的心,背上收拾好的背包,走遍大好河山感受大千世界,还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣,回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。
    179.         
    180.         
    181.           <span>07.21</span>
    182.           <time>2016</time>
    183.         
    184.         
    185.       </li>
    186.       <li>
    187.         
    188.           暑假去哪玩?桃花苑天地避暑甚好!
    189.           暑期近在眼前,还在犹豫带孩子去哪儿玩吗?炎热的夏天,一颗躁动的心,背上收拾好的背包,走遍大好河山感受大千世界,还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣,回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。
    190.         
    191.         
    192.           <span>07.21</span>
    193.           <time>2016</time>
    194.         
    195.         
    196.       </li>
    197.     </ul>
    198.    
    199.       MORE
    200.    
    201.   



    202.   
    203.    
    204.       
    205.         首页
    206.         景区概况
    207.         文苑之旅
    208.         舒雅住宅
    209.         新闻动态
    210.         联系我们
    211.       
    212.       
    213.       
    214.         电话:0311-12345678<br />邮箱:123.sjz@456.com<br />手机:123 4560 7890<br />地址:河北省石家庄市裕华区西湾子镇旅游商贸新区胜利大街香雪A区11号
    215.       
    216.    
    217.   

    218. </body>
    219. </html>



    复制代码
       
         四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)     web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
         

       
    免责声明:部分资源来源于如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
    Lmmso-Loser 论坛免责声明
    论坛总版规:
    https://bbs.lmmso.loserc.com/thread-2-1-1.html
    免责声明:
    Lmmso-Loser 论坛发布的一切破解补丁、注册机和注册信息及软件的解密分析文章和网络工具及网络安全分析文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
    该会员没有填写今日想说内容.
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Loading...

    QQ| 举报中心| 小黑屋| Lmmso-Loser 官方论坛 ( 渝ICP备:2023000236号-1 ) 渝公网安备 XXXXXXXXXXXXXXX号

    GMT+8, 2023-2-9 19:46 , Processed in 0.130142 second(s), 30 queries .

    Powered by Lmmso-Loser Discuz! X3.5 Licensed

    Copyright © 2023-2025, Tencent Cloud.

    快速回复 返回顶部 返回列表