最近在研究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個無序列表來表示一級菜單和二級菜單。代碼如下： 代碼
< type="text/javascript">render_code(); 其中，2個div將菜單級別劃分開。其實在以後還會有其他的功效。此時，我們不妨View一下這張頁面，我們可以驚喜的發現，這張頁面就想Word文檔一樣，是可讀的，這一點我們可以在整個過程做完以後再一次驗證。 2. 構建基本CSS 先簡單的讓ul橫向排列，這裏面要注意元素float之後要注意清理 然後通過分別在LI 和 A 元素上應用背景來實現主菜單樣式，這裏有個比較重要的地方是A這個元素變成塊級元素（display: block），這樣可以便於我們下面做一些處理，也能使整個菜單應用到鏈接樣式。 而其中的line-height，恰恰可以使A中的字縱向居中。text-align使得A中的字橫向居中。 代碼 .navg .mainNavg UL { margin: 0; padding: 0; list-style: none; } .navg .mainNavg UL LI { float: left; background-color: #E1E9F8; background: url(../images/tab_right.gif) no-repeat right top; margin: 10px 3px; height: 25px; } .navg .mainNavg UL LI A { display: block; height: 25px; padding: 0 25px; line-height: 24px; background-color: #E1E9F8; background: url(../images/tab_left.gif) no-repeat left top; text-decoration: none; float: left; text-align:center; color: #fff; font-weight: bold; } < type="text/javascript">render_code(); 3. 使寬度自適應 我們在這裏使用滑動門技術來做寬度自適應。下面簡單介紹一下滑動門技術 簡單來說，就是在LI上應用一幅大圖像背景，並讓這個背景居於右側 然後在A上應用一個小圖像背景，並讓這個背景居於左側，遮住大圖像邊緣 這樣無論菜單文字內容長度怎麼變，都不會破壞原來的結構了。 4. 當前菜單高亮顯示 如果高亮當前頁面，這個有很多種做法，最死板的是在每個頁面上顯式的定義類。 但是對於web項目來說，頁面多數是動態的，所以這樣不是最理想的方法。 我這裏採用的方法是CSS選擇器的靈活使用 代碼 #attendance #attendanceNavg, #teach #teachNavg, #communication #communicationNavg, #system #systemNavg { background: url(../images/tab_right_on.gif) no-repeat right top; } #attendance #attendanceNavg A, #teach #teachNavg A, #communication #communicationNavg A, #system #systemNavg A { background: url(../images/tab_left_on.gif) no-repeat left top; color: #0000ff; } < type="text/javascript">render_code(); 在