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

WordPress 欲思 10评论

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

HTML代码样例

 

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浮出层写法

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

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