DIV CSS 佈局教程網

我們看到在數碼藝術網的首頁上，四個主要欄目版塊中的列表是折疊式的。如下圖：

當鼠標經過第二個標題時，第一個列表項折疊，第二個展開。大家想到了Ajax技術，不過這裡的摘要信息並沒有異步更新，而是提早加載好的。所以折疊列表雖然具有Ajax技術的動作特點，卻不是Ajax。我只是通過Javascript控制<div>的隱藏和顯示。

折疊列表的主要思路是，用規范的 Javascript DOM 編程來切換<div>的CSS類。ListSummary為顯示，ListSummaryHidden為隱藏。（我把CSS的id和class名都用大寫字母開頭，以區別Javascript腳本程序裡小寫開頭的習慣用法。）

首先，把第一個版塊的HTML編寫好，大致如下：
<div id="NewDesignInfo">
  <div class="PanelHead1">
    <div><a href="#"><img _fcksavedurl=""#"><img" _fcksavedurl=""#"><img" src="Icon_Title/PanelNameDeisgnNews.jpg" /></a></div>
  </div>
  <div class="PanelBody1">
    <ul class="List">
      <li class="ListItem">
        <div><span class="ListCateLog">[<a href="#">子欄目一</a>] </span><span class="ListTitle"><a href="#">標題Javascript折疊式列表的制作</a></span><span class="ListDate">2005-05-12</span></div>
        <div class="ListSummaryHidden"><img src="TempImages/ThumbImg.jpg" class="ListThumb" />我們看到在數碼藝術網（http://www.hutda.cn）的首頁上，四個主要欄目版塊中的列表是折疊式的。如下圖，當鼠標經過第二個標題，第一個列表項折疊，第二個...</div>
      </li>
      <li class="ListItem">
        <div><span class="ListCateLog">[<a href="#">子欄目二</a>] </span><span class="ListTitle"><a href="#">標題Javascript折疊式列表的制作</a></span><span class="ListDate">2005-05-12</span></div>      
        <div class="ListSummaryHidden"><img src="TempImages/ThumbImg.jpg" class="ListThumb" />我們看到在數碼藝術網（http://www.hutda.cn）的首頁上，四個主要欄目版塊中的列表是折疊式的。如下圖，當鼠標經過第二個標題，第一個列表項折疊，第二個...</div>
      </li>
      <li class="ListItem">（這裡同上）</li>
      <li class="ListItem">（這裡同上）</li>
      <li class="ListItem">（這裡同上）</li>
    </ul>
  </div>
</div> （這裡我不對HTML做過多解釋，想必大多數讀者