分享一款带尖角浮出 公告栏 样式

这里所说的带尖角浮出公告栏就是指本站Devework.com上面logo右侧的广告栏,这个广告栏是纯用css+html打造的,没有使用图片。该代码最初来自大前端,经过简单的改造Jeff 移植到了WordPress主题中。下面先给出演示地址先(当然,本站也算是一个演示地址):

带尖角浮出公告栏样式:演示地址

做这个带尖角浮出公告栏最核心的代码就是那个小尖角,大前端的是用◆字符来制作的,制作三角形也可以用这个原理。据我所知,制作三角形的话还可以直接用css(好像border属性+margin=0),当然也可以直接用图片。其实我认为用图片也没啥问题啊,用css做个三角形的代码占用空间比个用图片的都大,如果我将图片用cssscript合并,请求数几乎不增,总体还占用更少空间。啊啊……说多了,直接上代码了(源代码来自大前端,在这里提供本站使用的这个左侧角的代码):

Html部分:

 <div class="poptip">
     <span class="poptip-arrow poptip-arrow-left"><em></em><i></i></span>
     Hi,又一个WordPress站点上线了!目前<br>是测试状态,欢迎各位反馈主题bug!来自Devework.com
 </div>

css部分:

.poptip{background:#FFFCEF;color: #DB7C22;float:left;position: relative;top:8px;left:40px;height: 35px;padding: 6px 10px 5px;font-size: 12px;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;}
.poptip-arrow-left{left:-6px;height: 12px;width: 6px;top: 12px;margin-top:-6px;}
.poptip-arrow-left em{left:1px;}
.poptip-arrow-left i{left:2px;}

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

这个代码兼容IE6-10、Chrome、Firefox等基本上所有主流浏览器,所以不必担心其兼容性和实用性。

还是那句,需要根据具体情况修改相关代码,直接套用是不行的。

评分:
4.89 avg. rating (96% score) - 44 votes
云左主机 广告
2 条 评论
  1. 匿名

    请问 Html部分 是加到哪里呢,头部和小工具栏我都加过,就是有一个问题,无法固定这个公告栏,把网页拉大拉小它就跟着动,该怎么固定呢,谢谢

    回复
    • CSS 的问题 ,自己调下

      回复
发表评论