图上的样式你绝对见过,它不论是在新浪微博,还是在各大博客、论坛中都被广泛使用。话不多说,上代码……
加入至 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>
◆◆测试测试
这个在大前段那里看过,后来弄到了自己就主题上,发现完全没感觉……
@蚊哥 好像比较容易被无视……
wp酷博主能不能看下这个站点的右栏目每日推荐是怎么实现的,求调教www.mumuwz.com
@菜鸟 很抱歉这个凭我是无法实现的了……
@WP酷 http://blog.wpjam.com/m/bxslider/ 我找到了一个和此效果差不多的插件,可以去试下
div+css搞定,简单实用,不错!!!
看不到效果啊
@慧客数码 果然不应该用本站做演示……效果加上了,可能需要等等
@WP酷 实际上您可以直接看看上面的截图,效果一致