天天看點
傳回

前台頁面Tab效果

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

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

首先看一下預覽界面：

前台頁面Tab效果

樣例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個無序清單來表示一級菜單和二級菜單。代碼如下：

Java代碼

前台頁面Tab效果

  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">  
  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>  
  17.     </div>  
  18. </div> 

<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文檔一樣，是可讀的，這一點我們可以在整個過程做完以後再一次驗證。

前台頁面Tab效果

2. 建構基本CSS

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

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

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

前台頁面Tab效果
  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(../p_w_picpaths/tab_right.gif) no-repeat right top;  
  10.     margin: 10px 3px;  
  11.     height: 25px;  
  13. .navg .mainNavg UL LI A {  
  14.     display: block;  
  16.     padding: 0 25px;  
  17.     line-height: 24px;  
  19.     background: url(../p_w_picpaths/tab_left.gif) no-repeat left top;  
  20.     text-decoration: none;  
  21. float: left;  
  22.     text-align:center;  
  23.     color: #fff;  
  24.     font-weight: bold;    
  25. } 

.navg .mainNavg UL { margin: 0; padding: 0; list-style: none; } .navg .mainNavg UL LI { float: left; background-color: #E1E9F8; background: url(../p_w_picpaths/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(../p_w_picpaths/tab_left.gif) no-repeat left top; text-decoration: none; float: left; text-align:center; color: #fff; font-weight: bold; }

3. 使寬度自适應

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

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

前台頁面Tab效果

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

前台頁面Tab效果

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

4. 目前菜單高亮顯示

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

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

我這裡采用的方法是CSS選擇器的靈活使用

前台頁面Tab效果
  1. #attendance #attendanceNavg,  
  2. #teach #teachNavg,  
  3. #communication #communicationNavg,  
  4. #system #systemNavg {  
  5.     background: url(../p_w_picpaths/tab_right_on.gif) no-repeat right top;  
  7. #attendance #attendanceNavg A,  
  8. #teach #teachNavg A,  
  9. #communication #communicationNavg A,  
  10. #system #systemNavg A {  
  11.     background: url(../p_w_picpaths/tab_left_on.gif) no-repeat left top;  
  12.     color: #0000ff;  

#attendance #attendanceNavg, #teach #teachNavg, #communication #communicationNavg, #system #systemNavg { background: url(../p_w_picpaths/tab_right_on.gif) no-repeat right top; } #attendance #attendanceNavg A, #teach #teachNavg A, #communication #communicationNavg A, #system #systemNavg A { background: url(../p_w_picpaths/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，就可以将那根橫線遮去了。

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

附件為 源代碼.

html css 效果 休閑 tab
上一篇: 編譯RocketMQ
下一篇: 團購頁面效果

繼續閱讀