HTML+CSS實現tab頁
最近在研究CSS,正好結合專案做了一個靈活的Tab頁,使用純HTML+CSS實現,正好總結一下。
首先看一下預覽介面:
下面開始講述一下完成上述頁面的步驟。
1. 構建HTML
構建HTML是整個過程最基礎的部分。我們構建HTML比較關鍵的一個原則就是“還HTML標籤其本來的含義”。所以在這裡,我們應該合理分析一下期望做到的HTML的結構的情況,並加以分析,選擇比較合適的HTML標籤,而不是採用非標準的Table佈局或者充斥著大量div和class的佈局方式。事實上,現在存在著一種誤區,就是凡事採用了DIV+CSS的方式進行頁面程式設計的就是Web標準的,其實這是完全錯誤的觀點,很容易就導致了“多div症”(divitus)或者“多類症”(classitis)。
回到正題,我們分析一下頁面樣式,可以將整個Tab頁分成2個部分,分別是一級選單和二級選單,他們有類似的特點,並以橫向方式排列。HTML標籤中的無序列表就可以反映出這種邏輯關係。所以我們分別採用2個無序列表來表示一級選單和二級選單。程式碼如下:
<div class="navg">
<div id="attendance" class="mainNavg">
<ul>
<li id="attendanceNavg"><a href="#">考勤管理</a></li>
<li id="teachNavg"><a href="#">教學管理</a></li>
<li id="communicationNavg"><a href="#">家校互通</a></li>
<li id="systemNavg"><a href="#">系統管理</a></li>
</ul>
</div>
<div id="dailyAttendance" class="secondaryNavg">
<ul>
<li id="dailyAttendanceNavg"><a href="#">當天考勤</a></li>
<li id="leaveApproveNavg"><a href="#">請假審批</a></li>
<li id="attendanceStatisticsNavg"><a href="#">考勤統計</a></li>
<li id="attendanceCollectNavg"><a href="#">考勤彙總</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 .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. 使寬度自適應
我們在這裡使用滑動門技術來做寬度自適應。下面簡單介紹一下滑動門技術
簡單來說,就是在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;
}
在<div id="attendance" class="mainNavg">的程式碼中,我們可以使用不同的id作為選擇器,由於CSS中的選擇器id的優先順序將大於class,所以只要根據id配合上li上面的id,就可以達到動態選擇高亮選中的目的。
事實上,由於我們的頁面都是動態的,所以id可以由後臺生成,這樣就可以通過id的不同組合非常精巧的實現了我們的需求。
5. 小技巧
最後可能還有一個問題你在想怎麼實現的,就是高亮的tab如何把下面的橫線遮掉的
很簡單,圖片上的小技巧。將高亮的圖片高度設定為25px,而普通的圖片設定為24px。然後通過padding,就可以將那根橫線遮去了。
我們可以使用類似的方式,把二級選單也做出來,這裡就不詳細敘述了。大家可以結合原始碼試一下。