今天在网上查阅相关资料的时候,无意中看到一款设计得比较有个性化的百度分享按钮样式,由于比较喜欢这种风格,于是就把这个效果抠出来分享给大家,万一你也看去了那就直接可以使用了。这种效果实现的原理很简单,就是添加一个<div class="diyShare">元素来包含百度分享代码的HTML代码部分,以便设置优先级更高的相关样式规则来覆盖百度分享代码默认设置的样式规则,来实现我们想要的效果,我们来看以下代码:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>自定义百度分享按钮样式-网站程序网</title> <style type="text/css"> /* 覆盖百度分享代码默认设置的按钮样式规则 */ .diyShare {width:100%;margin:0 auto;text-align:center} .diyShare .bdsharebuttonbox {display:table;margin:0 auto} .diyShare .bdsharebuttonbox a {float:left;font-size:0.75em;display:block;padding:0 12px;padding-left:40px;height:32px;line-height:32px;margin:0 3px;border-radius:5px;text-decoration:none;color:#FFF;text-indent:0;width:auto} .diyShare .bdsharebuttonbox a:hover {color:#FFF} .diyShare .bdsharebuttonbox .bds_count {width:48px;padding:0;text-align:center;color:#333} .diyShare .bdsharebuttonbox .bds_count:hover{color:#000} .diyShare .bdsharebuttonbox .bds_more{color:#444;padding:0;margin:0;background:none} .diyShare .bdsharebuttonbox .bds_more:hover{color:black} .diyShare .bdsharebuttonbox a.bds_weixin {background:#3CB034 url(http://www.wangzhanchengxu.com/statics/limages/wk_share.png) no-repeat 0 0} .diyShare .bdsharebuttonbox a.bds_sqq {background:#2384CC url(http://www.wangzhanchengxu.com/statics/limages/wk_share.png) no-repeat 0 -30px} .diyShare .bdsharebuttonbox a.bds_tsina {background:#E6162D url(http://www.wangzhanchengxu.com/statics/limages/wk_share.png) no-repeat 0 -60px} .diyShare .bdsharebuttonbox a.bds_qzone {background:#FFCE00 url(http://www.wangzhanchengxu.com/statics/limages/wk_share.png) no-repeat 0 -90px} .diyShare .bdsharebuttonbox a.bds_tqq {background:#45AAF2 url(http://www.wangzhanchengxu.com/statics/limages/wk_share.png) no-repeat 0 -118px} .diyShare .bdsharebuttonbox a.bds_renren {background:#217DC6 url(http://www.wangzhanchengxu.com/statics/limages/wk_share.png) no-repeat 0 -149px} </style> </head> <body> <div class="diyShare"> <div class="bdsharebuttonbox"> <a href="#" class="bds_more" data-cmd="more">分享到:</a> <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a> <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友">QQ好友</a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a> <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a> <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网">人人网</a> <a class="bds_count" data-cmd="count"></a> </div> </div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"image":{"viewList":["weixin","sqq","tsina","qzone","tqq","renren"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["weixin","sqq","tsina","qzone","tqq","renren"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </body> </html>
输出的效果如下所示: