博客右侧联系方式

  • A+
所属分类:技巧工具

在某博客看到的侧栏联系方式,感觉不错。保存下来,以备后用。

调用代码:

<dd id="me">
<h3>联系我们</h3>
<ul id="call">
<a href="http://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes" class="qq">QQ:<br />12345678</a><a href="http://www.taobao.com/webww/ww.php?ver=3&touid=123456&siteid=cntaobao&status=1&charset=utf-8" class="ww">旺旺:<br />123456</a><a href="http://weibo.com/123456" class="sina">微博:<br />新浪微博
</a><a href="http://t.qq.com/123456" class="x">微博:<br />腾讯微博</a></ul></dd>

css代码:

#me dt,#me h3{
line-height: 35px;
background-color: #f1f1f1;
height: 35px;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
font-family: "微软雅黑";
font-size: 14px;
font-weight: 700;
margin: 0px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
}
#me ul{
background-color: #FFFFFF;
list-style-type: none;
font-size: 12px;
margin-top: 1px;
}
#help li{
list-style-type: none;

}
#help a{
height: 35px;
overflow: hidden;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #edecec;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
line-height: 35px;
display: block;
}
#help a:hover{
background-color: #f1f1f1;
}
#me #call{
background-image: url(img/qq.png);
height: 105px;
margin-top: 1px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-position: 5px 5px;
background-color: #FFFFFF;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
}
#me #help{
height: 144px;
overflow: hidden;
}
#call a{display: block;float: left;height: 38px;width: 80px;margin-right: 2px;margin-left: 0px;margin-top: 0px;margin-bottom: 2px;font-size: 12px;padding-top: 12px;padding-right: 0px;padding-bottom: 0px;padding-left: 45px;overflow: hidden;}
.qq:hover{
background-image: url(img/qq1.png);
background-repeat: no-repeat;
background-position: 5px 4px;
}
.ww:hover{background-image: url(img/qq1.png);background-repeat: no-repeat;background-position: -122px 3px;}
.sina:hover{background-image: url(img/qq1.png);background-repeat: no-repeat;background-position: 5px -49px;}
.tengx:hover{background-image: url(img/qq1.png);background-repeat: no-repeat;background-position: -122px -49px;}

图片素材:lianxijietu

代码文件:youcelianxi

演示效果:

lianxiefangshijietu

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: