DIV CSS 佈局教程網

文章簡介：CSS網頁設計實例:商旅網首頁的標簽切換.

上個月的項目了。。。標簽切換有很多方法可以實現，這裡貼一段我個人很喜歡用的代碼：

<ul class=“tabmenu”>
<li class=“menu_flt”>機票</li>
< li>酒店</li>
< li>旅游度假</li>
< /ul>

對於web標准化來講，這種結構很清晰，當圖片未顯示的時候同樣可以知道文本內容，而且有利於SEO。背景圖片分兩塊：on和off效果，合並到一起，如圖所示：

其中整個模塊的底部圓角也合並到了圖片上，本段代碼不包括，請自行忽略~~~

1．給<ul>加上面那條背景，默認都為off狀態，再分別給每個<li>加對應的on樣式。通過JS判斷哪個菜單高亮，省略<a>標簽；
2．li的高度設為零，這樣Html中的文字就不會顯示了，再padding-top，把高度補回來。個人不推薦text-indent: XXXXem，有<a>時會看到焦點框已經超出屏幕。

附樣式：

.tabmenu { width: 396px; height: 37px; background: #c6d9f6 url(“un_tabmenu.gif”) no-repeat 0 0; }
.tabmenu li { float: left; display: inline; width: 132px; height: 0; overflow: hidden; padding-top: 37px; cursor: pointer; }
.tabmenu li.menu_flt { background: url(“un_tabmenu.gif”) no-repeat 0 -37px; }
.tabmenu li.menu_hotel { background: url(“un_tabmenu.gif”) no-repeat -132px -37px; }
.tabmenu li.menu_pkg { background: url(“un_tabmenu.gif”) no-repeat -264px -37px; }