首先看一下預覽界面：

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

　　1. 構建HTML

　　構建HTML是整個過程最基礎的部分。我們構建HTML比較關鍵的一個原則就是“還HTML標簽其本來的含義”。所以在這里，我們應該合理分析一下期望做到的HTML的結構的情況，并加以分析，選擇比較合適的HTML標簽，而不是采用非標準的Table布局或者充斥著大量div和html' target='_blank'>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中的字橫向居中。 代碼如下：

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。