怎样添加手机wap网站下拉微博、微信分享代码

1、首先获取百度分享代码，选取下图样式

2、代码head里引用jq<script language="javascript" type="text/javascript" src="jquery-1.7.2.min.js"></script>

3、定义头部cssbody{-webkit-text-si所鼙艘疯ze-adjust:none;font-family:"microsoft yahei媪青怍牙",Verdana,Arial,Helvetica,sans-serif;font-size:1em;min-width:320px;background:#eee;}*{margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0}ul,ol,li{list-style:none}h1.logo {position:absolute;width:136px;height:55px;overflow:hidden;}h1.logo a{display:block;height:100%; color:#FFFFFF; text-decoration:none;}h1.logo a:hover{color:#FFFFFF;}#top{height:55px;line-height:55px;font-size:14px;overflow:hidden;background:#339966;}#top .header-title{width:120px; float:left;color:#fff;overflow:hidden;text-align:center;font-size:16px;white-space:nowrap;text-overflow:ellipsis;}#top .site-nav{position:absolute;right:5px;top:10px;height:36px;}#top .site-nav ul li{float:left;width:36px;height:36px;margin-left:5px;overflow:hidden;}#top .site-nav ul li.allcate{background:url(images/share.png) no-repeat;background-size:100%;}#top .site-nav ul li.home{background:url(images/home.png) no-repeat;background-size:100%;}#top .site-nav ul li.home a,#top .site-nav ul li.allcate a.message{display:block;height:100%;text-indent:-9999em;}

4、添加html代码<div id="top"> <h1 class="logo"><a href="/">手机网站</a></h1> <div class="site-nav"> <ul class="fix"> <li class="home"><a href="/">首页</a></li> <li class="allcate"><a href="javascript:;"class="message" id="activator_share">分享</a> </li> </ul> </div></div>显示效果如下

5、添加分享代码样式.box{position:absolute;top:-400px;width:100%;color:#7F7F7F;margin:auto;padding:0px;z-index:9;text-align:center;}.box_content_center{background-color:#969696;margin:0 8px 0 8px;color:#FFFFFF;-moz-border-radius-bottomleft:8px;-webkit-border-bottom-left-radius:8px;-khtml-border-bottom-left-radius:8px;-moz-border-radius-bottomright:8px;-webkit-border-bottom-right-radius:8px;-khtml-border-bottom-right-radius:8px;}.box_content_tab{background-color:#969696;margin:0 8px 0 8px;color:#FFFFFF; text-align:center;-moz-border-radius-topleft:8px;-webkit-border-top-left-radius:8px;-khtml-border-top-left-radius:8px;-moz-border-radius-topright:8px;-webkit-border-top-right-radius:8px;-khtml-border-top-right-radius:8px;border-bottom:1px #595959 solid; padding:12px 0 12px 0; font-size:18px;}a.boxclose{cursor:pointer;color:#FFFFFF; width:67px; height:43px;background:url(../images/close_bt.png) no-repeat center; line-height:43px; font-size:14px; font-weight:bold; margin:20px 0px 20px 0; text-align:center;display:block; float:right;text-shadow:1px 1px #085C8F;}a.boxclose_right{background-color:#969696;cursor:pointer;color:#FFFFFF; width:57px; height:33px;-moz-border-radius-topleft:8px;-webkit-border-top-left-radius:8px;-khtml-border-top-left-radius:8px;-moz-border-radius-topright:8px;-webkit-border-top-right-radius:8px;-khtml-border-top-right-radius:8px; -moz-border-radius-bottomleft:8px;-webkit-border-bottom-left-radius:8px;-khtml-border-bottom-left-radius:8px;-moz-border-radius-bottomright:8px;-webkit-border-bottom-right-radius:8px;-khtml-border-bottom-right-radius:8px;line-height:33px; font-size:14px; font-weight:bold; margin:10px 25px 20px 0; text-align:center;display:block; float:right;}.form_content{padding:20px 15px 10px 15px; text-align:left;}.form_content label{ font-size:16px; font-weight:bold;line-height:28px;}input.form_input{width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px; background-color:#c8e2f1; height:30px; border:1px #08628F solid; color:#000000;}input.form_input_box{width:100%;-moz-border-radius:8px;-webkit-border-radius:8px;-khtml-border-radius:8px; background-color:#6F6F6F; height:32px; border:1px #808080 solid; color:#fff;}textarea.form_textarea{width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px; background-color:#c8e2f1; height:80px; border:1px #08628F solid; color:#000000;}input.form_submit{cursor:pointer;color:#FFFFFF; width:67px; height:43px;background:url(images/left_bt.png) no-repeat center; border:none; line-height:43px; font-size:14px; font-weight:bold; margin:20px 15px 20px 0;display:block; float:right;text-shadow:1px 1px #085C8F; font-family:'Microsoft YaHei',Arial;}input.form_submit_right{cursor:pointer;color:#FFFFFF; width:67px; height:43px;background:url(images/left_bt.png) no-repeat center; border:none; line-height:43px; font-size:14px; font-weight:bold; margin:20px 0px 20px 0;display:block; float:right;text-shadow:1px 1px #085C8F; font-family:'Microsoft YaHei',Arial;}.box_content h3{font-size:22px; font-weight:normal; padding:15px 0 10px 0; margin:0px;color:#FFFFFF;text-shadow:1px 1px #085C8F;}/*------------social icons------------------*/.social_share{width:100%;text-align:center;padding:15px 0 0 0;}.social_share ul{ padding:0px; margin:0px; list-style:none; display:inline-block;}.social_share ul li{ padding:0px; margin:10px 8px 15px 8px;display:inline-block;}

6、添加分享html代码、百度分享代码和js代码<div class="box" id="box_share"> <div class="box_content"> <div class="box_content_tab"> 分享 </div> <div class="box_content_center"> <div class="social_share"> <ul>百度分享代码 </ul> </div> <a class="boxclose_right" id="boxclose_share">关闭</a> <div class="clear"></div> <script language="javascript"> $('#activator_share').click(function(){ $('#box_share').animate({'top':'55px'},500); }); $('#boxclose_share').click(function(){ $('#box_share').animate({'top':'-400px'},500); });</script> </div> </div> </div>