一張圖片實現的 css 圓角滑動門導航菜單

一張圖片實現的 css 圓角滑動門導航菜單
css 滑動門樣式我想應該是個陳穀子爛芝麻的問題了,我之前一直使用的兩張圖片的方式進行處理的,後來偷懶,用一些瀏覽器的私有屬性進行的直接圓角的方式,前者需要切圖比較麻煩,後者通不過 W3C 驗證。思索了一下,找到了一個只用一張圖片實現的 css 圓角滑動門的方法。僅供存檔以及學習筆記,高手可以繞行了,感興趣的請繼續閱讀下去。

22 Responses to 一張圖片實現的 css 圓角滑動門導航菜單

  1. welee says:

    很不錯,如果加上 Ajax 效果就更炫了,好吧,我承認我來亂的,門口在右邊,我自己出去~

  2. Leeiio says:

    @welee
    呃,我這裡提供的是一張圖片實現滑動門導航的思路啊,其他花哨的自己琢磨去,哈 :mrgreen:

  3. yinheli says:

    這還叫挫嗎?頂呱呱.

  4. Elicip says:

    wahoo!~It’s cool!Many thanx!

  5. xiaorsz says:

    不錯,收藏了!!
    最近正在重構個站,用得上,呵呵!!

  6. 吖Bee says:

    也想改變一下結構~看看能牌上用場不~HoHO~

  7. eddie says:

    把文字放在span裡面應該也可以吧?

  8. Dickey says:

    哈,這方法非常實用!謝謝!

    另想請問,你當前使用的主題能否分享一下?(盼復)
    放心,不會濫用的,只是想研究學習其中一些東西。

  9. Leeiio says:

    @ Dickey
    抱歉,目前還不行,我現在用的主題裡面有很多冗餘代碼,每天都在抽空改成大眾試用版,原打算就是準備放出下載的,只是還未到時候。

  10. Charles says:

    說實在的,好抽象啊,基本看不懂

  11. 無敵小強 says:

    我想向您學習

  12. Sivan says:

    看著很完美了,不管文本寬還是窄,都有空間顯示右端的圓角。 😛

  13. ZH CEXO says:

    真牛X,我從來沒用過滑動門……你的方法我收藏了~

  14. 1w says:

    我在想增加一個無語義的是否合算… 畢竟把左右切好的滑動門圖片放在一張圖裡, 也可以達到減少http連接的目的….

    PS, 個人覺得這個評論的輸入框交互還可以再改改啊… 把必須首先填寫的id與mail放到右邊去是為了減少用戶輸入回復時的成本么? 但是感覺實際上更加重了我的成本了.. 呵呵..

  15. Leeiio says:

    @1w
    span標籤的作用是為了實現圓角的還可以擁有hover樣式,除非你要犧牲掉ie6上的表現。

    至於評論嘛,因為我覺得評論框是重要的部分所以放在左邊,而右邊的用戶信息在輸入一次之後下一次訪問的時候根據cookies會隱藏。

  16. Pingback: 一張圖片實現的 css 圓角滑動門導航菜單 收藏 | 網站開發設計工作室聯盟

  17. huaipingguo says:

    ❗ 不錯嘛!學習了……

Leave a Reply to eddie Cancel reply

Your email address will not be published. Required fields are marked *