使用HTML＋CSS編寫一個靈活的Tab頁

轉自：http://www.javaeye.com/topic/52036

最近在研究CSS，正好結合項目做了一個靈活的Tab頁，使用純HTML＋CSS實現，正好總結一下。 

首先看一下預覽介面： 
 
範例HTML可以訪問：http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html 

下面開始講述一下完成上述頁面的步驟。 

1. 構建HTML 
構建HTML是整個過程最基礎的部分。我們構建HTML比較關鍵的一個原則就是“還HTML標籤其本來的含義”。所以在這裡，我們應該合理分析一下期望做到的HTML的結構的情況，並加以分析，選擇比較合適的HTML標籤，而不是採用非標準的Table布局或者充斥著大量div和class的布局方式。事實上，現在存在著一種誤區，就是凡事採用了DIV＋CSS的方式進行頁面編程的就是Web標準的，其實這是完全錯誤的觀點，很容易就導致了“多div症”（divitus）或者“多類症”（classitis）。 
回到正題，我們分析一下頁面樣式，可以將整個Tab頁分成2個部分，分別是一級菜單和二級菜單，他們有類似的特點，並以橫向方式排列。HTML標籤中的無序列表就可以反映出這種邏輯關係。所以我們分別採用2個無序列表來表示一級菜單和二級菜單。代碼如下： 

 

HTML代碼 

1. <div class="navg">  
2.     <div id="attendance" class="mainNavg">  
3.         <ul>  
4.             <li id="attendanceNavg"><a href="#">考勤管理</a></li>  
5.             <li id="teachNavg"><a href="#">教學管理</a></li>  
6.             <li id="communicationNavg"><a href="#">家校互連</a></li>  
7.             <li id="systemNavg"><a href="#">系統管理</a></li>  
8.         </ul>  
9.     </div>      
10.     <div id="dailyAttendance" class="secondaryNavg">  
11.         <ul>  
12.             <li id="dailyAttendanceNavg"><a href="#">當天考勤</a></li>  
13.             <li id="leaveApproveNavg"><a href="#">請假審批</a></li>  
14.             <li id="attendanceStatisticsNavg"><a href="#">考勤統計</a></li>  
15.             <li id="attendanceCollectNavg"><a href="#">考勤匯總</a></li>  
16.         </ul>  
17.     </div>  
18. </div>  

其中，2個div將菜單層級劃分開。其實在以後還會有其他的功效。此時，我們不妨View一下這張頁面，我們可以驚喜的發現，這張頁面就想Word文檔一樣，是可讀的，這一點我們可以在整個過程做完以後再一次驗證。 

 

2. 構建基本CSS 

先簡單的讓ul橫向排列，這裡面要注意元素float之後要注意清理 

然後通過分別在LI 和 A 元素上應用背景來實現主菜單樣式，這裡有個比較重要的地方是A這個元素變成區塊層級元素（display: block），這樣可以便於我們下面做一些處理，也能使整個菜單應用到連結樣式。 
而其中的line-height，恰恰可以使A中的字縱向置中。text-align使得A中的字橫向置中。 

CSS代碼 

1. .navg .mainNavg UL {  
2.     margin: 0;  
3.     padding: 0;  
4.     list-style: none;  
5. }  
6. .navg .mainNavg UL LI {  
7.     float: left;      
8.     background-color: #E1E9F8;  
9.     background: url(../images/tab_right.gif) no-repeat right top;  
10.     margin: 10px 3px;  
11.     height: 25px;  
12. }  
13.   
14. .navg .mainNavg UL LI A {  
15.     display: block;  
16.     height: 25px;  
17.     padding: 0 25px;  
18.     line-height: 24px;  
19.     background-color: #E1E9F8;  
20.     background: url(../images/tab_left.gif) no-repeat left top;  
21.     text-decoration: none;  
22.     float: left;  
23.     text-align:center;  
24.     color: #fff;  
25.     font-weight: bold;    
26. }  

3. 使寬度自適應 

我們在這裡使用滑動門技術來做寬度自適應。下面簡單介紹一下滑動門技術 

簡單來說，就是在LI上應用一幅大映像背景，並讓這個背景居於右側 

 

然後在A上應用一個小映像背景，並讓這個背景居於左側，遮住大映像邊緣 

 

這樣無論菜單文字內容長度怎麼變，都不會破壞原來的結構了。 

4. 當前菜單高亮顯示 

如果高亮當前頁面，這個有很多種做法，最死板的是在每個頁面上顯式的定義類。 
但是對於web項目來說，頁面多數是動態，所以這樣不是最理想的方法。 

我這裡採用的方法是CSS選取器的靈活使用

Java代碼 

1. #attendance #attendanceNavg,  
2. #teach #teachNavg,  
3. #communication #communicationNavg,  
4. #system #systemNavg {  
5.     background: url(../images/tab_right_on.gif) no-repeat right top;  
6. }  
7. #attendance #attendanceNavg A,  
8. #teach #teachNavg A,  
9. #communication #communicationNavg A,  
10. #system #systemNavg A {  
11.     background: url(../images/tab_left_on.gif) no-repeat left top;  
12.     color: #0000ff;  
13. }  

在<div id="attendance" class="mainNavg">的代碼中，我們可以使用不同的id作為選取器，由於CSS中的選取器id的優先順序將大於class，所以只要根據id配合上li上面的id，就可以達到動態選擇高亮選中的目的。 

事實上，由於我們的頁面都是動態，所以id可以由後台產生，這樣就可以通過id的不同組合非常精巧的實現了我們的需求。 

5. 小技巧 

最後可能還有一個問題你在想怎麼實現的，就是高亮的tab如何把下面的橫線遮掉的 

很簡單，圖片上的小技巧。將高亮的圖片高度設定為25px，而普通的圖片設定為24px。然後通過padding，就可以將那根橫線遮去了。 

我們可以使用類似的方式，把二級菜單也做出來，這裡就不詳細敘述了。大家可以結合源碼試一下。 

 

源碼可分析連結頁面獲得：http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html