DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS控制頁面展開和關閉
CSS控制頁面展開和關閉
編輯:CSS詳解     

<!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" lang="zh-CN">
 <head>
  <title> CSS控制頁面展開/關閉 </title>
  <meta http-equiv="Content-Type" content="text/Html; charset=gb2312" />
  <meta name="Generator" content="EditPlus" />
  <meta name="Author" content="" />
  <meta name="KeyWords" content="" />
  <meta name="Description" content="" />
  <STYLE>
   .expanded
   {
   
   }
   .collapsed
   {DISPLAY: none;
   }

   .line {  border-color: black black #006699; font-family: "宋體"; font-size: 12px; color: #006699; text-decoration: none; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px}
   .tab {  font-family: "宋體"; font-size: 12px; color: #ffffff; text-decoration: none}
   .xingcheng {  font-family: "宋體"; font-size: 12px; color: #FFFFFF; text-decoration: none; padding-top: 2px; padding-left: 4px}
   .xingchengt {  font-family: "宋體"; font-size: 12px; color: #000000; text-decoration: none; border-color: black #006699 #006699; border-style: inset; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
   .tab {  font-family: "宋體"; font-size: 12px; color: #000000; text-decoration: none}
  </STYLE>
  <script language="Javascript">
  <!--
   function outliner()
   {
    var child = document.all[event.srcElement.getAttribute("child",false)];
    if (null != child){
     if(child.className == "expanded")
     {
      child.className = "collapsed";
      return;
     }
     if(child.className == "collapsed")
     {
      child.className = "expanded";
      return;
     }
    }
   }
  //-->
  </script>
 </head>
 
 <body>
   <p align="center"><b>CSS控制頁面展開/關閉</b></p>
   <table bgcolor=#3333CC border=1 bordercolor=#000000 bordercolordark=#ffffff cellpadding=0 cellspacing=0 width="630" height="12" align="center" >
;      <tr>
             
          <td bgcolor=#3399CC width=22 align="center"><b><font color="#FFFFFF" size="1">>>></font></b><spacer type="block" width="5"></td>
              <td  class=xingcheng height=12 onMouseOver="this.bgColor='#3366cc';" onMouSEOut="this.bgColor='#3333CC';" width="503" >
               
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class=xingcheng >
              <tr>
                   
                <td style="cursor: hand" onClick="outliner()" child="1ALL" >興城古城、葫蘆島、筆架山二日游</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
    
        <div   class="collapsed"   id="1ALL" align="center">
          <div child="1ALL2" onClick="outliner()" align="center">
           
          <table class=xingchengt width="629" border="0" cellpadding="2" cellspacing="2">
            <tr>
               
              <td height="676">
                <p style=line-height:200%><font color="#3333CC">景點介紹 <font color="#000000"><br>
                  興城地處遼寧省西南部,距北京417公裡,海岸線107公裡,城、泉、山、海島五大景觀得天獨厚,盛產魚、蝦蟹、貝類等水產品。興城古城是我國目前保存最完整的明代四大古城之一,呈四方形,現今仍保持著明清時代的風貌。城中溫泉屬礦物弱鹼性食鹽天然礦泉,地下熔巖形成,發現於唐代,可治療各種疾病,有“聖水”之譽。海濱沙細灘緩、潮穩波清;筆架山位於錦州西南沿海,矗立於渤海之中,因其有三峰形似筆架而得名,山上有佛儒道三教的神聖及盤古氏,信者如織,從海岸到山腳下有一條潮汐沖擊而形成的“天橋”,隨潮漲潮落而若隱若現,是世界上獨一無二的奇景。</font><br>
                  線路行程</font><br>
                  D1. (星期六)<br>
                  07:00 嘉賓於北京市內指定集合地點乘坐空調旅游車,經京沈高速公路前往錦州筆架山風景區,途中於玉田服務區、山海關服務區休息,全部車程需6小時(出行時間可自行安排);<br>
                  13:30 午餐於筆架山風景區; <br>
                  14:30 乘快船前往筆架山,登山遠眺,游覽海門、山門、五母宮、三清閣、呂祖亭,活動3-4小時,走天橋神路返回岸邊,並可在神路上海中游玩,捕捉小蝦、蟹(注意請自帶厚底拖鞋、上島時間會根據潮汐變化調整);<br>
                  18:30 乘車返回興城;<br>
                  19:00 抵達後入住望海樓海景房雙人標准間、休息,自由活動;<br>
                  20:00—22:00 海濱自由活動,沙灘漫步,晚於酒店沐浴溫泉或進行海灘篝火晚會(自理);<br>
                  D2.(星期日)<br>
                  08:00 早餐於賓館內,整理行囊、退房;<br>
                  09:00 乘車前往“龍回頭”欣賞美麗的大海、葫蘆島軍港(活動20分鐘),返回興城古城,步行參觀興城古城,明代一條街、祖氏石坊、鐘鼓樓、自由市場;<br>
                  11:30 午餐於賓館內;<br>
                  12:30 返回北京,結束愉快的旅程。<br>
                  <font color="#3333CC">旅游報價</font> 300元/人<br>
                  <font color="#3333CC">服務標准</font><br>
                  包含:豪華空調旅游車、海景房標准間1晚(獨立衛生間、冷暖空調、彩電、房間內溫泉洗浴)、1早2正餐(正餐10菜1湯餐餐有海鮮)、筆架山門票(含景區內乘座單程快艇)、青旅全程陪同服務、旅行社責任險15萬元/人;<br>
                  不含:人身意外傷害保險、餐中酒水、客人各項因私消費及客人自費項目。<br>
                  <font color="#3333CC">聯系方式</font><br>
               &nbsp;  電話:010-67738076、67748432、86650936、67748474、87789687、13381477541
                  <br>
                  <font color="#3333CC">在線報名</font>
          

<form name="form1" method="post" action="baominggo.ASP"  target=_top;_blank  width=480 height=350>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
  <tr>
      <td><font color="#000000">團號:</font> <font color=ff0000>hbdj1</font> </td>
  </tr>
  </table>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
    <tr>
      <td width="142"><font color="#000000">姓名:</font>
        <input name="name" class="line" size="8" maxlength="8"
     >
        <font color="#000000">*</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td width="118"><font color="#000000">人數:</font>
        <input name="num" size="4" maxlength="4" class="line" >
        <font color="#ffffff"> <font color="#000000">*</font></font><font color="#000000">&nbsp;</font></td>
      <td width="290"><font color="#000000">SFZ號: </font>
<input name="id" class="line" size="18" maxlength="18"
     >
        <font color="#000000">*&nbsp; </font></td>
    </tr>
  </table>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
    <tr>
      <td><font color="#000000">特別說明:</font>
        <input name="line" size="60" maxlength="60" class="line" >
        <font color="#000000">*</font>&nbsp;</td>
    </tr>
  </table>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
    <tr>
      <td><font color="#000000">出行日期:</font>
        <select name="year" class="line">
          <option value="2004" selected>2004</option>
          <option value="2005">2005</option>
        </select>
        <font color="#000000">年</font>
        <select name="month" class="line">
          <option value="01"
        selected>01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        <font color="#000000">月</font>
        <select name="day" class="line">
          <option value="01"
        selected>01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
        &nbsp; <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
        <font color="#000000">日 </font></td>
    </tr>
  </table>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
    <tr>
      <td><font color="#000000">聯系地址:</font>
        <input name="addre" size="60" maxlength="60" class="line"
     >
        <font color="#000000">*</font> </td>
    </tr>
  </table>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
    <tr>
      <td width="335"><font color="#000000">聯系電話:</font>
        <input name="tel" size="15" maxlength="15" class="line" >
        <font color="#000000">*</font> </td>
      <td width="165"><font color="#000000">移動電話: </font>
        <input name="mtel" size="15" maxlength="15" class="line" >
      </td>
    </tr>
    <tr>
      <td width="335"><font color="#000000">E-MAIL:</font>
        <input name="email" maxlength="40" class="line" size="40" >
      </td>
      <td width="165"><font color="#000000">付款方式:</font>
        <select name="select" class="select">
          <option selected>上門收費</option>
          <option>櫃台交費</option>
        </select>
      </td>
    </tr>
 
    <tr>
      <td width="335"> <br>
      
        <input type="submit"  name=submit  value="提交" class="b">
        <input type="reset"   name="Submit22" value="重填" class="b">
      </td>
      <td width="165">&nbsp;</td>
    </tr>
  </table>
<input type=hidden name=j value=hbdj1>
<input type=hidden name=j1 value=>

</FORM>

              </td>
              </tr>
            </table>
          </div>
        </div>  

<table bgcolor=#3333CC border=1 bordercolor=#000000 bordercolordark=#ffffff cellpadding=0 cellspacing=0 width="630" height="12" align="center" >
        <tr>
             
          <td bgcolor=#3399CC width=22 align="center"><b><font color="#FFFFFF" size="1">>>></font></b><spacer type="block" width="5"></td>
              <td  class=xingcheng height=12 onMouseOver="this.bgColor='#3366cc';" onMouSEOut="this.bgColor='#3333CC';" width="503" >
               
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class=xingcheng >
              <tr>
                   
                <td style="cursor: hand" onClick="outliner()" child="3ALL" >北戴河、南戴河、自駕車休閒度假自由行(天天發)&nbsp;&nbsp;</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
            <div   class="collapsed"   id="3ALL" align="center">
          <div child="3ALL2" onClick="outliner()" align="center">
           
          <table class=xingchengt width="629" border="0" cellpadding="2" cellspacing="2">
            <tr>
               
              <td height="291">
                <p style=line-height:200%><font color="#3333CC">具體報價<font color="#000000"><br>
                  </font></font>距離海邊 10米左右:海景房688元/間;花園房588元/間;標准間488元/間<br>
                  距離海邊100米以內:海景房588元/間;花園房488元/間;標准間388元/間<br>
                  距離海邊200米以內:遠海房488元/間;花園房388元/間;標准間288元/間<br>
                  距離海邊500米以內:遠海房388元/間;花園房288元/間;標准間188元/間<br>
                  距離海邊500米以外:遠海房288元/間;花園房188元/間;標准間100元/間<br>
                  <font color="#3333CC">報價說明</font><br>
                  1、報價為7月15日--8月15日黃金季節、賓館散客周末價,周一至周四報價為周末價格50%--80%;<br>
                  2、一次訂房五間以上為團隊價,請另咨詢;<br>
                  3、避開黃金季節訂房,單團單議。<br>
                  <font color="#3333CC">聯系方式</font><br>
                  電話:010-67738076、67748432、86650936、67748474、87789687、13381477541
                  <br>
                  <font color="#3333CC">在線報名</font>

<form name="form1" method="post" action="baominggo.ASP"  target=_top;_blank  width=480 height=350>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
  <tr>
      <td><font color="#000000">團號:</font> <font color=ff0000>hbdj3</font> </td>
  </tr>
  </table>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
    <tr>
      <td width="142"><font color="#000000">姓名:</font>
        <input name="name" class="line" size="8" maxlength="8"
     >
        <font color="#000000">*</font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td width="118"><font color="#000000">人數:</font>
        <input name="num" size="4" maxlength="4" class="line" >
        <font color="#ffffff"> <font color="#000000">*</font></font><font color="#000000">&nbsp;</font></td>
      <td width="290"><font color="#000000">SFZ號: </font>
<input name="id" class="line" size="18" maxlength="18"
     >
        <font color="#000000">*&nbsp; &lt;/font></td>
    </tr>
  </table>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
    <tr>
      <td><font color="#000000">特別說明:</font>
        <input name="line" size="60" maxlength="60" class="line" >
        <font color="#000000">*</font>&nbsp;</td>
    </tr>
  </table>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
    <tr>
      <td><font color="#000000">出行日期:</font>
        <select name="year" class="line">
          <option value="2004" selected>2004</option>
          <option value="2005">2005</option>
        </select>
        <font color="#000000">年</font>
        <select name="month" class="line">
          <option value="01"
        selected>01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        <font color="#000000">月</font>
        <select name="day" class="line">
          <option value="01"
        selected>01</option>
   <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
        <font color="#000000">日 </font></td>
    </tr>
  </table>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
    <tr>
      <td><font color="#000000">聯系地址:</font>
        <input name="addre" size="60" maxlength="60" class="line"
     >
        <font color="#000000">*</font> </td>
    </tr>
  </table>
  <table width="500" border="0" cellspacing="0" cellpadding="0" class=tab>
    <tr>
      <td width="335"><font color="#000000">聯系電話:</font>
        <input name="tel" size="15" maxlength="15" class="line" >
        <font color="#000000">*</font> </td>
      <td width="165"><font color="#000000">移動電話: </font>
        <input name="mtel" size="15" maxlength="15" class="line" >
      </td>
    </tr>
    <tr>
      <td width="335"><font color="#000000">E-MAIL:</font>
        <input name="email" maxlength="40" class="line" size="40" >
      </td>
      <td width="165"><font color="#000000">付款方式:</font>
        <select name="select" class="select">
          <option selected>上門收費</option>
          <option>櫃台交費</option>
        </select>
      </td>
    </tr>
 
    <tr>
      <td width="335"> <br>
      
        <input type="submit"  name=submit  value="提交" class="b">
        <input type="reset"   name="Submit22" value="重填" class="b">
      </td>
      <td width="165">&nbsp;</td>
    </tr>
  </table>
<input type=hidden name=j value=hbdj3>
<input type=hidden name=j1 value=>
</FORM>

              </td>
              </tr>
            </table>
          </div>
        </div>
 </body>
</Html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved