4講項目實戰js展示區

#4講項目實戰js展示區
 
 *{margin:0px;padding:0px;}
 #Top{width:100%;height:149px;background:url("../images/headbg.jpg");}/*背景圖片headbg平鋪滿整個Top盒子*/
 #Top .head{width:1000px;height:30px;margin:0px auto;/*head水平居中*/font-size:13px;font-family:"微軟雅黑";color:#666;line-height:30px;}
 #Top .head span{color:#e20076;font-weight:bold;padding:0px 4px;}
 #Top .head a{color:#666;text-decoration:none;font-weight:bold;padding:0px 5px;}
    #Top .head a:hover{color:#e20076;}
 #header {height:70px;width:1000px;margin:0px auto;}
 #header .banner{width:221px;height:44px;float:left;padding-top:14px;}
 #header .logo{width:510px;height:70px;float:left;line-height:70px;font-size:16px;font-family:"微軟雅黑";padding-left:80px;}
 #header .logo a{font-weight:bold;text-decoration:none;color:#000;padding:0px 20px;float:left}
 #header .logo a:hover{color:#e20076;}
 #header .search{width:180px;height:35px;float:right;padding-top:18px;position:relative;}
 #header .search input.txt{width:140px;height:23px;border:1px solid #e1e1e1;font-size:12px;color:#999;text-indent:10px;position:absolute;left:0px;top:20px;}
 #header .search input.but{width:26px;height:25px;background:url('../images/sosoh.jpg');border:0px;position:absolute;left:141px;top:20px;}
 #Top .Nav{height:49px;width:1000px;margin:0px auto;}
 #Top .Nav .mainNav{width:550px;height:49px;float:left;}
 #Top .Nav .mainNav  ul li{list-style-type:none;width:100px;height:49px;float:left;line-height:49px;text-align:center;font-size:16px;font-family:"微軟雅黑";position:relative;}
 #Top .Nav .mainNav  ul li a{color:#fff;text-decoration:none;}
 #Top .Nav .mainNav ul li .menu{display:none;width:350px;border:2px solid #e10076;border-top:0px;position:absolute;top:49px;left:0px;background:#fff;filter:Alpha(opacity=90);-moz-opacity:0.9;opacity:0.9;padding:10px;}
 #Top .Nav .smallNav{width:150px;height:49px;float:right;}
 #Top .Nav .mainNav  ul li.hover{background:#b80064;}
 #Top .Nav .mainNav  ul li p{text-align:left;line-height:35px;border-bottom:1px dotted #ddd;}
 #Top .Nav .mainNav  ul li p span{font-weight:bold;}
 #Top .Nav .mainNav  ul li p  a{color:#666;}
 #Top .Nav .mainNav  ul li p  a:hover{color:#b80064;}
 #Top .Nav .smallNav{line-height:49px;font-size:14px;font-family:"微軟雅黑";}
 #Top .Nav .smallNav a{color:#fff;text-decoration:none;float:left;padding:0px 10px;}
 #Top .Nav .smallNav a:hover{text-decoration:underline;}
 #Adv{width:100%;height:421px; background:red; position:relative;}
 #Adv .ImgList{width:100%; height:421px; position:absolute;/*絕對定位*/ left:0px; top:0px;z-index:2;}
 #Adv ul.button li{width:50px; height:10px; background:#000; border:1px dotted #fff; float:left; margin:0px 5px; list-style-type:none; }
 #Adv ul.button{ height:20px; position:absolute;left:43%; bottom:50px;z-index:3; display:inline-block;/*行內塊級元素*/}
 #Adv ul.button li.hover{background:#fff;}
 #Part1{width:1000px; height:460px; margin:35px auto;}
 #Part1 #Part1_L{width:353px; height:442px; background:blue; float:left;}
 #Part1 #Part1_R{width:560px; height:442px; padding:0px 30px; background:url("../images/vl.jpg") no-repeat,url("../images/vr.jpg") no-repeat right top; float:right;}
 #Part1 #Part1_R p.biaoti{height:90px; background:url("../images/lxtjbg.jpg") no-repeat right bottom; border-bottom:1px dashed #c9c9c9;}
 #Part1 #Part1_R ul.select_but{border-bottom:1px solid #eee; height:32px;}
 #Part1 #Part1_R ul.select_but li{list-style-type:none; height:32px; width:84px;  float:left;font-size:14px;font-family:"微軟雅黑"; text-align:center; line-height:32px;background:url("../images/lxtjcdbg.jpg") no-repeat right bottom;}
 #Part1 #Part1_R ul.select_but li.hover{background-image:url("../images/lxtjcdxg.jpg");}
 #Part1 #Part1_R .select_con{height:300px; margin-top:20px; overflow:hidden;}
 #Part1 #Part1_R .select_con .select_content{height:300px; }
 #Part1_R .select_con .select_content ul.sel_imgList li{width:126px; height:124px; float:left;list-style-type:none;margin:0px 6px 0px 7px; position:relative;/*相對定位*/}
 #Part1_R .select_con .select_content ul.sel_imgList li p{/*height:41px;*/ background-color:rgba(187,14,115,0.7);color:#fff; font-size:12px;font-family:"微軟雅黑"; padding:0px 5px; line-height:20px;position:absolute; left:0px; bottom:0px; height:0px; overflow:hidden;}

 <!doctype html>
<html lang="zh-cn">
<head>
<meta charset="gb2312">
<meta name="author" content="李明傑">
<meta name="keywords" content="湖南海外旅遊有限公司 湖南長沙最好旅行社 湖南海外旅行社 長沙旅行社排名">
<meta name="description" content="湖南海外旅行社是湖南首批五星級旅行社,連續三年評爲全國百強旅行社,國家特許經營出境 遊組團社,長沙從事旅遊業務最早、綜合實力最強的旅遊公司,主營出境旅遊、國內旅遊、入 境旅遊、會議展覽。">
<title>湖南海外旅遊</title>
 <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
 <div id="Top">
 <!-- 頭部信息開始 -->
  <div class="head"><img src="images/cart.png" align="absmiddle"/>&nbsp全省免費服務熱線: <span>96556</span> <span>0731-84635555</span>旅行社同行熱線:<span>0731-84402588</span> <a href="#">登陸</a><a href="#">註冊</a> 
  </div>
 <!-- 頭部信息結束 -->
 <!-- banner開始 -->
   <div id="header">
    <div class="banner"><a href="#"><img src="images/logo.png"/></a></div>
    <div class="logo">
    <a href="#">首 頁</a>
    <a href="#">出境遊</a>
    <a href="#">國內遊</a>
    <a href="#">特價遊</a>
    <a href="#">籤 證</a>
    </div>
    <div class="search">
    <form>
    <input type="text" class="txt" value="輸入目的地" />
    <input type="submit" class="but"  value=""/>
    </form>
    </div>
   </div>
 <!-- banner結束 -->
 <!-- 導航開始 -->
  <div class="Nav">
   <div class="mainNav">
    <ul>
     <li ><a herf="#">出境跟團遊</a>
      <div class="menu">
       <p><span>臺灣港澳:</span> <a href="#">臺灣 </a>|<a href="#"> 香港 </a>| <a href="#">澳門</a></p>
       <p><span>東南亞:</span> <a href="#">泰國</a> | <a href="#">新加坡</a> | <a href="#">馬來西亞</a> | <a href="#">越南 </a>| <a href="#">柬埔寨</a> | <a href="#">老撾 </a>| <a href="#">印度</a> | <a href="#">尼泊爾</a></p>
      </div>
     </li>
     <li><a herf="#">國內跟團遊</a>
         <div class="menu"></div>
     </li>
     <li><a herf="#">國內自由行</a>
      <div class="menu"></div>
     </li>
     <li><a herf="#">湖南周邊遊</a>
      <div class="menu"></div>
     </li>
     <li><a herf="#">出境自由行</a>
      <div class="menu"></div>
     </li>
    </ul>
   </div>
   <div class="smallNav">
   <a herf="#">泰國</a><a herf="#">臺灣</a><a herf="#">普吉</a>
   </div>
  </div>
 <!-- 導航結束 -->
 </div>
 <!--網站頭部結束--> 
<!--廣告開始-->
<div id="Adv">
 <!--圖片列表-->
 <div class="ImgList" style="background:url('images/adv1.jpg') center"></div>
 <div class="ImgList" style="background:url('images/adv2.jpg') center"></div>
 <div class="ImgList" style="background:url('images/adv3.jpg') center"></div>
 <div class="ImgList" style="background:url('images/adv4.jpg') center"></div>
 
 <!--輪播的按扭-->
 <ul class="button">
  <li class="hover"></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>
<!--廣告結束-->
<!--第一部分內容開始-->
<div id="Part1">
 <div id="Part1_L"><img src="images/p1.jpg" /></div>
 <div id="Part1_R">
  <p class="biaoti"><img src="images/introlx.jpg" /></p>
  <!--選項卡按扭開始-->
  <ul class="select_but">
   <li  class="hover">新品推薦</li>
   <li>熱門推薦</li>
   <li>高端定製</li>
  </ul>
  <!--選項卡按扭結束-->
  
  <!--內容區開始-->
  <div class="select_con">
   <div class="select_content">
    <ul class="sel_imgList">
     <li><img src="images/intro.jpg" width="126" height='124' />
      <p>我帶老伴遊江南華東感恩關愛主題旅遊</p>
     </li>
     <li><img src="images/intro.jpg" width="126" height='124' />
      <p>我帶老伴遊江南華東感恩關愛主題旅遊</p>
     </li>
     <li><img src="images/intro.jpg" width="126" height='124' />
      <p>我帶老伴遊江南華東感恩關愛主題旅遊</p>
     </li>
     <li><img src="images/intro.jpg" width="126" height='124' />
      <p>我帶老伴遊江南華東感恩關愛主題旅遊</p>
     </li>
    </ul>
   </div>
   <div class="select_content">熱門推薦</div>
   <div class="select_content">高端定製</div>
  </div>
  <!--內容區結束-->
 </div>
</div>
<!--第一部分內容結束-->
 <!--整站建設步驟如下:
  1.構建一個寬度100% 高度149px 這樣一個長方形,爲了保證瀏覽器的兼容,我們加了*{margin:0px;padding:0px;}Top樣式中的寬度100%也可以不寫,因爲瀏覽器已給出默認爲100%寬。
  2.給個長方形盒子,添加一個背景圖片,背景圖片默認的會沿着水平方向平鋪
  3.Top盒子裏頭部信息的構建 head裏假如圖片標籤cart圖像
  4.如何控制圖片和文字對齊方式在垂直方向居中,控制文字的樣式。單獨控制某些文字可以加span標準單獨控制樣式。
  5.a標籤特性,如何控制a標籤的樣式,去除標籤自身的樣式並重新定義,a標籤的一個僞類a:hover。
  6.構建header盒子,設置居中,在裏面構建三個盒子,設置三個盒子的浮動定位,
  7.製作導航,提到了a標籤做導航佈局時候各個標籤間會有一個空隙的兼容問題(浮動)來解決。
  8.製作站內搜索部分,構建兩個盒子 ,
  9.單獨建立一個樣式文件,通過外部引用調用樣式表,注意外部CSS樣式中引用的圖片的位置變化,要向上返回一級目錄
  10.構建用來放導航的長方形,然後居中,在這個長方形裏構建連個小盒子 浮動佈局 一個在左一個在右
  11.利用ul無序列表製作導航,這裏麼複習了以下文字的樣式效果和a標籤樣式設置。
  12.構建長方形div,利用相對和絕對定位來控制它的位置。並且利用了透明技術和邊框上邊框的隱藏,代碼的優先級別,後面的會覆蓋前面的樣式
  13.js 製作菜單活動效果
  14.二級菜單裏面的樣式,特別強調了,代碼的一個繼承關係 右邊小導航的製作
  15.構建長方形div ,寬度1000px  高度 460px  設置水平距中 margin:0px auto;
  16.在這個長方形裏面,構建兩個小的長方形,一個左浮動距左,一個右浮動距右
  17.如何右邊的長方形,放兩張背景圖片 backrgound:url(""),url("");
  18.上在的標題部分的處理方法,一個圖片,一個背景圖 (同時複習了內邊距的概念)  添加底邊框線
  19.利用ul 無序列表來製作選項卡按扭  backgound 包括了(background-image/repeat/color/position)
  20.構建一個長方形,用爲放我們的選項卡對應的內容切換區
 -->
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" >
  var d_Value=$(".search input.txt").val();// 獲取到它的默認值
  //獲取焦點時,即鼠標點擊到輸入框時,將文本框清空內容
  $(".search input.txt").focus(function(){// $查找獲取對象元素.txt 鼠標放上時文本輸入框獲取焦點
   //$(this)等同於我們的$(".search input.txt")
   if($(this).val()==d_Value){//如果文本框值爲默認值"輸入目的地點",則重新賦值文本框內容爲空
    $(this).val("");
   }
  });
  //失去焦點時
  $(".search input.txt").blur(function(){// $查找獲取對象元素.txt 鼠標放上時文本輸入框獲取焦點
   //$(this)等同於我們的$(".search input.txt")
   if($(this).val()==""){//如果值爲空,則賦值爲默認值"輸入目的地點"
    $(this).val(d_Value);
   }
  });
  //二級菜單的現實和隱藏。移動鼠標到li標籤上和離開li標籤所執行的兩個函數即兩個動作
  $(".Nav .mainNav ul li").hover(function(){
   $(this).find(".menu").show();//顯示menu盒子即二級菜單
   $(this).addClass("hover");//給li標籤添加hover樣式
   },function(){
    $(this).find(".menu").hide();//隱藏menu盒子即二級菜單
    $(this).removeClass("hover");//去除li標籤hover樣式
  
  });
  //=======廣告輪播圖的實現=======
 var _index=0;//初始化序列
 var timePlay=null;
 $("#Adv .ImgList").eq(0).show().siblings("div").hide();//最開始顯示第一張
 $("ul.button li").hover(function(){/*鼠標在上面*/ 
  clearInterval(timePlay);//清處定時播放器
  _index=$(this).index();//獲取當前li序列號
  //alert(_index);//彈窗
  $(this).addClass("hover").siblings().removeClass("hover");//顯示按扭
  //fadeIn  淡入  fadeOut 淡出  
  $("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();//顯示圖片
 },function(){/*鼠標移開*/
  autoPlay();//啓用定時播放器
 });
 //自動輪播
 //構建自動輪播的函數
 function autoPlay(){
  //alert("sss");
  //設置定時器
  timePlay=setInterval(function(){
   _index++;
   if(_index<4){
    if(_index==3){_index=-1; }//變成-1 
    $("ul.button li").eq(_index).addClass("hover").siblings().removeClass("hover");//顯示按扭
    $("#Adv .ImgList").eq(_index).fadeIn().siblings("div").fadeOut();//顯示圖片
     
   }else{_index=-1;/*設置序列號爲-1,跳到播放第一張圖片*/}
  },2000); 
 };
 autoPlay();//調用和執行
 
 //路線推薦先項卡效果
 //鼠標滑上去的效果 mouseover
 $("ul.select_but li").mouseover(function(){
  $(this).addClass("hover").siblings().removeClass("hover");//改變選項卡樣式
  //$(this).index();序列號
  $(".select_con .select_content").eq($(this).index()).show().siblings().hide();//改變內容區
 });
 //路線推薦 圖片文字滑動效果
 $("ul.sel_imgList li").hover(function(){
   $(this).find("p").stop().animate({height:"41px"},200)
 },function(){
   $(this).find("p").stop().animate({height:"0px"},200)
   });
 </script>
</body>
</html>


圖片

圖片

圖片

圖片
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章