自定义百度分享样式固定侧栏-CSS样式

这个教程是鸟哥那里转载过来的,不过我做了个小小修改,因为我在运用到其他网站的时候出现样式冲突,修改被冲突的DIV就好了,HTML代码如下:

  1. <!– 分享 –>  
  2. <div id=“share-baidu”>    
  3.     <div class=“share-baidu”>    
  4.         <div id=“bdshare” class=“bdshare_t bds_tools get-codes-bdshare”>    
  5.             <a class=“bds_tsina”></a>    
  6.             <a class=“bds_tqq”></a>    
  7.             <a class=“bds_qzone”></a>    
  8.             <a class=“bds_taobao”></a>  
  9.             <a class=“bds_qq”></a>  
  10.             <span class=“bds_more”></span>    
  11.         </div>    
  12.         <div style=“clear:both;”></div>    
  13.     </div>    
  14. </div>    
  15. <script type=“text/javascript” id=“bdshare_js” data=“type=tools&amp;uid=0” ></script>    
  16. <script type=“text/javascript” id=“bdshell_js”></script>    
  17. <script type=“text/javascript”>    
  18. document.getElementById(“bdshell_js”).src = “http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=” + Math.ceil(new Date()/3600000)    
  19. </script>    

把这个代码放到网站页脚,后面的taobao和qq,是我自己改的,大家可以参考这里 自定义!

然后把下面这个样式表加在自己的样式表文件里面

  1. <style type=“text/css”>  /* 如果直接加在html文件里请带上 */  
  2. #share-baidu {    
  3.     display:block;    
  4.     width:35px;    
  5.     margin-left:-546px;/* 修改左右位置 */    
  6.     position:fixed;    
  7.     left:50%;    
  8.     top:420px;/* 修改上下位置 */    
  9.     _margin-left:-546px;/* IE6修改左右位置 */    
  10.     _position:absolute;    
  11.     _margin-top:420px;/* IE6修改上下位置 */    
  12.     _top:expression(eval(document.documentElement.scrollTop));    
  13.     }    
  14. .share-baidu {    
  15.     background:#fff;    
  16.     width:24px;    
  17.     border1px solid #ccc;    
  18.     border-radius:5px 0 0 5px;    
  19.     }    
  20. #bdshare_l {    
  21.     border-radius: 5px;    
  22.     }    
  23. div #bdshare_l_c {    
  24.     border1px solid #ccc;    
  25.     border-radius: 5px;    
  26.     }    
  27. #bdshare h6, #bdshare_s h6,#bdshare p, #bdshare_s p {    
  28.     display:none;    
  29.     }    
  30. </style> /* 如果直接加在html文件里请带上 */  

-baidu 是被我修改过的DIV,因为,如果直接用share有时候会和某些网站主题样式冲突,所以改了DIV名称!

另外,如果加在CSS文件里面,不需要前后两个style标签,如果是直接加载显示文件的话,就需要了,这个,会点代码的人应该都懂…

文章参考:http://zmingcx.com/fixed-baidu-share-button.html

baidu-share

发布者

yumanutong

网名 yumanutong ,简称小草,可以付费找我解决问题哦。