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

 首先看一下預覽界面：

　　

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

　　1. 構建HTML

　　構建HTML是整個過程最基礎的部分。我們構建HTML比較關鍵的一個原則就是“還HTML標簽其本來的含義”。所以在這裡，我們應該合理分析一下期望做到的HTML的結構的情況，並加以分析，選擇比較合適的HTML標簽，而不是采用非標准的Table布局或者充斥著大量div和class的布局方式。事實上，現在存在著一種誤區，就是凡事采用了DIV＋CSS的方式進行頁面編程的就是Web標准的，其實這是完全錯誤的觀點，很容易就導致了“多div症”（divitus）或者“多類症”（classitis）。

　　回到正題，我們分析一下頁面樣式，可以將整個Tab頁分成2個部分，分別是一級菜單和二級菜單，他們有類似的特點，並以橫向方式排列。HTML標簽中的無序列表就可以反映出這種邏輯關系。所以我們分別采用2個無序列表來表示一級菜單和二級菜單。代碼如下：

<divclass="navg">　
<divid="attendance"class="mainNavg">　
<ul>　
<liid="attendanceNavg"><ahref="http://cms.ddvip.com/index.php#">考勤管理</a></li>　
<liid="teachNavg"><ahref="http://cms.ddvip.com/index.php#">教學管理</a></li>　
<liid="communicationNavg"><ahref="http://cms.ddvip.com/index.php#">家校互通</a></li>　
<liid="systemNavg"><ahref="http://cms.ddvip.com/index.php#">系統管理</a></li>　
</ul>　
</div>　 　
<divid="dailyAttendance"class="secondaryNavg">　
<ul>　
<liid="dailyAttendanceNavg"><ahref="http://cms.ddvip.com/index.php#">當天考勤</a></li>　
<liid="leaveApproveNavg"><ahref="http://cms.ddvip.com/index.php#">請假審批</a></li>　
<liid="attendanceStatisticsNavg"><ahref="http://cms.ddvip.com/index.php#">考勤統計</a></li>　
<liid="attendanceCollectNavg"><ahref="http://cms.ddvip.com/index.php#">考勤匯總</a></li>　
</ul>　
</div>　
</div>

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

　　2. 構建基本CSS

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

　　然後通過分別在LI 和 A 元素上應用背景來實現主菜單樣式，這裡有個比較重要的地方是A這個元素變成塊級元素(display: block)，這樣可以便於我們下面做一些處理，也能使整個菜單應用到鏈接樣式。

　　而其中的line-height，恰恰可以使A中的字縱向居中。text-align使得A中的字橫向居中。 代碼如下：

　　.navg.mainNavgUL{

　　margin:0;

　　padding:0;

　　list-style:none;

　　}

　　.navg.mainNavgULLI{

　　float:left;

　　background-color:#E1E9F8;

　　background:url(../images/tab_right.gif)no-repeatrighttop;

　　margin:10px3px;

　　height:25px;

　　}

　　.navg.mainNavgULLIA{

　　display:block;

　　height:25px;

　　padding:025px;

　　line-height:24px;

　　background-color:#E1E9F8;

　　background:url(../images/tab_left.gif)no-repeatlefttop;

　　text-decoration:none;

　　float:left;

　　text-align:center;

　　color:#fff;

　　font-weight:bold;

　　}

　　3. 使寬度自適應

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

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

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

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

　　4. 當前菜單高亮顯示

　　如果高亮當前頁面，這個有很多種做法，最死板的是在每個頁面上顯式的定義類。

　　但是對於web項目來說，頁面多數是動態的，所以這樣不是最理想的方法。

　　我這裡采用的方法是CSS選擇器的靈活使用，代碼如下：

　　#attendance#attendanceNavg,

　　#teach#teachNavg,

　　#communication#communicationNavg,

　　#system#systemNavg{

　　background:url(../images/tab_right_on.gif)no-repeatrighttop;

　　}

　　#attendance#attendanceNavgA,

　　#teach#teachNavgA,

　　#communication#communicationNavgA,

　　#system#systemNavgA{

　　background:url(../images/tab_left_on.gif)no-repeatlefttop;

　　color:#0000ff;

　　}

　　在

的代碼中，我們可以使用不同的id作為選擇器，由於CSS中的選擇器id的優先級將大於class，所以只要根據id配合上li上面的id，就可以達到動態選擇高亮選中的目的。

 

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

　　5. 小技巧

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

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

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