新会员白菜网送体验金前端开发
新会员白菜网送体验金用户体验
当前位置：大前端 > 前端开发 > HTML/CSS > 正文

CSS常用浮出层的写法

2012-08-22 分类：HTML/CSS 阅读(111985) 评论(87)

浮出层是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等基本上所有主流浏览器，所以不必担心其兼容性和实用性。据悉，支付宝等站点采用的也是此方式。

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

AD：【更好的WordPress主题】37000+ 用户的实力之选 / 高端大气用户体验 / 全设备自适应兼容 / 免费靠谱工单售后
注册就送10元(12)
未经允许不得转载：大前端 » CSS常用浮出层的写法
分享到： 更多 (0)
标签：

浩子

大前端创始人，前端开发人员一枚，专注Web前端开发与可用性设计，也是国内一直坚持原创的WordPress主题开发者，创建 themebetter.com 主题开发团队，做国内更好的WordPress主题。

相关推荐

评论 87

取消

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

    用背景图片？

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

    很强, 学习了

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

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

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

    挺漂亮

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

    不错 ， 欢迎来我博客坐坐！

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

    微利古德！！！

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

    不错的方法，学习了

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

    不错！！很值得借鉴 😀

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

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

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

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

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

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

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

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

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

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

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

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

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

    感谢分享…!支持!!!

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

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

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

    好方法。。。学习了。。

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

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

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

    不错，很有创意

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

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

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

    mac下木有simsun字体~

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

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

    云淡然（博客）7年前 (2012-09-09)回复

    • 是的，所以我们设置了simsun ， 宋体

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

    学习了，楼主真棒！

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

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

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

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

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

    长时间存在觉得好不爽

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

    CSS
    纠结的东西！

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

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

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

    呵呵 用来弄个公告 不错

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

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

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

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

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

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

    mark。。。。

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

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

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

    学习学习了哦

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

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

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

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

    萧晔离7年前 (2012-08-24)回复

    • 这个，近期会出一篇文章写写，因为不是一句话的事儿！

      浩子7年前 (2012-08-24)回复

      • 好的，感谢

        萧晔离7年前 (2012-08-24)回复

      • 另外，贵站Logo那的浮出层显示在了新会员白菜网送体验金微博下面了。

        萧晔离7年前 (2012-08-24)回复

        • 嗯，你用的是IE? 没测试过iE，去看看！

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

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

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

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

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

    css3被大家开始慢慢的新会员白菜网送体验金起来了。

    wmtimes7年前 (2012-08-24)回复

    • 这个木有用到CSS3啊

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

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

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

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

    菠萝7年前 (2012-08-24)回复

    • 必须有，这几天就加上

      浩子7年前 (2012-08-24)回复

      • 博主，公布下代码吧！

        蓝天7年前 (2012-08-24)回复

      • 这就对了！加油！

        菠萝7年前 (2012-08-25)回复

      • 还没完，你加上这个返回顶部按钮之后，再让他别一下子跳上去，而是有个滚动的过程，效果就完美了！升级完，再发我份最新滴：）

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

    向您学习致敬

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

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

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

    哇，很好啊！

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

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

    sunp7年前 (2012-08-23)回复

    • 这话怎么说，这个不过是比较简单的CSS，所以，继续学习中

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

    哇塞，这个先复制了

    一堵墙7年前 (2012-08-23)回复

    • 不用复制，永久保存在这，记得看完点下下面的广告就是了，哈哈

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

    :mrgreen: 好吧，非常好

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

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

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

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

    soho7年前 (2012-08-22)回复

    • 木有设计，凭感觉写滴，也只能给咱这些个代码仔看看了，哈哈

      浩子7年前 (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;
    }

    言冬7年前 (2012-08-22)回复

    • 这种方法存在很多缺陷，想必你已知道，不过够用就好！

      浩子7年前 (2012-08-22)回复

      • :mrgreen:

        言冬7年前 (2012-08-22)回复

        • 说一下，给我们扫扫盲。

          hiswing7年前 (2012-08-24)

        • 我该说的都在上面了哇 :mrgreen: 你是不是要问博主的呀？

          言冬7年前 (2012-08-24)

        • 是呀。

          hiswing7年前 (2012-08-24)
吐血推荐

DUX主题 新一代主题

DUX Wordpress主题是大前端当前使用主题，是大前端积累多年Wordpress主题经验设计而成；更加扁平的风格和干净白色的架构会让网站显得内涵而出色...

还有谁？

推荐云主机，建站更安全

大前端推荐站长使用阿里云主机，安全可靠、轻松上云，从此告别主机无售后、主机各种难题。注册送300元打到2000领取1000元代金券

站长推荐

最新发布

热门标签

招聘/求职 (111)招聘 (110)HTML/CSS (96)前端招聘 (82)前端资讯 (67)前端开发 (65)设计路上 (62)前端技巧 (61)CSS (53)JavaScript (50)用户体验 (46)设计思路 (43)HTML5 (40)SEO (40)网页设计 (40)CSS3 (37)职业 (34)前端资源 (33)大前端 (31)企业公司 (30)浏览器 (28)站长必备 (27)jQuery (22)搜索引擎优化 (22)web开发 (17)兼容 (17)HTML (16)web标准 (16)Google (15)IE9 (15)

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

立即前往
博聚网