添加简单而实用的公告栏样式-WP酷

 

图上的样式你绝对见过，它不论是在新浪微博，还是在各大博客、论坛中都被广泛使用。话不多说，上代码……

 

加入至 Style.css：

/* 宽度、margin、position 这些属性都是可以更改的 */
#bigfa-tipBox {margin: 5px 0 0 2em;position:relative;width:400px;height:30px}
.bigfa {background-color: #FFFCEF;border: 1px solid #FFBB76;border-radius: 2px 2px 2px 2px;box-shadow: 0 0 3px #DDDDDD;color: #DB7C22;font-family: Microsoft Yahei;font-size: 12px;left: -2px;line-height: 16px;padding: 6px 10px 5px;position: absolute;}
.bigfa a {padding: 0 5px;}
.bigfa-arrow {font-family: simsun;font-size: 12px;font-style: normal;overflow: hidden;position: absolute;text-shadow: 0 0 2px #CCCCCC;}
.bigfa-arrow em, .bigfa-arrow i {font-style: normal;left: 0;position: absolute;top: 0;}
.bigfa-arrow em {color: #FFBB76;}
.bigfa-arrow i {color: #FFFCEF;text-shadow: none;}
.bigfa-arrow-top, .bigfa-arrow-bottom {height: 6px;left: 12px;margin-left: -6px;width: 12px;}
.bigfa-arrow-left, .bigfa-arrow-right {height: 12px;margin-top: -6px;top: 12px;width: 6px;}
.bigfa-arrow-top {top: -6px;}
.bigfa-arrow-top em {top: -1px;}
.bigfa-arrow-top i {top: 0;}
.bigfa-arrow-bottom {bottom: -6px;}
.bigfa-arrow-bottom em {top: -8px;}
.bigfa-arrow-bottom i {top: -9px;}
.bigfa-arrow-left {left: -6px;}
.bigfa-arrow-left em {left: 1px;}
.bigfa-arrow-left i {left: 2px;}
.bigfa-arrow-right {right: -6px;}
.bigfa-arrow-right em {left: -6px;}
.bigfa-arrow-right i {left: -7px;}

 

 

样式一

<div id="bigfa-tipBox">
<div class="bigfa">
<span class="bigfa-arrow bigfa-arrow-top"><em>◆</em><i>◆</i></span> 测试测试测试测试</div>
</div>
◆◆测试测试测试测试

 

样式二

<div id="bigfa-tipBox">
<div class="bigfa">
<span class="bigfa-arrow bigfa-arrow-bottom"><em>◆</em><i>◆</i></span> 测试测试</div>
</div>
◆◆测试测试

 

样式三

<div id="bigfa-tipBox">
<div class="bigfa">
<span class="bigfa-arrow bigfa-arrow-left"><em>◆</em><i>◆</i></span> 测试测试~</div>
</div>
◆◆测试测试~

 

样式四

<div id="bigfa-tipBox">
<div class="bigfa">
<span class="bigfa-arrow bigfa-arrow-right"><em>◆</em><i>◆</i></span> 测试测试</div>
</div>
◆◆测试测试