今天对留言评论的风格进行了优化,增加了小小尖角提示,以及边框的发光效果,当然这些都是用html+css实现的,没有用到图片啊,我觉得这个功能非常实用,在SDLog中使用后还可以搬到其他程序中用,先看看效果怎样。  

代码如下

HTML代码:

<div id="e-345" class="comment clear">
       <div class="avatar font-12"><a href="/goto/http://www.quke.org/" target="_blank">kukei</a></div>
       <div class="cmtctt poptip">
             <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span>
             <div class="cmtctt-ctt font-12">测试新版留言风格</div>
             <div class="cmtctt-operate font-12"></div>
       </div>
</div>

CSS代码:

/* poptip */
.poptip{position:relative;border-radius: 2px;box-shadow: 0 0 3px #ddd;}
.poptip-arrow{position:absolute;overflow:hidden;font-style:normal;font-family:simsun;line-height:16px;font-size:12px;text-shadow:0 0 4px #AAA;}
      
.poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}
.poptip-arrow em{color: #2299CC;}
.poptip-arrow i{color: #FFFCEF;text-shadow:none;}
      
.poptip-arrow-top,.poptip-arrow-bottom{height: 6px;width: 12px;left:30px;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;}

这些代码都是参考http://www.daqianduan.com/css-poptip/ 的做法,谢谢了。