pc網站的分享程式碼樣式很多，但手機端由於螢幕小，所以分享程式碼最好是彈出收縮效果的。下面來分享一下wap下拉分享程式碼。

工具/原料

方法/步驟

首先獲取百度分享程式碼，選取下圖樣式

程式碼head裡引用jq

定義頭部css

body{-webkit-text-size-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;}

新增html程式碼

顯示效果如下

新增分享程式碼樣式

.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;}