|
最近在研究CSS，正好結(jié)合項目做了一個靈活的Tab頁，使用純HTML＋CSS實現(xiàn)，正好總結(jié)一下。
首先看一下預(yù)覽界面：
樣例HTML可以訪問：http://www./htmldemo/school/attendance/AttendanceGlobal.html
下面開始講述一下完成上述頁面的步驟。
1. 構(gòu)建HTML
構(gòu)建HTML是整個過程最基礎(chǔ)的部分。我們構(gòu)建HTML比較關(guān)鍵的一個原則就是“還HTML標(biāo)簽其本來的含義”。所以在這里，我們應(yīng)該合理分析一
下期望做到的HTML的結(jié)構(gòu)的情況，并加以分析，選擇比較合適的HTML標(biāo)簽，而不是采用非標(biāo)準(zhǔn)的Table布局或者充斥著大量div和class的布局
方式。事實上，現(xiàn)在存在著一種誤區(qū)，就是凡事采用了DIV＋CSS的方式進(jìn)行頁面編程的就是Web標(biāo)準(zhǔn)的，其實這是完全錯誤的觀點，很容易就導(dǎo)致了“多
div癥”（divitus）或者“多類癥”（classitis）。
回到正題，我們分析一下頁面樣式，可以將整個Tab頁分成2個部分，分別是一級菜單和二級菜單，他們有類似的特點，并以橫向方式排列。HTML標(biāo)簽中的無序列表就可以反映出這種邏輯關(guān)系。所以我們分別采用2個無序列表來表示一級菜單和二級菜單。代碼如下：
代碼
- <div class="navg">
- <div id="attendance" class="mainNavg">
- <ul>
- <li id="attendanceNavg"><a href="#">考勤管理</a></li>
- <li id="teachNavg"><a href="#">教學(xué)管理</a></li>
- <li id="communicationNavg"><a href="#">家校互通</a></li>
- <li id="systemNavg"><a href="#">系統(tǒng)管理</a></li>
- </ul>
- </div>
- <div id="dailyAttendance" class="secondaryNavg">
- <ul>
- <li id="dailyAttendanceNavg"><a href="#">當(dāng)天考勤</a></li>
- <li id="leaveApproveNavg"><a href="#">請假審批</a></li>
- <li id="attendanceStatisticsNavg"><a href="#">考勤統(tǒng)計</a></li>
- <li id="attendanceCollectNavg"><a href="#">考勤匯總</a></li>
- </ul>
- </div>
- </div>
其中，2個div將菜單級別劃分開。其實在以后還會有其他的功效。此時，我們不妨View一下這張頁面，我們可以驚喜的發(fā)現(xiàn)，這張頁面就想Word文檔一樣，是可讀的，這一點我們可以在整個過程做完以后再一次驗證。
2. 構(gòu)建基本CSS
先簡單的讓ul橫向排列，這里面要注意元素float之后要注意清理
然后通過分別在LI 和 A 元素上應(yīng)用背景來實現(xiàn)主菜單樣式，這里有個比較重要的地方是A這個元素變成塊級元素（display: block），這樣可以便于我們下面做一些處理，也能使整個菜單應(yīng)用到鏈接樣式。
而其中的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;
- }
3. 使寬度自適應(yīng)
我們在這里使用滑動門技術(shù)來做寬度自適應(yīng)。下面簡單介紹一下滑動門技術(shù)
簡單來說，就是在LI上應(yīng)用一幅大圖像背景，并讓這個背景居于右側(cè)
然后在A上應(yīng)用一個小圖像背景，并讓這個背景居于左側(cè)，遮住大圖像邊緣
這樣無論菜單文字內(nèi)容長度怎么變，都不會破壞原來的結(jié)構(gòu)了。
4. 當(dāng)前菜單高亮顯示
如果高亮當(dāng)前頁面，這個有很多種做法，最死板的是在每個頁面上顯式的定義類。
但是對于web項目來說，頁面多數(shù)是動態(tài)的，所以這樣不是最理想的方法。
我這里采用的方法是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;
- }
在<div id="attendance" class="mainNavg">的代碼中，我們可以使用不同的id作為選擇器，由于CSS中的選擇器id的優(yōu)先級將大于class，所以只要根據(jù)id配合上li上面的id，就可以達(dá)到動態(tài)選擇高亮選中的目的。
事實上，由于我們的頁面都是動態(tài)的，所以id可以由后臺生成，這樣就可以通過id的不同組合非常精巧的實現(xiàn)了我們的需求。
5. 小技巧
最后可能還有一個問題你在想怎么實現(xiàn)的，就是高亮的tab如何把下面的橫線遮掉的
很簡單，圖片上的小技巧。將高亮的圖片高度設(shè)置為25px，而普通的圖片設(shè)置為24px。然后通過padding，就可以將那根橫線遮去了。
我們可以使用類似的方式，把二級菜單也做出來，這里就不詳細(xì)敘述了。大家可以結(jié)合源碼試一下。
附件為
|
