IT技术互动交流平台

使用CSS制作DotBlog对话框效果签名档

作者:blackie1019  发布日期:2013-10-09 20:36:23

小弟最近发现原来文章推荐数有点少(文章写得太没内容…orz),所以只好用哀兵策略,跪求看完文章的大大们给点指教或按个推荐之类的,想说来弄个签名档提醒大家一下吧

刚好之前有看到梅问题用CSS做对话框的效果

这边使用他教学的范例做了一些小修正后搭配了图片写成下面的html与CSS

 

<!--签名档CSS-->
<style type="text/css">
.mwt_border{
width: 250px;
height: 40px;
text-align: center;
color: #fff;
background: #252525;
position: relative;
border: solid 1px #252525;
margin-left: 80px;
top: -50px;
padding: 0px;
}
/*箭头右*/
.mwt_border .arrow_r_int{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent transparent transparent #252525;
    position:absolute;
    top:20%;
    right:-30px;
}
/*箭头右-边框*/
.mwt_border .arrow_r_out{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent transparent transparent #252525;
    position:absolute;
    top:20%;
    right:-29px;
}

/*箭头左*/
.mwt_border .arrow_l_int{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent #252525 transparent  transparent ;
    position:absolute;
    top:20%;
    left:-30px;
}
/*箭头左-边框*/
.mwt_border .arrow_l_out{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent #252525 transparent transparent ;
    position:absolute;
    top:20%;
    left:-29px;
}

/*箭头上*/
.mwt_border .arrow_t_int{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent transparent #252525 transparent ;
    position:absolute;
    top:-30px;
    left:40px;
}
/*箭头上-边框*/
.mwt_border .arrow_t_out{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:transparent transparent #252525 transparent ;
    position:absolute;
    top:-29px;
    left:40px;
}

/*箭头下*/
.mwt_border .arrow_b_int{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:#252525 transparent transparent transparent ;
    position:absolute;
    bottom:-30px;
    right:50px;
}
/*箭头下-边框*/
.mwt_border .arrow_b_out{
    width:0px;
    height:0px;
    border-width:15px;
    border-style:solid;
    border-color:#252525 transparent transparent transparent ;
    position:absolute;
    bottom:-29px;
    right:50px;
}</style>
<!--签名档HTML(http://www.minwt.com/css/8996.html)-->
<hr />
<div class="signature">
    <img alt="" src="http://dl.dropboxusercontent.com/u/20925528/%E6%8A%80%E8%A1%93Blog/images/profile2.jpg" style="width: 60px; height: 60px;" />
    <div class="mwt_border">
    <span class="arrow_l_int"></span>
    <span class="arrow_l_out"></span>
    如果觉得文章还不错麻烦请在文章最上面给予推荐,你的支持是小弟继续努力产出的动力!</div>
</div>

将上面的的内容贴到后台组态设定的文章签名档中的Source内(如下图)

 


 

这边要稍微注意一下,上面程序代码中倒数的几行,在编辑存档后如果再进去原始码修改则编辑器会把下面两行清除,所以这边建议可以先用批注的方式包起来之后有编修签名文件的时候要记得把这两行手动加回来。

 

<span class="arrow_l_int"></span>
<span class="arrow_l_out"></span>

以上就可完成一个对话框效果的签名档搂,大家一起来改一下吧~

Tag标签: CSS   DotBlog  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规