分享一个很漂亮的wordpress博客网站CSS浮出层写法

在倡萌博客那里看到一个很不错的CSS浮出层写法,不仅样式漂亮,而且兼容IE6-10、Chrome、Firefox等基本上所有主流浏览器,所以不必担心其兼容性和实用性。据悉,支付宝等站点采用的也是此方式。转载过来,以后可以在主题中使用,呵呵。

HTML代码样例

分享一个很漂亮的wordpress博客网站CSS浮出层写法

 

Hi,知道吗?
大前端D7主题很快就疯抢了!

 

 

以上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写的已经很简练了,所以不要嫌多,因为它具有很强的扩展性。

未经允许不得转载:欲思博客 » 分享一个很漂亮的wordpress博客网站CSS浮出层写法
喜欢(0) 打赏

评论10

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0
    这段代码放在哪里啊?
    分钱榜2015-02-13 23:42:53回复
  2. #0
    很不错,支持!
    胸器网2014-01-03 16:41:13回复
  3. #0
    我还是不弄了,怕自己弄多了会错
    凌怀舒博客2012-11-24 10:58:52回复
  4. #0
    这个看起来很漂亮哦,谢谢分享,先拿去用一下,有不懂的再来请教博主
    迪希博客2012-11-13 7:30:13回复
  5. #0
    以前喜欢折腾wordpress 现在不玩了 不然肯定会用上 不过还是喜欢 看看别人的博客
    小鸭网2012-11-07 7:21:18回复
    • 其他网站程序应该也可以用吧。呵呵。还没试过。
      欲思网赚2012-11-07 12:24:52回复
  6. #0
    互相学习。谢谢来访。
    欲思网赚2012-11-07 6:40:32回复
  7. #0
    挺漂亮的嘛。。
    雷明健2012-11-04 14:24:36回复
    • 呵呵。谢谢朋友光临。
      欲思网赚2012-11-06 14:59:25回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

在线客服

在线客服

  • 扫描二维码,微信联系 扫描二维码,微信联系