CSS常用浮出层的写法

原创 花落谁家 随笔 JavaScript 265阅读 2017-05-04 15:58:01 举报

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

贴上HTML:
html 代码

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

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

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

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

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

评论 ( 1 )
最新评论