你的位置:首页 > 网页设计

[网页设计]SearchFlight_Joker


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml">  <head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <title>DragonFlight</title>    <link href="css/SearchFlight.css" rel="stylesheet"type="text/css">    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>      <script type="text/javascript" src="js/SearchFlight.js"></script>  <style type="text/css">    .*{  margin:0;  padding:0;}/* banner begin*/.banner{  width:100%;  height:80px;  line-height: 65px;  text-align: left;  margin-left:65px;  padding-left: 160px;  font-family: arial bold;  font-size: 40px;  background: url(http://www.websbook.com/upimg/litimg/080214/03203011303.jpg) no-repeat left center;}/* banner end*//* main-navigation begin */.main-navigation {  width: 100%;  height:50px;  text-align: center;  display: inline-block;  background: #3b3c3b;}.main-navigation ul {  display: block;  list-style-type: none;  width:80%;  height:44px;  margin:3px auto;}.main-navigation ul li {  float: left;  display: inline-block;  height:44px;  padding: 0px 10px;}.main-navigation ul li a {  float: left;  display: inline-block;  height:45%;  line-height: 70%;  padding: 13px 5px;  font: bold 12px/12px Arial, Helvetica, sans-serif;  color: #FFF;  font-size: 15px;  text-decoration: none;  text-transform: uppercase;}.main-navigation ul li a:hover {  background-color: #fff;  color: #000;  border-radius:2px;}/* main-navigation end *//* base_top begin */.base_top{  background: url(http://image.so.com/v?ie=utf-8&src=hao_360so&q=travel&fromurl=http%3A%2F%2Fmy.pclady.com.cn%2Fp%2F1238671.html#ie=utf-8&src=hao_360so&q=travel&fromurl=http%3A%2F%2Fmy.pclady.com.cn%2Fp%2F1238671.html&lightboxindex=5&id=8dcafcdf5f48fd304bce18a6751a231d&multiple=0&itemindex=0&dataindex=30) no-repeat center center;}#search_box {  width: 50%;   margin: 5px auto;  z-index: 10;  border-radius: 6px;  color: #000;  font-size: 14px;  font-family: Tahoma, Arial, 'Hiragino Sans GB', "Microsoft Yahei", \5b8b\4f53, sans-serif;  padding: 5px;  background-color: #3498db;}.search-title .flight-tit {  width: 228px;}.search-title h3 {  margin-top: 4px;  line-height: 45px;  text-align: center;  color: #fff;  font-size: 25px;  font-family: "Microsoft Yahei",arial,sans-serif;  font-weight: 300;  border: solid #3498db;  border-width: 1px 1px 0;  border-radius: 6px;}.form_group {  margin: 0 0 15px;  position: relative;  line-height: 30px;}.search_filter,.search_filter form {  display: block;  margin-top: 0em;}.search_form {  position: relative;  overflow: hidden;  margin: 0 auto;  padding:10px 28px;  border-radius: 5px;  background-color: #fff;  color: #333;  font-size: 14px;}.search_form .form_group .form_fields label input{  width:50px;  display:inline-block;  margin:0;  padding:0;}.form_title{  float:left;  padding-right:5px;}/* .search_form .ico_info {  display: inline-block;  vertical-align: middle;  vertical-align: middle;  _vertical-align: -4px;  width: 12px;  height: 12px;  background-position: -210px -114px;} */.form_fields {  margin-left: 70px;}.input_radio{  margin-left: 23px;  padding-right: 10px;}.input_txt {  width: 322px;}.input_txt {  padding: 4px 0 4px 3px;  outline: medium none;  border-width: 1px;  border-style: solid;  border-color: #BBB #DDD #DDD #BBB;  box-shadow: 1px 1px 1px #DDD inset;  font-size: 14px;  font-family: Tahoma, Arial, 'Hiragino Sans GB', "Microsoft Yahei", \5b8b\4f53, sans-serif;  height: 20px;  line-height: 20px;}.watermark, .inputSel {  color: #999 !important;}.clearfix, .clearfix .form_group {   display: inline-block;}.search-traveler-types .form_title {  width: 61px;  top: 5px;}.multi_search_content .multiTitle{  width:40px;}.search-traveler-types .form_group .form_fields {  margin-left: 3px;  height:35px;}.search_form select {  padding: 2px;  _padding: 0;  height:25px;  width: 105px;  border: 1px solid #D7D7D7;  font-family: Arial, 'Hiragino Sans GB', "microsoft yahei",sans-serif;}option {  font-weight: normal;  display: block;  padding: 0px 2px 1px;  min-height: 1.2em;}.flight_direct{  float:left;}.Nonstop{  display: inline-block;  width:150px;  height:18px;  line-height: 18px;  text-align: center;  margin-left:45px;}.multi_form_group{  margin: 15px 10px;  position: relative;  line-height: 30px;  width:100%;  overflow: hidden;}.multi_label{  display: inline-block;  height:40px;  line-height: 40px;  margin: 0 auto;  text-align: center;}.multi_form_group .multi_form_content{  width:130px;  padding: 4px 0 4px 3px;  outline: medium none;  border: 1px solid;  border-color: #BBB #DDD #DDD #BBB;  box-shadow: 1px 1px 1px #DDD inset;  font-size: 14px;  font-family: Tahoma, Arial, 'Hiragino Sans GB', "Microsoft Yahei", \5b8b\4f53, sans-serif;  height: 20px;  line-height: 20px;}.form_group .add_trip{  display:block;  width:98%;  border:1px dashed #111;  text-decoration: none;  text-align: center;}#multform_last a:hover{  border:2px dashed #3498db;}.search_flight{  display: line-block;  width:150px;  height:40px;  line-height: 40px;  text-align: center;  background-color:#3498db;  border-radius: 5px;  font-family: arial;  float:right;}.search_flight a{  color:#fff;  text-decoration: none;  font-size:20px;}/* base_top end *//* SelectCity board style begin*/#menu1 a:link{   color:#2c3e50;   text-decoration:none;   font-family: Roboto light,regular,medium bold;}#menu1 a:visited {   color: #00F;   text-decoration:none;}#menu1 a:hover {   color: #c00;   font-family: Roboto light,regular,medium bold;}#select ul{  list-style:none;}.main{   clear:both;   padding:8px;   text-align:center;}#select{   text-align:left;   width:550px;   background-color: #ecf0f1;}.areas{   position:relative;   overflow:hidden;   height:22px;   width:545px;   text-align:left;}#menu1{   position:absolute;   top:0;   left:0;   z-index:1;}#menu1 li{   float:left;   display:block;   cursor:pointer;   width:72px;   text-align:center;   line-height:21px;   height:21px;}#menu1 li.hover{   background:#ecf0f1;   border-left:1px solid #acb5c9;   border-top:1px solid #acb5c9;   border-right:1px solid #acb5c9;   border-radius: 1px;}.cities{   clear:both;   margin-top:-1px;   border:1px solid #acb5c9;   height:150px;   width:543px;}#main1 ul{  display: none;}#main1 ul.block{  display: block;}.city{  width:60px;  height:20px;  line-height: 20px;  margin:2px 2px;  float:left;  font-family: arial;  font-size: 15px;}/* SelectCity board style end*/</style>        </head>  <body>    <div class="banner">DragonFlight</div>    <div class="nav_wrapper">        <div class="main-navigation">        <ul>          <li><a href="#">Home</a></li>          <li><a href="#">Flights</a></li>          <li><a href="#">Vacations</a></li>          <li><a href="#">Hotels</a></li>          <li><a href="#">Cars</a></li>          <li><a href="#">Insurance</a></li>          <li><a href="#">Destinations</a></li>          <li><a href="#">Blog</a></li>          <li><a href="#">Help</a></li>        </ul>      </div>    </div>        <div class="base_top"><!-- base_top begin -->            <div class="search_box search_goback" id="search_box"><!-- search_box begin -->                  <div class="search-title"><h3 class="flight-tit">Search Flights</h3></div>        <div class="search_content"><!-- search_content begin -->            <!-- <div >hhh</div> -->          <div class="middle">           <form action="" id="fmHomePage" method="">            <div class="search_form"><!-- search_form begin -->              <div class="form_group search_type"><!-- form_group begin -->                <label class="form_title"style="display:block;width:40px;">Type</label>                <div class="flight_type" id="search_type"><!-- form_fields begin -->                  <label><input type="radio" id="oneway"class="input_radio" value="S" name="FlightWay" checked="checked" onclick="onewayClick()" />One Way</label>                  <label><input type="radio" id="return"class="input_radio" value="D" name="FlightWay" onclick="returnClick()" />Return Trip</label>                  <label><input type="radio" id="multi"class="input_radio" value="M" name="FlightWay"onclick="multiClick()" />Multi City</label>                                  </div><!-- form_fields end -->              </div><!-- form_group end -->              <div class="search_baseform"><!-- search_baseform begin -->                <div class="form_group">                  <label class="form_title">From</label>                  <div class="form_fields">                    <input type="text" class="input_txt" id="homeCity" name="homecity_name"placeholder="Enter a name of City / Airport" onchange="RecordCityOrAirport()"/>                  </div>                </div>                <div class="form_group">                  <label class="form_title">To</label>                  <div class="form_fields">                    <input type="text" class="input_txt" id="destCity" name="destcity1_name" placeholder="Enter a name of City / Airport"onchange="RecordCityOrAirport()"/>                  </div>                </div>                <div class="form_group">                  <label class="form_title">Depart</label>                  <div class="form_fields">                    <input type="datetime-local" class="input_txt" id="DDate" name="DDatePeriod1" />                  </div>                </div>                <div class="form_group item2">                  <label class="form_title">Return</label>                  <div class="form_fields">                    <input type="datetime-local" class="input_txt" id="ADate" name="ADatePeriod1" disabled="true"/>                  </div>                </div>                <div id="search_traveler_types">                  <div class="search-traveler-types">                    <div class="clearfix">                      <label class="form_title">People</label>                      <div class="form_group item-first">                        <div class="form_fields">                          <select id="Quantity" name="Quantity">                              <option value="Adult1">Adult 1(12+)</option>                              <option value="Adult2">Adult 2</option>                              <option value="Adult3">Adult 3</option>                              <option value="Adult4">Adult 4</option>                              <option value="Adult5">Adult 5</option>                              <option value="Adult6">Adult 6</option>                              <option value="Adult7">Adult 7</option>                              <option value="Adult8">Adult 8</option>                              <option value="Adult9">Adult 9</option>                          </select>                        </div>                      </div>                      <div class="form_group">                        <div class="form_fields">                          <select id="ChildQuantity" name="ChildQuantity">                              <option value="Child0">Child 0(2:11)</option>                              <option value="Child1">Child 1</option>                              <option value="Child2">Child 2</option>                              <option value="Child3">Child 3</option>                              <option value="Child4">Child 4</option>                              <option value="Child5">Child 5</option>                              <option value="Child6">Child 6</option>                              <option value="Child7">Child 7</option>                              <option value="Child8">Child 8</option>                              <option value="Child9">Child 9</option>                          </select>                        </div>                      </div>                      <div class="form_group">                        <div class="form_fields">                          <select id="InfantQuantity" name="InfantQuantity">                              <option value="Infant0">Infant 0(2-)</option>                              <option value="Infant1">Infant 1</option>                              <option value="Infant2">Infant 2</option>                              <option value="Infant3">Infant 3</option>                              <option value="Infant4">Infant 4</option>                              <option value="Infant5">Infant 5</option>                              <option value="Infant6">Infant 6</option>                              <option value="Infant7">Infant 7</option>                              <option value="Infant8">Infant 8</option>                              <option value="Infant9">Infant 9</option>                          </select>                        </div>                      </div>                    </div>                  </div>                </div>                <div class="search_advform" id="search_advform"><!-- search_advform begin -->                <div class="form_group" id="SubClass">                  <div class="form_title">Class</div>                  <div class="form_fields">                    <select id="drpSubClass" name="drpSubClass">                      <option>Economy</option>                      <option>Business</option>                      <option>First</option>                    </select>                  </div>                </div>                              </div><!-- search_advform end -->                <div class="form_group non_stop">                  <div class="Nonstop">                  <label ><input type="checkbox" class="input_checkbox" id="flight_direct" name="flight_direct" value="1"/><span>Non-stop Only</span></label>                  </div>                </div>               </div><!-- search_baseform end -->              <div class="search_flight">                <a href="#"class="search">Search a Flight</a>              </div>            </div><!-- search_form end -->           </form>          </div>                   <div class="multi_search_content" style="display:none;"><!-- multi_search begin  -->              <div class="search_form">                <div class="form_group search_type"><!-- form_group begin -->                <label class="form_title"style="display:block;width:40px;">Type</label>                <div class="flight_type" id="search_type"><!-- form_fields begin -->                  <label><input type="radio" id="hide_oneway"class="input_radio" value="S" name="FlightWay"onclick="hide_onewayClick()"/>One Way</label>                  <label><input type="radio" id="hide_return"class="input_radio" value="D" name="FlightWay" onclick="hide_returnClick()"/>Return Trip</label>                  <label><input type="radio" id="hide_multi"class="input_radio" value="M" name="FlightWay" checked="checked"onclick="hide_multiClick()"/>Multi City</label>                                  </div><!-- form_fields end -->              </div><!-- form_group end -->                <div class="search_content" id="multi_search_content"><!-- multi_form begin -->                  <div class="1">                    <div class="multi_form_group">                      <span>Flight 1:</span>                      <label class="multi_label">Depart</label>                      <input type="datetime-local" class="multi_form_content" id="homeCity" name="homecity_name"/>                      <label class="multi_label">From</label>                      <input type="text" class="multi_form_content" id="multi_homeCity" name="homecity_name"placeholder="Enter City / Airport" onchange="Multi_RecordCityOrAirport()"/>                      <label class="multi_label">To</label>                      <input type="text" class="multi_form_content" id="multi_destCity" name="destCity_name"placeholder="Enter City / Airport"onchange="Multi_RecordCityOrAirport()"/>                    </div>                  </div>                  <div class="2">                    <div class="multi_form_group">                      <span>Flight 2:</span>                      <label class="multi_label">Depart</label>                      <input type="datetime-local" class="multi_form_content" id="homeCity" name="homecity_name"/>                      <label class="multi_label">From</label>                      <input type="text" class="multi_form_content" id="homeCity" name="homecity_name"placeholder="Enter City / Airport"/>                      <label class="multi_label">To</label>                      <input type="text" class="multi_form_content" id="destCity" name="destCity_name"placeholder="Enter City / Airport"/>                                         </div>                  </div>                  <div class="3">                    <div class="multi_form_group">                      <span>Flight 3:</span>                      <label class="multi_label">Depart</label>                      <input type="datetime-local" class="multi_form_content" id="homeCity" name="homecity_name"/>                      <label class="multi_label">From</label>                      <input type="text" class="multi_form_content" id="homeCity" name="homecity_name"placeholder="Enter City / Airport"/>                      <label class="multi_label">To</label>                      <input type="text" class="multi_form_content" id="destCity" name="destCity_name"placeholder="Enter City / Airport"/>                    </div>                  </div>                </div><!-- multi_form end -->                <div class="search_multiform" id="search_multi"><!-- search_multiform begin -->                <div id="flight_multiple"></div>                <div class="form_group" id="multform_last">                  <a href="javascript:void()" class="add_trip" id="addTrip"onclick="addFrom()"><h2 style="display:inline-block;margin:0;padding:0;" >+</h2>AddForm</a>                </div>                <div id="flight_multiple_traveler_types"></div>              </div><!-- search_multiform end -->                <div class="addition"><!-- addition begin -->                  <div id="search_traveler_types">                  <div class="search-traveler-types"><!-- search-traveler-types begin -->                    <div class="clearfix"><!-- clearfix begin -->                      <label class="form_title multiTitle">People</label>                      <div class="form_group item-first"><!-- form_group begin -->                        <div class="form_fields">                          <select id="Quantity" name="Quantity">                              <option value="Adult1">Adult 1(12+)</option>                              <option value="Adult2">Adult 2</option>                              <option value="Adult3">Adult 3</option>                              <option value="Adult4">Adult 4</option>                              <option value="Adult5">Adult 5</option>                              <option value="Adult6">Adult 6</option>                              <option value="Adult7">Adult 7</option>                              <option value="Adult8">Adult 8</option>                              <option value="Adult9">Adult 9</option>                          </select>                        </div>                      </div><!-- form_group end -->                      <div class="form_group"><!-- form_group begin -->                        <div class="form_fields">                          <select id="ChildQuantity" name="ChildQuantity">                              <option value="Child0">Child 0(2:11)</option>                              <option value="Child1">Child 1</option>                              <option value="Child2">Child 2</option>                              <option value="Child3">Child 3</option>                              <option value="Child4">Child 4</option>                              <option value="Child5">Child 5</option>                              <option value="Child6">Child 6</option>                              <option value="Child7">Child 7</option>                              <option value="Child8">Child 8</option>                              <option value="Child9">Child 9</option>                                                      </select>                        </div>                      </div><!-- form_group end -->                      <div class="form_group"><!-- form_group begin -->                        <div class="form_fields">                          <select id="InfantQuantity" name="InfantQuantity">                              <option value="Infant0">Infant 0(2-)</option>                              <option value="Infant1">Infant 1</option>                              <option value="Infant2">Infant 2</option>                              <option value="Infant3">Infant 3</option>                              <option value="Infant4">Infant 4</option>                              <option value="Infant5">Infant 5</option>                              <option value="Infant6">Infant 6</option>                              <option value="Infant7">Infant 7</option>                              <option value="Infant8">Infant 8</option>                              <option value="Infant9">Infant 9</option>                          </select>                        </div>                      </div><!-- form_group end -->                      <div class="form_fields"style="display:inline-block;"><!-- form_fields begin -->                        <div class="form_title multiTitle">Class</div>                        <select id="drpSubClass" name="drpSubClass">                          <option>Economy</option>                          <option>Business</option>                          <option>First</option>                        </select>                      </div><!-- form_fields end -->                    </div><!-- clearfix end -->                                      </div><!-- search-traveler-types end -->                </div>                                  </div><!-- addition end -->                <div class="search_flight">                <a href="#"class="search">Search a Flight</a>              </div>              </div>            </div><!-- multi_search end  -->        </div><!-- search_content end -->    </div><!-- search_box end -->      </div><!-- base_top end --><textarea id="rn01" name="textarea" rows="100%" cols="100%"></textarea> <br /><input style="cursor: hand" onclick="runEx('rn01')" type="button" value="Run"><script type="text/javascript">function runEx(cod1) { cod=document.all(cod1) var code=cod.value; if (code!=""){  var newwin=window.open('','',''); //open a new window newwin。  newwin.opener = null   newwin.document.write(code); //output code in new window  newwin.document.close(); }}   //respond for choice of didfferent type flightfunction onewayClick() {   $("#ADate").attr('disabled', true);  $("#return").removeAttr("checked");   $("#multi").removeAttr("checked");  $("#oneway").attr("checked", "checked");  $("#oneway").click();  } function returnClick() {   $("#ADate").attr('disabled', false);  $("#oneway").removeAttr("checked");   $("#multi").removeAttr("checked");  $("#return").attr("checked", "checked");  $("#return").click();  }  function multiClick() {   $(".middle").hide();  $(".multi_search_content").show();  $("#hide_oneway").removeAttr("checked");   $("#hide_multi").removeAttr("checked");  $("#hide_multi").attr("checked", "checked");  $("#hide_multi").click();  }function hide_onewayClick() {   $(".multi_search_content").hide();  $(".middle").show();  $("#ADate").attr("disabled",true);  $("#return").removeAttr("checked");   $("#multi").removeAttr("checked");  $("#oneway").attr("checked", "checked");  $("#oneway").click(); } function hide_returnClick() {   $(".multi_search_content").hide();  $(".middle").show();  $("#ADate").attr('disabled', false);  $("#oneway").removeAttr("checked");  $("#multi").removeAttr("checked");  $("#return").attr("checked", "checked");  $("#return").click();}                                                         /*keep input 'homeCity' and 'multi_homeCity'、'destCity' and 'multi_destCity' the same when value changed*/function RecordCityOrAirport(){  var homeCity_value=$("#homeCity").value;  var destCity_value=$("#destCity").value;  $("#multi_homeCity").value=homeCity_value;  $("#multi_destCity").value=destCity_value;}function Multi_RecordCityOrAirport(){  var multi_homeCity_value=$("#multi_homeCity").value;  var multi_destCity_value=$("#multi_destCity").value;  $("#homeCity").value=multi_homeCity_value;  $("#destCity").value=multi_destCity_value;}/*insert a new form*/function addFrom(){    var element=document.getElementById("multi_search_content");  var topdiv=document.createElement("div");  var newForm=document.createElement("div");  newForm.className="multi_form_group";  var len=element.getElementsByClassName('multi_form_group').length+1;  var newSpan=document.createElement("span");  var spanNode=document.createTextNode("Flight "+len+": ");  newSpan.appendChild(spanNode);  newForm.appendChild(newSpan);    var newLabel=document.createElement("Label");  var labelNode=document.createTextNode(" Depart ");  newLabel.appendChild(labelNode);  newForm.appendChild(newLabel);   var newInput=document.createElement("input");  newInput.className='multi_form_content';  newInput.type='datetime-local';  newInput.placeholder='Enter City / Airport';  newForm.appendChild(newInput);    var newLabel=document.createElement("Label");  var labelNode=document.createTextNode(" From ");  newLabel.appendChild(labelNode);  newForm.appendChild(newLabel);  var newInput=document.createElement("input");  newInput.className='multi_form_content';  newInput.type='text';  newInput.placeholder='Enter City / Airport';  newForm.appendChild(newInput);  var newLabel=document.createElement("Label");  var labelNode=document.createTextNode(" To ");  newLabel.appendChild(labelNode);  newForm.appendChild(newLabel);  var newInput=document.createElement("input");  newInput.className='multi_form_content';  newInput.type='text';  newInput.placeholder='Enter City / Airport';  newForm.appendChild(newInput);    var newLabel=document.createElement("a");  var labelNode=document.createTextNode(" X ");  topdiv.className=len;  topdiv.appendChild(newForm);  element.appendChild(topdiv);  /*method 2: cloneNode    var sourceNode = document.getElementById("div-0"); // get a node object     var clonedNode = sourceNode.cloneNode(true); // clone node     clonedNode.setAttribute("id", "div-" + i); // correct id,avoid repeating     sourceNode.parentNode.appendChild(clonedNode); // insert from parentNode   */}</script></body></html>