欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS DIV制作梯形狀的不規(guī)則網(wǎng)站導(dǎo)航

互聯(lián)網(wǎng)   發(fā)布時(shí)間:2008-10-17 19:16:33   作者:佚名   我要評(píng)論
前段時(shí)間做一個(gè)小項(xiàng)目碰到了一個(gè)導(dǎo)航制作的方式然后突然想到曾經(jīng)很久以前看到的梯形狀的不規(guī)則導(dǎo)航,就嘗試做了一下。結(jié)果碰到了幾個(gè)問題,后來在同事的提醒下總算完成了,記錄一下也跟大家分享分享。 先看圖(圖片只是大致做了一下) 效果展示: 運(yùn)行代

前段時(shí)間做一個(gè)小項(xiàng)目碰到了一個(gè)導(dǎo)航制作的方式然后突然想到曾經(jīng)很久以前看到的梯形狀的不規(guī)則導(dǎo)航,就嘗試做了一下。結(jié)果碰到了幾個(gè)問題,后來在同事的提醒下總算完成了,記錄一下也跟大家分享分享。

先看圖(圖片只是大致做了一下)


效果展示
運(yùn)行代碼框

[Ctrl A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]

#p#
xhtml結(jié)構(gòu)部分內(nèi)容:
<ul>
<li><a href="#" title="菜單">菜單</a></li>
<li><a href="#" title="菜單">菜單</a></li>
<li><a href="#" title="菜單">菜單</a></li>
</ul>

css部分內(nèi)容:
* {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(http://www.linxz.cn/blog2/attachments/month_0804/d200843194011.gif) center center no-repeat;}
a:hover {color:#000;background:url(http://www.linxz.cn/blog2/attachments/month_0804/s200843194022.gif) 0 0 no-repeat;width:86px;position:relative;}

思路
主要是利用當(dāng):hover觸發(fā)的時(shí)候讓a定位,出了li的浮動(dòng)范圍,出現(xiàn)梯形的圖片。從而實(shí)現(xiàn)了不規(guī)則導(dǎo)航的菜單。
過程
1、在瀏覽器中,根據(jù)li的結(jié)構(gòu)表現(xiàn),后面的li會(huì)覆蓋住前面的li,如果寬度足夠的話,是靠邊在一起,那么只要利用負(fù)邊距就可以實(shí)現(xiàn)初始狀態(tài)下相互疊加的樣式。margin:0 -5px ;
2、初始狀態(tài)下的疊加實(shí)現(xiàn)了,要解決的就是:hover觸發(fā)的時(shí)候,讓 <a href="#" title="菜單">菜單</a> 這個(gè)放棄浮動(dòng)使用定位。在這個(gè)過程中如果是要利用絕對(duì)定位話,會(huì)讓有一個(gè) z-index 的問題出現(xiàn)。
這個(gè)問題只體現(xiàn)在IE中,F(xiàn)F下是無問題的,可以正常顯示。IE中表現(xiàn)出來的是最后一個(gè)li永遠(yuǎn)都會(huì)蓋住前面的li,那么當(dāng)鼠標(biāo)經(jīng)過的時(shí)候就無法完美顯示了。
個(gè)人認(rèn)為比較重要的幾個(gè)屬性
    li中的負(fù)邊距,實(shí)現(xiàn)疊加效果 hover中的position:relative a是內(nèi)聯(lián)元素,要觸發(fā)haslayout,可以使用float:left來觸發(fā)


以上內(nèi)容或許講得不是非常明白,不過大家可以仔細(xì)分析一下源碼,然后交流一下。如果覺得好也請(qǐng)不要回帖說頂,收藏,謝謝之類的話,你們的點(diǎn)擊就是對(duì)我的支持了。

相關(guān)文章

  • CSS實(shí)現(xiàn)梯形標(biāo)簽頁的方法

    在web設(shè)計(jì)中,梯形標(biāo)簽頁是很常見的一種形式,但是梯形又是一種很難實(shí)現(xiàn)的樣式,下面小編給大家分享使用CSS實(shí)現(xiàn)梯形標(biāo)簽頁的代碼,需要的朋友參考下吧
    2017-09-07

最新評(píng)論