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

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

2014/12/15 9:33:17來源：互聯(lián)網(wǎng)

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

◆◆ ◆◆ ◆◆ ◆◆ Hi，看到了嗎？ 這是常用浮出層的寫法！

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

  1. .poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;   

  2. *padding: 7px 10px 4px;line-height: 16px;color: #DB7C22;font-size: 12px;   

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

  4. .poptip-arrow{position: absolute;overflow: hidden;font-style: normal;   

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

  6. .poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}   

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

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

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

  10. .poptip-arrow-left,.poptip-arrow-rightright{height: 12px;width: 6px;top: 12px;margin-top:-6px;}   

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

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

  13. .poptip-arrow-top i{top: 0px;}   

  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)留言告訴大家，謝謝！

[教程作者：佚名]
關(guān)鍵詞：css浮出層 css 網(wǎng)頁(yè)前端 前端 箭頭
免責(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)微信
建議反饋
×