在很多人眼裡，CSS隻能用來設定文字的字型、顔色，好像功能一般。其實CSS如果和JavaScript結合使用可以制作出非常出色的頁面效果。大家知道，要想制作出條理清晰的網站，使用架構頁是一種簡便的方法，可是架構頁的制作相當繁瑣，而且在對齊上經常有些困難。本文将介紹如何使用CSS實作架構頁效果。
A、介紹原理
使用CSS制作架構頁的基本原理是将多個頁面的内容集合到一個檔案中，每個頁面的内容占據一個表格，再建立一個表格作導航欄，然後通過CSS控制表格的顯示/隐藏來實作架構頁效果。對于小網站而言，這種架構效果可以大大簡化維護工作。
圖1 頁面在編輯狀态
圖 1就是頁面在編輯狀态下的示意圖，在編輯狀态下，我們将“頁面A内容”所在的表格的顯示/隐藏屬性設定為“顯示”，而其他幾個表格的顯示/隐藏屬性設定為“隐藏”。然後為頂部的導航欄添加JavaScript代碼，使其在被單擊時對表格作相應的顯示/隐藏操作，進而實作架構頁效果。比如，使用者單擊了導航欄上的“頁面B”這個連結，那麼JavaScript代碼會将“頁面B内容”所在的表格設定為“顯示”，而将其他幾個表格設定為“隐藏”，如圖 2。
圖2 表格設定
B、制作過程
建立一個HTML檔案，建立CSS并加入若幹個表格，其中第一個用作導航欄，後面的每個表格對應一個頁面，具體步驟是：
1、 建立CSS
CSS是這個效果中最關鍵的，至少要有這樣兩個Class:
* tab-on：導航按鈕打開時的顯示效果
* tab-off：導航按鈕關閉時的顯示效果
例如：
.tab-on {
cursor: hand;
background-color: #FFFFFF;
width: 120px;
border: 1px solid;
}
.tab-off {
background-color: #CEE8FF;
cursor: hand;
width: 120px;
border: 1px solid;
}
注意使兩者的外觀有明顯差別便于使用者識别即可。
2、 建立HTML頁面并添加導航表格
第一個表格的制作比較簡單，典型的形式比如（這裡我們去掉了一些不太重要的語句，完整的HTML源代碼請參見示例檔案）：
<table>
<tr>
<td class="tab-on" id="navcell" OnMouseOver="switchCell(0)"> 頁面A</td>
<td class="tab-off" id="navcell" OnMouseOver="switchCell(1)"> 頁面B</td>
<td class="tab-off" id="navcell" OnMouseOver="switchCell(2)"> 頁面C</td>
<td class="tab-off" id="navcell" OnMouseOver="switchCell(3)"> 頁面D</td>
</tr>
</table>
這個表格中的列有統一的id，即navcell，在後面的代碼中将會用到。第一個列的class被設定為tab-on，也就是使其處于選中狀态，其他幾個列則處于不選中狀态。這裡通過OnMouseOver事件調用switchCell()函數，也就是說通過滑鼠懸停來實作頁面之間的切換，如果将其換成OnClick就可以實作單擊切換頁面的效果。
3、 建立用于存放頁面内容的表格
每個表格對應一個頁面，這些表格都隻能有一個列，例如：
<table id="tb" >
<tr>
<Td >頁面A的内容</td>
</tr>
</table>
<table id="tb" >
<tr>
<Td style="display:none" >頁面B的内容</td>
</tr>
</table>
<table id="tb" >
<tr>
<Td style="display:none">頁面C的内容</td>
</tr>
</table>
<table id="tb" >
<tr>
<Td style="display:none" >頁面D的内容</td>
</tr>
</table>
這幾個表格的id相同，這樣在後面代碼中可以通過數組分别對其進行引用，另外要特别注意，後面幾個表格具有“display:none”樣。也就是說使用者打開這個頁面的時候，後面幾個表格式不顯示的，隻有第一個表格顯示出來。從使用者的角度看，他隻看到了一個“頁面”。
4、 建立顯示/隐藏表格的JavaScript函數
在頁面的<Head>标記内部建立一個JavaScript函數，這個函數的作用就是根據使用者在導航表格中選擇的連結來對其他表格進行顯示隐藏操作。我們将這個函數命名為switchCell()：
function switchCell(n) {
for(i=0;i<navcell.length;i++){
navcell[i].className="tab-off";
tb[i].style.display="none";
}
navcell[n].className="tab-on";
tb[n].style.display="block";
}
witchCell()函數被調用時将會收到一個參數n，這個參數就是使用者打開的連結的索引号（從0開始編号），後面的代碼将會根據這個索引号顯示相應的表格并隐藏其他的表格。
例如當使用者打開“頁面B”連結時将會調用函數switchCell(1)。switchCell()接受到參數1後，首先利用一個循環對navcell[]和ta[]這兩個數組進行周遊：設定所有navcell[]中元素的className為tab-off，也就是将所有導航欄中的連結設定為關閉狀态；設定所有tb[]中元素的style.display為none，也就是隐藏所有含有頁面内容的表格。最後navcell[1]的className被設定為tab-on，而tb[1].style.display被設定為block，也就是将導航欄中的連結設定為打開狀态，并顯示頁面B内容所在的表格。
總而言之，這種用CSS實作架構頁效果的方法技巧性比較強，大家可以多揣摩，進行優化的餘地還很大，而且将表格作為數組來操作的方法在頁面設計中很值得借鑒。