您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

網(wǎng)頁(yè)設(shè)計(jì)中常用到的CSS浮出層【箭頭】

浮出層是web頁(yè)面中經(jīng)常用到的功能,帶有小小尖角的浮出層則更為生動(dòng),所以今天帶給大家的是有角的浮出層,一起看看吧!

    Hi,看到了嗎? 這是常用浮出層的寫法!

以上HTML構(gòu)成了一個(gè)浮出層和四個(gè)方向的尖角,其實(shí)你只需要其中的一個(gè)span標(biāo)簽,所以真正用上的代碼并沒那么多。

  1. .poptip{positionabsolute;top20px;left:20px;padding6px 10px 5px;   

  2. *padding7px 10px 4px;line-height16px;color#DB7C22;font-size12px;   

  3. background-color#FFFCEF;bordersolid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;}   

  4. .poptip-arrow{positionabsolute;overflowhidden;font-stylenormal;   

  5. font-family: simsun;font-size12px;text-shadow:0 0 2px #ccc;}   

  6. .poptip-arrow em,.poptip-arrow i{positionabsolute;left:0;top:0;font-stylenormal;}   

  7. .poptip-arrow em{color#FFBB76;}   

  8. .poptip-arrow i{color#FFFCEF;text-shadow:none;}   

  9. .poptip-arrow-top,.poptip-arrow-bottombottom{height6px;width12px;left:12px;margin-left:-6px;}   

  10. .poptip-arrow-left,.poptip-arrow-rightright{height12px;width6px;top12px;margin-top:-6px;}   

  11. .poptip-arrow-top{top: -6px;}   

  12. .poptip-arrow-top em{top: -1px;}   

  13. .poptip-arrow-top i{top0px;}   

  14. .poptip-arrow-bottombottom{bottombottom: -6px;}   

  15. .poptip-arrow-bottombottom em{top: -8px;}   

  16. .poptip-arrow-bottombottom i{top: -9px;}   

  17. .poptip-arrow-left{left:-6px;}   

  18. .poptip-arrow-left em{left:1px;}   

  19. .poptip-arrow-left i{left:2px;}   

  20. .poptip-arrow-rightright{rightright:-6px;}   

  21. .poptip-arrow-rightright em{left:-6px;}   

  22. .poptip-arrow-rightright i{left:-7px;}  

這段CSS寫的已經(jīng)很簡(jiǎn)練了,所以不要嫌多,因?yàn)樗哂泻軓?qiáng)的擴(kuò)展性。

如果你希望尖角居中顯示,可以在.poptip-arrow這個(gè)span上加上style=”left:50%”或者style=”top:50%”

這個(gè)代碼兼容IE6-10、Chrome、Firefox等基本上所有主流瀏覽器,所以不必?fù)?dān)心其兼容性和實(shí)用性。據(jù)悉,支付寶等站點(diǎn)采用的也是此方式。

當(dāng)然,不排除還有更好的實(shí)現(xiàn)方式,如你知道,請(qǐng)留言告訴大家,謝謝!

[教程作者:佚名]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd2586.html
騰訊TGideas:10個(gè)令人吃驚的新終端頁(yè)面數(shù)據(jù)結(jié)論
設(shè)計(jì)師們代碼指南之定位與布局
圖趣網(wǎng)微信
建議反饋
×