网页设计作业 旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品

发布时间：2023-10-31 18:30

HTML5期末大作业：旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品

文章目录

  • HTML5期末大作业：旅游网站网站设计——绿色的随行旅游网站( 1页) 出行游玩网页设计作业,简单大学生静态HTML网页作品
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现

一、作品展示


\"网页设计作业

二、文件目录

\"网页设计作业

三、代码实现


doctype html>
<html>
<head>
<meta charset=\"utf-8\">
<title>随行网，随心而行，随意而留title>
<link rel=\"shortcut icon\" href=\"bitbug_favicon.ico\"/>
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/global.css\" /> 

<script type=\"text/javascript\" src=\"jquery-1.7.2.min.js\">script>
<script type=\"text/javascript\">
    $(function(){
        // 导航
        $(\".nav>ul>li\").mouseenter(function(event) {
            $(this).addClass(\"cur\").siblings().removeClass(\"cur\")
            $(this).children(\".yincang\").stop().slideDown()

        });
        $(\".nav>ul>li\").mouseleave(function(event) {
            $(this).removeClass(\"cur\")
            $(this).children(\".yincang\").stop().slideUp()
        });
        // tejia
        $(\".tejia .wenzi span\").mouseenter(function(event) {
           $(this).addClass(\"cur\").siblings().removeClass(\"cur\")
        });
        // 品牌目的地
        $(\".pinpai_inr ul li\").mouseenter(function(event) {
            $(this).addClass(\"cur\").siblings().removeClass(\"cur\")
        });
          $(\".pinpai_inr ul li\").mouseleave(function(event) {
            $(\".pinpai_inr ul li\").removeClass(\"cur\")
        });
         // 
         $(\".tututu\").mouseenter(function(event) {
             $(this).children(\".heibu\").stop().slideDown()
         });
         $(\".tututu\").mouseleave(function(event) {
             $(this).children(\".heibu\").stop().slideUp()
         });
        //banner
                var nowing = 0 
                var $imglis = $(\".banner .list0 li\")
                var $fadeCover = $(\".fadeCover\")
                var fadeIntime = 500
                var fadeOutime = 800
                var $circle = $(\".circle li\")
                var timer

                    // 定义函数
                    function rightbtn(){
                        // 先信号量的改变，
                    
                    nowing++
                    if(nowing>$imglis.length-1){
                        nowing=0
                       }
                       // 再调用函数
                    dong();
                    }
                    // 定时器业务
                     timer = setInterval(rightbtn,2000)
                    $(\".banner\").mouseenter(function(){
                        clearInterval(timer)
                    
                    })
                    $(\".banner\").mouseleave(function(){
                        clearInterval(timer)
                        timer = setInterval(rightbtn,2000)
                    })
                    // 点击小圆点业务
                    $circle.click(function(){
                        nowing = $(this).index()
                        dong()
                    })
                 function dong(){
                     // 先让fadecover淡入，让全局变白 
                  $fadeCover.fadeIn(fadeIntime,function(){
                    // ,function(){
                    // 回调函数中，就表示fadecover淡入后做的事情。
                    // 换图是干蹦的，不是淡入淡出的换,进行暗箱操作，兄弟去cur，自己加cur
                    $imglis.eq(nowing).addClass(\'cur\').siblings().removeClass(\'cur\')
                    // 淡出让黑布小事
                    $(this).fadeOut(fadeOutime)
                  })
                  $circle.eq(nowing).addClass(\"cur\").siblings().removeClass(\"cur\")
                 }

    })
script>
head>
<body>
<div class=\"header1\">
    <div class=\"header1-in\">
        <div class=\"logo\">
            <a href=\"#\"><img src=\"img/logo.jpg\" alt=\"说行就行，随行\" />a>
        div>
        <div class=\"search\">
            <div class=\"search-left\">搜索目的地div>
            <div class=\"search-center\">
            <input type=\"text\" class=\"tex1\" placeholder=\"邂逅慵懒的小时光\" />
            div>
            <div class=\"search-right\">div>
        div>
        <div class=\"zuce\">
            <a href=\"#\">登录|注册a> 
            <a href=\"#\">语言（简体中文）a>
        div>
    div>
div>
<div class=\"nav\">
    <ul class=\"ul1\">
        <li class=\"level1 cur first\"><a class=\"a1\" href=\"#\">首页a>li>
        <li class=\"level1\"><a  class=\"a1\" href=\"\">目的地a>
            <ul class=\"yincang\">
                <li><a href=\"#\">境内游a>li>
                <li><a href=\"#\">境外游a>li>
                <li><a href=\"#\">周边游a>li>
                
            ul>
        li>
        <li class=\"level1\"><a class=\"a1\" href=\"#\">发现a>
            <ul class=\"yincang\">
                <li><a href=\"#\">美景a>li>
                <li><a href=\"#\">美食a>li>
                <li><a href=\"#\">美女a>li>
                
            ul>
        li>
        <li class=\"level1\"><a class=\"a1\" href=\"#\">社区a>li>
        <li class=\"level1\"><a class=\"a1\" href=\"#\">自驾a>
         
        li>
        <li class=\"level1\"><a class=\"a1\" href=\"#\">预定a>
            <ul class=\"yincang\">
                <li><a href=\"#\">酒店a>li>
                <li><a href=\"#\">机票a>li>
                <li><a href=\"#\">地接a>li>
                
            ul>
        li>
    ul>
div>
<div class=\"banner\">
           
            <ul class=\"list0\">
                <li class=\"cur\"><a href=\"#\"><img src=\"img/bg-1.jpg\" alt=\"\" />a>li>
                <li><a href=\"#\"><img src=\"img/bg-2.jpg\" alt=\"\" />a>li>
                <li><a href=\"#\"><img src=\"img/bg-3.jpg\" alt=\"\" />a>li>
              
            ul>
            <div class=\"fadeCover\">div>
            <ul class=\"circle\">
                <li class=\"cur\">1li>
                <li>2li>
                <li>3li>
             
            ul>
div>



<div class=\"cl\">div>
<div class=\"hot\">
    <div class=\"new\">最新点评
        <span>span>
    div>
    <div class=\"main\">
        <ul>
            <li class=\"cur\">马尔代夫真的太美了，下次还要再去！li>
            <li>丽江之美，美及天下li>
            <li>做一个没有故事的人,与我一起游世界。li>
            <li>转机的时候还能在新加坡机场免税店购物,li>

        ul>
    div>
<script type=\"text/javascript\" src=\"js/hot.js\">script>
    <div class=\"manyidu\">满意度：
        <span>100%span>
    div>
    <div class=\"comeon\">即刻出发
        <span>span>
    div>
div>
<div class=\"cl\">div>
<div class=\"tejia\">
    <p class=\"wenzi\">
        
            <span class=\"cur\">每日特价span>
            <span>特价机票span>
        
    p>
    <p class=\"sanjiao\">p>
    <p class=\"more\"><a href=\"#\">更多>>a>p>
div>
<div class=\"youhuitu\">
    <ul>
        <li><img src=\"img/te01.jpg\" alt=\"\" />
            <div class=\"youhuitu-in\">
            <div class=\"youhuitu-inl\"> 优惠div>
            <div class=\"youhuitu-inr\">迪拜帆船游超值特惠div>
            <div class=\"xiangxi\">全国联运-迪拜帆船酒店三天三晚自由行，奢华体验 都套餐选择住帆船，做土豪，享好礼。div>
			div>
        li>
        <li><img src=\"img/te02.jpg\" alt=\"\" />
            <div class=\"youhuitu-in\">
				<div class=\"youhuitu-inl\"> 优惠div>
				<div class=\"youhuitu-inr\">澳洲三城游超值特惠div>
				<div class=\"xiangxi\">澳洲三城自由行8/9天，悉尼黄金海岸布尼斯班 豪华酒店南航 广州飞不回头div>
			div>
        li>
        <li><img src=\"img/te03.jpg\" alt=\"\" />
            <div class=\"youhuitu-in\">
            <div class=\"youhuitu-inl\"> 优惠div>
            <div class=\"youhuitu-inr\">亚德里亚海超值特惠div>
			<div class=\"xiangxi\">全国联运-亚德里亚自由行，奢华体验 都套餐选，做土豪，享好礼。div>
			div>
        li>
        <li><img src=\"img/te04.jpg\" alt=\"\" />
            <div class=\"youhuitu-in\">
			<div class=\"youhuitu-inl\"> 优惠div>
			<div class=\"youhuitu-inr\">美国自由行超值特惠div>
			<div class=\"xiangxi\">美国自由行西岸10天7晚 自驾游全国出发一价全包含签证 全国联运7晚酒店自驾签证费全包div>
			div>
        li>
    ul>
    
div>
<div class=\"youhuitu\">
    <ul>
        <li><img src=\"img/te05.jpg\" alt=\"\" />
            <div class=\"youhuitu-in\">
            <div class=\"youhuitu-inl\"> 优惠div>
            <div class=\"youhuitu-inr\">迪拜帆船游超值特惠div>
            <div class=\"xiangxi\">全国联运-迪拜帆船酒店三天三晚自由行，奢华体验 都套餐选择住帆船，做土豪，享好礼。div>
			div>
        li>
        <li><img src=\"img/te06.jpg\" alt=\"\" />
            <div class=\"youhuitu-in\">
			<div class=\"youhuitu-inl\"> 优惠div>
			<div class=\"youhuitu-inr\">澳洲三城游超值特惠div>
			<div class=\"xiangxi\">澳洲三城自由行8/9天，悉尼黄金海岸布尼斯班 豪华酒店南航 广州飞不回头div>
			div>
        li>
        <li><img src=\"img/te07.jpg\" alt=\"\" />
            <div class=\"youhuitu-in\">
			<div class=\"youhuitu-inl\"> 优惠div>
			<div class=\"youhuitu-inr\">亚德里亚海超值特惠div>
			<div class=\"xiangxi\">全国联运-亚德里亚自由行，奢华体验 都套餐选，做土豪，享好礼。div>
			div>
        li>
        <li><img src=\"img/te08.jpg\" alt=\"\" />
            <div class=\"youhuitu-in\">
			<div class=\"youhuitu-inl\"> 优惠div>
			<div class=\"youhuitu-inr\">美国自由行超值特惠div>
			<div class=\"xiangxi\">美国自由行西岸10天7晚 自驾游全国出发一价全包含签证 全国联运7晚酒店自驾签证费全包div>
			div>
        li>
    ul>
    
div>
<div class=\"yaotiao\">
        <img src=\"img/yaotiao.jpg\" alt=\"\" />
div>
<div class=\"pinpai\">
    <p class=\"wenzi\">
        品牌目的地    
    p>
    <p class=\"more\"><a href=\"#\">更多>>a>p>
div>
<div class=\"pinpai_in\">
    <div class=\"pinpai_inl\">
        <img src=\"img/pinpai_left.png\" alt=\"\" />
        <div class=\"pinpai_inlin\">
        div>
        <span class=\"pinpai_inl_span1\">马尔代夫超值连线游span>
        <span class=\"pinpai_inl_span2\">让你一次游个够，心动不如行动吧！span>
    div>
    <div class=\"pinpai_inr\">
        <ul>
            <li class=\"cur\"><img src=\"img/fuzhou.jpg\" alt=\"\" />
                <span >span>  
                <p>福州p>     
            li>
            <li><img src=\"img/libo.jpg\" alt=\"\" />
                <span>span>
                <p>荔波p>
            li>
            <li><img src=\"img/malai.jpg\" alt=\"\" />
                <span>span>
                <p>马来西亚p>
            li>
            <li><img src=\"img/rongshui.jpg\" alt=\"\" />
                <span>span>
                <p>融水p>
            li>
            <li><img src=\"img/shannan.jpg\" alt=\"\" />
                <span>span>
                <p>山南p>
            li>
            <li><img src=\"img/shilin.jpg\" alt=\"\" />
                <span>span>
                <p>石林p>
            li>
            <li><img src=\"img/shanqiu.jpg\" alt=\"\" />
                <span>span>
                <p>山丘p>
            li>
            <li><img src=\"img/xian.jpg\" alt=\"\" />
                <span>span>
                <p>西安p>
            li>
        ul>
    div>


div>
<div class=\"pinpai\">
    <p class=\"wenzi\">
        出境游    
    p>
    <p class=\"more\"><a href=\"#\">更多>>a>p>
div>
<div class=\"chujingyou\">
    <div class=\"chujingyou-l\">
        <ul>
            <li class=\"li11 tututu\">
                <img src=\"img/11.jpg\" alt=\"\"  class=\"img11\" />
                <span>怦然心动·吉之岛span>
                <div class=\"heibu1 heibu\">心动吉之岛div>
            li>
            <li class=\"tututu\">
                <img src=\"img/12.jpg\" alt=\"\" />
                <span>第一缕阳光·斐然span>
                <div class=\"heibu\">第一缕阳光div>
            li>
            <li class=\"tututu\">
                <img src=\"img/13.jpg\" alt=\"\" />
                <span>马尔代夫·度蜜月span>
                <div class=\"heibu\">度蜜月div>
            li>
            <li class=\"li21 tututu\">
                <img src=\"img/21.jpg\" alt=\"\"  class=\"img21\" />
                <span>欧冠·巴塞罗那 span>
                <div class=\"heibu2 heibu\">巴塞罗那 div>
            li>
            <li class=\"tututu\">
                <img src=\"img/22.jpg\" alt=\"\" />
                <span>恋爱国度·巴黎span>
                <div class=\"heibu\">恋爱国度div>
            li>
            <li class=\"tututu\">
                <img src=\"img/23.jpg\" alt=\"\" />
                <span> 执子之手·希腊span>
                <div class=\"heibu\">执手希腊div>
            li>
        ul>
    div>

    <div class=\"chujingyou-r\">
            <span>span>
            <img src=\"img/cheshow.jpg\" alt=\"\" />
            <div class=\"show\">
                <ul>
                    <li><a href=\"#\">【游记】致青春之旅 锡勒草原a>li>
                    <li><a href=\"#\">【游记】自驾重庆武隆风景区a>li>
                    <li><a href=\"#\">【游记】无止境之征探索未历之美a>li>
                    <li><a href=\"#\">【游记】骏雅新派逛古都a>li>
                    <li><a href=\"#\">【游记】奥迪2015国际露营大会a>li>
                  
                ul>
            div>
        
    div>
div>
<div class=\"footer\">
    <div class=\"navfoot\">
   <ul>
       <li><a href=\"#\">关于我们a>li>
       <li><a href=\"#\">营销服务a>li>
       <li><a href=\"#\">商家服务a>li>
       <li><a href=\"#\">新手上路a>li>
       <li><a href=\"#\">合作伙伴a>li>
       <li><a href=\"#\">关注我们a>li>
   ul>
   div>
    <div class=\"share\">
        <span class=\"s1\">span>
        <span class=\"s2\">span>
        <span class=\"s3\">span>
        <span class=\"s4\">span>
    div>
    <div class=\"cl\">div>
    <p>版权所有©2015 FREE TRAVEL北京随行网有限公司p>
    <p>京ICP备11011333号 京公网安备110105007294p>
div>


body>
html>

相关推荐

NVIDIA_CUDA版本查看方法_WIN10

2020-12-22最大公因数

cesium 三维坐标系绘制

【目标跟踪】Yolov5_DeepSort_Pytorch复现

如何获取 Spring heapdump中的明文密码

灵雀云加入LF机密计算联盟，推进机密计算在云原生场景的应用

Unity3D 学习笔记

Spring Boot

旅游网站后台信息管理——简单版（增删改查）

墨天轮沙龙 | 北京大学李文杰：面向知识图谱应用的图数据库系统gStore

第06篇:Mybatis缓存设计

大数加法(中等)

网络空间冲突不断，沃通SSL证书、代码签名证书助力保障网络安全

web前端开发新技术，CSS介绍

FPGA - 7系列 FPGA内部结构之Clocking -03- 时钟管理模块（CMT）

合宙esp32c3不带串口芯片的型号如何arduino和micropython

【深度学习原理第4篇】卷积神经网络详解（CNN）

random(随机数模块)

XMeter Newsletter 2022-06｜企业版 v3.2.3 发布，错误日志与测试报告图表优化

java算法刷题01——字符串、数组、集合、基本数据类型

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网，如有侵权请联系：561261067@qq.com

桂ICP备16001015号