关注前端开发
关注用户体验

CSS常用浮出层的写法

浮出层是web页面中经常用到的功能,带有小小尖角的浮出层则更为生动,所以今天带给大家的是有角的浮出层,一起看看吧!

点此查看实例展示

是的,我们即将实现的就是以上功能,是不是很生动?

贴上HTML:

<div class="poptip">
    <span class="poptip-arrow poptip-arrow-top"><em></em><i></i></span>
    <span class="poptip-arrow poptip-arrow-right"><em></em><i></i></span>
    <span class="poptip-arrow poptip-arrow-bottom"><em></em><i></i></span>
    <span class="poptip-arrow poptip-arrow-left"><em></em><i></i></span>
    Hi,知道吗? <br>大前端D7主题很快就疯抢了!
</div>

以上HTML构成了一个浮出层和四个方向的尖角,其实你只需要其中的一个span标签,所以真正用上的代码并没那么多。

贴上CSS:

/* poptip */
.poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px 10px 4px;line-height: 16px;color: #DB7C22;font-size: 12px;background-color: #FFFCEF;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;}
.poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;}

.poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}
.poptip-arrow em{color: #FFBB76;}
.poptip-arrow i{color: #FFFCEF;text-shadow:none;}

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

.poptip-arrow-top{top: -6px;}
.poptip-arrow-top em{top: -1px;}
.poptip-arrow-top i{top: 0px;}

.poptip-arrow-bottom{bottom: -6px;}
.poptip-arrow-bottom em{top: -8px;}
.poptip-arrow-bottom i{top: -9px;}

.poptip-arrow-left{left:-6px;}
.poptip-arrow-left em{left:1px;}
.poptip-arrow-left i{left:2px;}

.poptip-arrow-right{right:-6px;}
.poptip-arrow-right em{left:-6px;}
.poptip-arrow-right i{left:-7px;}

这段CSS写的已经很简练了,所以不要嫌多,因为它具有很强的扩展性。

如果你希望尖角居中显示,可以在.poptip-arrow这个span上加上style="left:50%"或者style="top:50%"

这个代码兼容IE6-10、Chrome、Firefox等基本上所有主流浏览器,所以不必担心其兼容性和实用性。据悉,支付宝等站点采用的也是此方式。

当然,不排除还有更好的实现方式,如你知道,请留言告诉大家,谢谢!

未经允许不得转载:大前端 » CSS常用浮出层的写法
分享到:更多 ()

评论 87

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #50

    用背景图片?

    天津做网站3年前 (2014-07-09)回复
  2. #49

    很强, 学习了

    Top3年前 (2014-06-18)回复
  3. #48

    .poptip-arrow-bottom em{top: -8px;}
    .poptip-arrow-bottom i{top: -9px;}
    这里的top:-8px改为bottom:-1px不就行了吗,只改了下bottom

    2gep.cn3年前 (2014-05-18)回复
  4. #47

    挺漂亮

    jqueryfuns3年前 (2014-02-10)回复
  5. #46

    不错 , 欢迎来我博客坐坐!

    秦川博客4年前 (2013-08-10)回复
  6. #45

    微利古德!!!

    kaishui1064年前 (2013-07-31)回复
  7. #44

    不错的方法,学习了

    web前端4年前 (2013-07-26)回复
  8. #43

    不错!!很值得借鉴 😀

    阿城守候4年前 (2013-02-12)回复
  9. #42

    ie6下面有点问题 底部的箭头显示不正常,这里不能截图

    yjsart4年前 (2013-01-06)回复
  10. #41

    可能用◆放在底层,上面再用一层盖住◆的一半这样更简单点。。。

    静听叶落声4年前 (2012-12-13)回复
  11. #40

    考虑过搜索引擎抓取问题吗?这算是比较严重的一个缺陷吧?

    E龙4年前 (2012-12-04)回复
  12. #39

    最早看到这种实现的是在张鑫旭的博客

    阿牛5年前 (2012-11-12)回复
  13. #38

    很棒!我给你加了套皮肤~http://imshanks.com/colorful-poptip-only-css/

    shanks5年前 (2012-11-09)回复
  14. #37

    Don’t you understand that it’s the best time to get the loans, which would realize your dreams.

    Weaver20CANDICE5年前 (2012-11-02)回复
  15. #36

    感谢分享…!支持!!!

    綦江广告5年前 (2012-10-19)回复
  16. #35

    支持先锋性网站!越看越舒服啊!

    sexyz5年前 (2012-10-08)回复
  17. #34

    好方法。。。学习了。。

    冰曦5年前 (2012-10-01)回复
  18. #33

    一般都用:after,:before生成三角。

    小毛5年前 (2012-09-25)回复
  19. #32

    不错,很有创意

    move5年前 (2012-09-19)回复
  20. #31

    这个方法在centOS的firefox下没有效果。。

    hiswing5年前 (2012-09-17)回复
  21. #30

    mac下木有simsun字体~

    小瑞5年前 (2012-09-13)回复
  22. #29

    这种写法是不是还与字体挂钩啊?

    云淡然(博客)5年前 (2012-09-09)回复
    • 是的,所以我们设置了simsun , 宋体

      浩子5年前 (2012-09-10)回复
  23. #28

    学习了,楼主真棒!

    何静5年前 (2012-09-04)回复
  24. #27

    哈哈,之前也写了篇博客“三种纯CSS实现三角形的方法”,用的border,◆ 字符和 transfrom 旋转 45 度。
    附上链接,前端因分享而更精彩:)
    http://www.feelcss.com/three-pure-css-to-achieve-the-triangle-method.html

    feelcss5年前 (2012-08-29)回复
  25. #26

    感觉很强大,在ietester测试过了,连ie6都没问题。向你学习。

    lijian5年前 (2012-08-29)回复
  26. #25

    长时间存在觉得好不爽

    凤翼天堂5年前 (2012-08-28)回复
  27. #24

    CSS
    纠结的东西!

    所谓刚子5年前 (2012-08-27)回复
  28. #23

    每次登陆浩子大哥都有新奇的东西分享谢谢啦 😳

    明明小5年前 (2012-08-27)回复
  29. #22

    呵呵 用来弄个公告 不错

    倡萌5年前 (2012-08-27)回复
  30. #21

    浩子,”点此查看实例展示 ” 或者 “实例下载”是用的啥插件实现的呀?

    moocss5年前 (2012-08-26)回复
  31. #20

    耗子你的站是不是遭黑了? 还是你添加了广告?

    为什么我点开任何连接 都有窗口弹出?
    弹出的全是性药或网游广告

    小林5年前 (2012-08-25)回复
  32. #19

    mark。。。。

    公子5年前 (2012-08-25)回复
  33. #18

    不晓得为什么,我怎么用了以后发现总是布局中啊。浩子看一下好不?

    ivmm5年前 (2012-08-25)回复
  34. #17

    学习学习了哦

    IT博客5年前 (2012-08-25)回复
  35. #16

    全系高手的~\(≧▽≦)/~啦啦啦

    GW_Soul5年前 (2012-08-24)回复
  36. #15

    博主那个实例页面是怎么实现的?这样?pid=4518

    萧晔离5年前 (2012-08-24)回复
    • 这个,近期会出一篇文章写写,因为不是一句话的事儿!

      浩子5年前 (2012-08-24)回复
      • 好的,感谢

        萧晔离5年前 (2012-08-24)回复
      • 另外,贵站Logo那的浮出层显示在了关注微博下面了。

        萧晔离5年前 (2012-08-24)回复
        • 嗯,你用的是IE? 没测试过iE,去看看!

          浩子5年前 (2012-08-24)
  37. #14

    发现你公布的CSS代码第一、二行超出了。。。。。

    沁园春5年前 (2012-08-24)回复
  38. #13

    在opera下有问题,上方箭头和右边的箭头定位不准确

    Hubert5年前 (2012-08-24)回复
  39. #12

    css3被大家开始慢慢的关注起来了。

    wmtimes5年前 (2012-08-24)回复
    • 这个木有用到CSS3啊

      浩子5年前 (2012-08-24)回复
  40. #11

    挺好的,我记得新浪微博就是用的这种

    热血洒红尘5年前 (2012-08-24)回复
  41. #10

    浩子,给提个建议,你把博客加上返回顶部,没有这个功能,很不方便。

    菠萝5年前 (2012-08-24)回复
    • 必须有,这几天就加上

      浩子5年前 (2012-08-24)回复
      • 博主,公布下代码吧!

        蓝天5年前 (2012-08-24)回复
      • 这就对了!加油!

        菠萝5年前 (2012-08-25)回复
      • 还没完,你加上这个返回顶部按钮之后,再让他别一下子跳上去,而是有个滚动的过程,效果就完美了!升级完,再发我份最新滴:)

        菠萝5年前 (2012-08-25)回复
  42. #9

    向您学习致敬

    拉杆箱5年前 (2012-08-24)回复
  43. #8

    好厉害,向你学习。。。。

    沁园春5年前 (2012-08-23)回复
  44. #7

    哇,很好啊!

    LYuShine5年前 (2012-08-23)回复
  45. #6

    耗子哥,你真是越来越厉害了

    sunp5年前 (2012-08-23)回复
    • 这话怎么说,这个不过是比较简单的CSS,所以,继续学习中

      浩子5年前 (2012-08-23)回复
  46. #5

    哇塞,这个先复制了

    一堵墙5年前 (2012-08-23)回复
    • 不用复制,永久保存在这,记得看完点下下面的广告就是了,哈哈

      浩子5年前 (2012-08-23)回复
  47. #4

    :mrgreen: 好吧,非常好

    hahah5年前 (2012-08-23)回复
  48. #3

    大致明白原理,但没有实践过~

    Az5年前 (2012-08-23)回复
  49. #2

    你的网站越来越漂亮了,谁设计的

    soho5年前 (2012-08-22)回复
    • 木有设计,凭感觉写滴,也只能给咱这些个代码仔看看了,哈哈

      浩子5年前 (2012-08-22)回复
  50. #1

    这个方法不错。我都是用position+border实现的。呵呵

    <ul><li class="current_page_item">网站首页<span></span></li></ul>
    .current_page_item {
    background: none repeat scroll 0 0 #85D4F3;
    position: relative;
    }
    .current_page_item span {
    border-color: #85D4F3 #85D4F3 #FFFFFF;
    border-style: solid;
    border-width: 5px;
    bottom: -1px;
    font-size: 0;
    left: 50%;
    line-height: 0;
    margin-left: -5px;
    position: absolute;
    }

    言冬5年前 (2012-08-22)回复
    • 这种方法存在很多缺陷,想必你已知道,不过够用就好!

      浩子5年前 (2012-08-22)回复
      • :mrgreen:

        言冬5年前 (2012-08-22)回复
        • 说一下,给我们扫扫盲。

          hiswing5年前 (2012-08-24)
        • 我该说的都在上面了哇 :mrgreen: 你是不是要问博主的呀?

          言冬5年前 (2012-08-24)
        • 是呀。

          hiswing5年前 (2012-08-24)

themebetter 国内更好的WordPress主题服务商

立即前往