DIV CSS 佈局教程網

前段時間做一個小項目碰到了一個導航制作的方式然後突然想到曾經很久以前看到的梯形狀的不規則導航，就嘗試做了一下。結果碰到了幾個問題，後來在同事的提醒下總算完成了，記錄一下也跟大家分享分享。

先看圖（圖片只是大致做了一下）

效果展示：

運行代碼框

 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

xHtml結構部分內容：

<ul>
    <li><a href="#" title="菜單">菜單</a></li>
    <li><a href="#" title="菜單">菜單</a></li>
    <li><a href="#" title="菜單">菜單</a></li>
</ul>

CSS部分內容：

* {margin:0;padding:0;font:normal 12px/25px "宋體";}
body {background:#f8f8f8;}
ul {list-style:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(/School/UploadFiles_7810/201105/20110525225241191.gif) center center no-repeat;}
a:hover {color:#000;background:url(/School/UploadFiles_7810/201105/20110525225242142.gif) 0 0 no-repeat;width:86px;position:relative;}

思路：

主要是利用當:hover觸發的時候讓a定位，出了li的浮動范圍，出現梯形的圖片。從而實現了不規則導航的菜單。

過程：

1、在浏覽器中，根據li的結構表現，後面的li會覆蓋住前面的li，如果寬度足夠的話，是靠邊在一起，那麼只要利用負邊距就可以實現初始狀態下相互疊加的樣式。margin:0 -5px ;
2、初始狀態下的疊加實現了，要解決的就是:hover觸發的時候，讓 <a href="#" title="菜單">菜單</a> 這個放棄浮動使用定位。在這個過程中如果是要利用絕對定位話，會讓有一個 z-index 的問題出現。
這個問題只體現在IE中，FF下是無問題的，可以正常顯示。IE中表現出來的是最後一個li永遠都會蓋住前面的li，那麼當鼠標經過的時候就無法完美顯示了。

個人認為比較重要的幾個屬性：

1. li中的負邊距，實現疊加效果
2. hover中的position:relative
3. a是內聯元素，要觸發haslayout，可以使用float:left來觸發

注：

以上內容或許講得不是非常明白，不過大家可以仔細分析一下源碼，然後交流一下。如果覺得好也請不要回帖說頂，收藏，謝謝之類的話，你們的點擊就是對我的支持了。