355. 紫色的私人定制旅游网站大学生期末大作业 Web前端网页制作 html+css+js-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/140197577

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css+js：导航菜单、图片轮翻效果、无缝滚动插件、悬浮图标、注册页面、登录页面等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含10个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>叁色旅行的梦想是能够为客户提供最舒适的旅行体验</title>
<meta name="keywords" content="叁色旅行,私人订制,高端订制,专属个性" />
<meta name="description" content="深圳叁色旅行，是由资深旅行从业专家团队创建，从事高端私人订制旅行服务的国际旅行社。叁色旅行的梦想是能够与客户分享专业知识并给予灵感，为客户提供最舒适的旅行体验。" />
<link href="webcss/global.css" type="text/css" rel="stylesheet" />
<link href="webcss/layout.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="webjs/jquery-1.8.3.min.js"></script>


<script language="javascript" src="My97DatePicker/WdatePicker.js" type="text/javascript"></script>
</head>
<body>
<div class="index_body">
<div class="index_top">
<div class="top_logo">
<h3>
定制您的人生体验</h3>
<a href="index.html">
<img src="webimages/index_02.png" width="117" height="121" alt="" /></a>
</div>
<div class="top_menu">
<div class="login">
<em style="display:none;">分享</em> <a href="login.html">登录</a>|<a href="register.html">注册</a> <span><a
href="job.html">招聘信息</a></span>
</div>
<ul>
<li class="fir_li" id="cur_1"><a href="index.html">首页</a></li>
<li id="cur_2"><a href="tuijian.html">推荐行程</a></li>
<li id="cur_3"><a href="dingzhi.html">私人定制</a></li>
<li id="cur_4"><a href="yanxue.html">叁色研学</a></li>
<li id="cur_5"><a href="about.html">关于我们</a></li>
<li id="cur_6"><a href="lvji.html">精彩旅迹 </a></li>
<li class="last_li">
<img src="webimages/index_22.png" width="18" height="17" alt="" />
<em><img src="webimages/wx.jpg" alt="" /></em>
</li>
<div class="clear">
</div>
</ul>
</div>
<div class="clear">
</div>
</div>

<div class="index_banenr">
<div class="looking_line">
<div class="line_bt">
<span class="cur1">精品线路推荐<em></em></span>
<span class="cur2" style="display:none;">酒店查询<em></em></span>
<span class="cur3" style="display:none;">机票预订<em></em></span>
<span class="cur4" style="display:none;">特别选择<em></em></span>
</div>
<div class="line_con">
<div class="zml_line">
<dl class="clearfix">
<dt class="cur1"><a href="28" imgid="1">欧洲</a></dt>
<dd>
<em><a href="28" imgid="1"></a></em>


<a href="瑞士" imgid="1">瑞士</a>

<a href="东欧" imgid="1">东欧</a>

<a href="希腊" imgid="1">希腊</a>

<a href="俄罗斯" imgid="1">俄罗斯</a>

<a href="冰岛" imgid="1">冰岛</a>

<a href="荷兰" imgid="1">荷兰</a>

<a href="葡萄牙" imgid="1">葡萄牙</a>

<a href="意大利" imgid="1">意大利</a>

<a href="西班牙" imgid="1">西班牙</a>

<a href="德国" imgid="1">德国</a>

<a href="英国" imgid="1">英国</a>

<a href="法国" imgid="1">法国</a>

<a href="芬兰" imgid="1">芬兰</a>

</dd>
</dl>
<dl class="clearfix">
<dt class="cur2"><a href="27" imgid="2">美洲</a></dt>
<dd>
<em><a href="27" imgid="2"></a></em>

<a href="南美" imgid="2">南美</a>

<a href="夏威夷" imgid="2">夏威夷</a>

<a href="美国西海岸" imgid="2">美国西海岸</a>

<a href="美国东海岸" imgid="2">美国东海岸</a>

<a href="美国黄石" imgid="2">美国黄石</a>

</dd>
</dl>
<dl class="clearfix">
<dt class="cur3"><a href="29" imgid="3">澳洲</a></dt>
<dd>
<em><a href="29" imgid="3"></a></em>


<a href="非洲" imgid="3">非洲</a>

<a href="亚洲" imgid="3">亚洲</a>

<a href="新西兰" imgid="3">新西兰</a>

<a href="澳大利亚" imgid="3">澳大利亚</a>

</dd>
</dl>
</div>
</div>
<div class="line_con">
<div class="zml_hotel">
<dl class="clearfix">
<dt>目的地</dt>
<dd>
<input name="" type="text" class="hotel_txt" /></dd>
</dl>
<dl class="clearfix">
<dt>入住日期</dt>

<dd class="cur">
<span><input id="startTime" name="startTime" οnfοcus="WdatePicker()" type="text" /></span>
</dd>
<dd class="cur">
<span><input id="ednTime" name="endTime" οnfοcus="WdatePicker()" type="text" /></span>
</dd>
</dl>
<dl class="clearfix">
<dt>目的地</dt>
<dd>
<span>不限...</span>
</dd>
</dl>
<dl class="clearfix">
<dt>关键词</dt>
<dd>
<input name="" type="text" class="hotel_txt" value="（选填）酒店名/地标/商圈" /></dd>
</dl>
<dl class="clearfix">
<dt> </dt>
<dd class="dd_cur">
<input name="" type="button" class="hotel_btn" value="搜索" /></dd>
</dl>
</div>
</div>
<div class="line_con">
<div class="zml_fly">
<div class="fly_type">
<span>航程类型</span>
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0" />单程</label>
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1" />往返</label>
</div>
<div class="fly_con clearfix">
<div class="fly_add">
<em>换</em>
<dl class="clearfix">
<dt>出发城市</dt>
<dd>
<span>不限...</span>
</dd>
</dl>
<dl class="clearfix">
<dt>到达城市</dt>
<dd>
<span>不限...</span>
</dd>
</dl>
</div>
<div class="fly_add fly_date">
<dl class="clearfix">
<dt>出发时间</dt>
<dd>
<span>不限...</span>
</dd>
</dl>
</div>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
/* 首页头部 */
.index_body{ /* background:url(../webimages/index_bg_01.png) no-repeat top; */}
.index_top{ width:1180px; margin:0px auto;}
.top_logo{ float:left; width:460px;}
.top_menu{ float:right; width:615px;}

.top_logo h3{ float:right; background:url(../webimages/h3_bg_03.png) no-repeat top; margin-top:60px; padding-top:30px; width:220px; font-size:16px; color:#332c2b;}
.top_menu{ text-align:right; color:#333;}
.login{ margin:20px 0px;}
.login a{ color:#333; padding:0px 5px;}
.login em{ background:url(../webimages/login_03.png) no-repeat left; padding-left:15px;}
.login span{ background:url(../webimages/login_06.png) no-repeat left; padding-left:10px;}
.top_menu ul{ background:url(../webimages/index_16.png) no-repeat right; height:50px; line-height:50px;}
.top_menu ul li{ float:left; background:#332c2b; height:50px;}
.top_menu ul li.fir_li{ background:url(../webimages/li_cur_bg2_03.png) no-repeat;}
.top_menu ul li.last_li{ padding:5px 20px; height:40px; background:#332c2b url(../webimages/wx_r_bg.jpg) no-repeat left; position:relative;}
.top_menu ul li a{ font-size:14px; color:#fff; display:block; padding:0px 20px;}
.top_menu ul li.fir_li a:hover{ background:url(../webimages/li_cur_bg_03.png) no-repeat;}
.top_menu ul li a:hover,.top_menu ul li.cur{background:#652c89;}
.top_menu ul li.last_li img{ display:block; padding-top:12px; cursor:pointer;}
.top_menu ul li.last_li em{ display:inline-block; position:absolute; right:0px; top:38px; display:none; z-index:2;}
.top_menu ul li.last_li em img{ width:130px;}
/* banner */
.index_banenr{ width:1180px; margin:40px auto 0px; overflow:hidden; height:400px;}
.looking_line{ float:left; width:660px; height:400px; overflow:hidden; position:relative; z-index:1;}
.banner_scroll{ float:right; width:520px;}

/* 查询切换 */
.line_bt{ height:60px; background:#362e2b; line-height:60px;}
.line_bt span{ font-size:14px; color:#fff; width:165px; display:inline-block; text-align:center; cursor:pointer; position:relative; z-index:1; float:left; height:60px;}
.line_bt span em{ position:absolute; left:50%; bottom:-4px; background:url(../webimages/index_45.png) no-repeat; width:8px; height:4px; display:none;}
.line_bt span.cur1{ background:url(../webimages/index_h_06.png) no-repeat 10px;}
.line_bt span.cur2{ background:url(../webimages/index_32.png) no-repeat 25px;}
.line_bt span.cur3{ background:url(../webimages/index_38.png) no-repeat 25px;}
.line_bt span.cur4{ background:url(../webimages/index_35.png) no-repeat 25px;}

.line_bt span.cur1.cur{background:#8957a1 url(../webimages/index_30.png) no-repeat 10px;}
.line_bt span.cur2.cur{background:#8957a1 url(../webimages/index_h_03.png) no-repeat 25px;}
.line_bt span.cur3.cur{background:#8957a1 url(../webimages/index_h_09.png) no-repeat 25px;}
.line_bt span.cur4.cur{background:#8957a1 url(../webimages/index_h_10.png) no-repeat 25px;}

/* 精品路线推荐 */
.line_con{ background:#652c89; color:#bcacca; height:660px; display:none; position:relative; width:660px;}
.zml_line{ padding:30px 20px 10px;}
.zml_line dl{ margin-bottom:30px; color:#bcacca;}
.zml_line dl dt{ float:left; width:142px;}
.zml_line dl dd{ float:right; width:478px;}

.zml_line dl dt a{color:#bcacca; font-size:13px; display:inline-block; width:142px;}
.zml_line dl dt.cur1 a{ background:url(../webimages/line_03.jpg) no-repeat 50px; min-height:60px; height:auto !important; height:60px; line-height:60px;}
.zml_line dl dt.cur2 a{ background:url(../webimages/line_13.jpg) no-repeat 50px; min-height:80px; height:auto !important; height:80px; line-height:80px;}
.zml_line dl dt.cur3 a{ background:url(../webimages/line_16.jpg) no-repeat 40px; min-height:60px; height:auto !important; height:60px; line-height:60px;}

.zml_line dl dd em{ display:inline-block; background:url(../webimages/line_08.jpg) no-repeat center; float:right; padding-top:15px;}
.zml_line dl dd em a{display:inline-block; width:11px; height:22px;}
.zml_line dl dd em a:hover{ background:none;}
.zml_line dl dd a{ color:#bcacca; display:inline-block; width:60px;text-align:center; padding:5px;}
.zml_line dl dd a:hover{ background:url(../webimages/line_05.jpg) no-repeat center; }

/* 酒店查询 */
.zml_hotel{ padding:35px 60px;}
.zml_hotel dl{ margin-bottom:15px;}
.zml_hotel dl dt{ float:left; width:70px; text-align:right; font-size:14px; line-height:38px; margin-right:10px;}
.zml_hotel dl dd{ float:left; width:440px; height:38px; border:1px solid #8957a1; line-height:38px;}
.zml_hotel dl dd.cur{ width:218px; margin-right:2px;}
.zml_hotel dl dd .hotel_txt{ width:430px; height:38px; line-height:40px; font-family:"微软雅黑"; background:none; padding-left:5px; color:#bcacca;}
.zml_hotel dl dd.cur span{ background:url(../webimages/sel_bg_03.jpg) no-repeat right; display:inline-block; height:38px; width:208px; cursor:pointer;}
.zml_hotel dl dd span{ background:url(../webimages/sel_bg_03.jpg) no-repeat right; display:inline-block; height:38px; width:430px;cursor:pointer; padding-left:10px;}
.zml_hotel dl dd .hotel_btn{ background:#8957a1; width:440px; height:38px; line-height:38px; font-weight:bold; text-align:center; font-size:16px; color:#fff; font-family:"微软雅黑";cursor:pointer;}
.zml_hotel dl dd.dd_cur{ margin-top:10px; border:none;}
#startTime,#ednTime{ width:160px; height:38px; background:none;color:#bcacca;}

/* 机票预定 */
.zml_fly{ padding:30px 20px;}
.fly_type{ color:#bcacca; font-size:14px; border-bottom:1px dashed #bcacca; padding-bottom:20px;}
.fly_type span{ display:inline-block; padding-right:10px;}
.fly_type label{ margin:0px 5px; display:inline-block; }
.fly_type label input{ margin-right:5px; display:inline-block;vertical-align:middle;}

.fly_con{ display:none;}
.fly_add{ float:left; padding:20px 0px 0px; position:relative; z-index:1; width:290px; height:140px;}
.fly_add em{ position:absolute; right:-18px; top:26px; background:url(../webimages/huan_03.png) no-repeat; width:21px; height:60px; display:inline-block; padding-top:35px; text-align:center;}
.fly_add dl{ margin-bottom:30px;}
.fly_add dl dt{ float:left; width:60px;font-size:14px; line-height:38px; margin-right:10px;}
.fly_add dl dd{ float:right; width:210px; height:38px; border:1px solid #8957a1; line-height:38px;}
.fly_add dl dd span{ background:url(../webimages/sel_bg_03.jpg) no-repeat right; display:inline-block; height:38px; width:200px; padding-left:10px; cursor:pointer;}
.fly_date{ float:right;}
.fly_submit{ padding-left:80px; border-bottom:1px dashed #bcacca; padding-bottom:40px;}
.fly_btn{ width:140px; height:35px; line-height:35px; text-align:center; color:#fff; font-weight:bold; background:#8957a1; cursor:pointer;}

...

3.JS

代码如下（节选示例）：

var $dp,WdatePicker;(function(){var _={
$wdate:true,
$dpPath:"",
$crossFrame:true,
doubleCalendar:false,
position:{},
lang:"auto",
skin:"default",
dateFmt:"yyyy-MM-dd",
realDateFmt:"yyyy-MM-dd",
realTimeFmt:"HH:mm:ss",
realFullFmt:"%Date %Time",
minDate:"1900-01-01 00:00:00",
maxDate:"2099-12-31 23:59:59",
startDate:"",
alwaysUseStartDate:false,
yearOffset:1911,
firstDayOfWeek:0,
isShowWeek:false,
highLineWeekDay:true,
isShowClear:true,
isShowToday:true,
isShowOthers:true,
readOnly:false,
errDealMode:0,
autoPickDate:null,
qsEnabled:true,

specialDates:null,specialDays:null,disabledDates:null,disabledDays:null,opposite:false,onpicking:null,onpicked:null,onclearing:null,oncleared:null,ychanging:null,ychanged:null,Mchanging:null,Mchanged:null,dchanging:null,dchanged:null,Hchanging:null,Hchanged:null,mchanging:null,mchanged:null,schanging:null,schanged:null,eCont:null,vel:null,errMsg:"",quickSel:[],has:{}};WdatePicker=U;var X=window,O="document",J="documentElement",C="getElementsByTagName",V,A,T,I,b;switch(navigator.appName){case"Microsoft Internet Explorer":T=true;break;case"Opera":b=true;break;default:I=true;break}A=L();if(_.$wdate)M(A+"skin/WdatePicker.css");V=X;if(_.$crossFrame){try{while(V.parent[O]!=V[O]&&V.parent[O][C]("frameset").length==0)V=V.parent}catch(P){}}if(!V.$dp)V.$dp={ff:I,ie:T,opera:b,el:null,win:X,status:0,defMinDate:_.minDate,defMaxDate:_.maxDate,flatCfgs:[]};B();if($dp.status==0)Z(X,function(){U(null,true)});if(!X[O].docMD){E(X[O],"onmousedown",D);X[O].docMD=true}if(!V[O].docMD){E(V[O],"onmousedown",D);V[O].docMD=true}E(X,"onunload",function(){if($dp.dd)Q($dp.dd,"none")});function B(){V.$dp=V.$dp||{};obj={$:function($){return(typeof $=="string")?this.win[O].getElementById($):$},$D:function($,_){return this.$DV(this.$($).value,_)},$DV:function(_,$){if(_!=""){this.dt=$dp.cal.splitDate(_,$dp.cal.dateFmt);if($)for(var A in $){if(this.dt[A]===undefined)this.errMsg="invalid property:"+A;this.dt[A]+=$[A]}if(this.dt.refresh())return this.dt}return""},show:function(){Q(this.dd,"block")},hide:function(){Q(this.dd,"none")},attachEvent:E};for(var $ in obj)V.$dp[$]=obj[$];$dp=V.$dp}function E(A,$,_){if(T)A.attachEvent($,_);else{var B=$.replace(/on/,"");_._ieEmuEventHandler=function($){return _($)};A.addEventListener(B,_._ieEmuEventHandler,false)}}function L(){var _,A,$=X[O][C]("script");for(var B=0;B<$.length;B++){_=$[B].src.substring(0,$[B].src.toLowerCase().indexOf("wdatepicker.js"));A=_.lastIndexOf("/");if(A>0)_=_.substring(0,A+1);if(_)break}return _}function F(F){var E,C;if(F.substring(0,1)!="/"&&F.indexOf("://")==-1){E=V.location.href;C=location.href;if(E.indexOf("?")>-1)E=E.substring(0,E.indexOf("?"));if(C.indexOf("?")>-1)C=C.substring(0,C.indexOf("?"));var G,I,$="",D="",A="",J,H,B="";for(J=0;J<Math.max(E.length,C.length);J++){G=E.charAt(J).toLowerCase();I=C.charAt(J).toLowerCase();if(G==I){if(G=="/")H=J}else{$=E.substring(H+1,E.length);$=$.substring(0,$.lastIndexOf("/"));D=C.substring(H+1,C.length);D=D.substring(0,D.lastIndexOf("/"));break}}if($!="")for(J=0;J<$.split("/").length;J++)B+="../";if(D!="")B+=D+"/";F=E.substring(0,E.lastIndexOf("/")+1)+B+F}_.$dpPath=F}function M(A,$,B){var D=X[O][C]("HEAD").item(0),_=X[O].createElement("link");if(D){_.href=A;_.rel="stylesheet";_.type="text/css";if($)_.title=$;if(B)_.charset=B;D.appendChild(_)}}function Z($,_){E($,"onload",_)}function G($){$=$||V;var A=0,_=0;while($!=V){var D=$.parent[O][C]("iframe");for(var F=0;F<D.length;F++){try{if(D[F].contentWindow==$){var E=W(D[F]);A+=E.left;_+=E.top;break}}catch(B){}}$=$.parent}return{"leftM":A,"topM":_}}function W(E){if(T)return E.getBoundingClientRect();else{var A={ROOT_TAG:/^body|html$/i,OP_SCROLL:/^(?:inline|table-row)$/i},G=null,_=E.offsetTop,F=E.offsetLeft,D=E.offsetWidth,B=E.offsetHeight,C=E.offsetParent;if(C!=E)while(C)

...