最近、セルフメディアの共有に関するコードをいくつか読み、最終的にプロジェクトで Baidu の共有コードを使用しました。Baidu が共有するコードの形式は次のとおりです
<div class="bdsharebuttonbox" data-tag="share_1"> <!-- 此处添加展示按钮 --></div><script> window._bd_share_config = { //此处添加分享具体设置 } //以下为js加载部分 with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];</script>設定を通じて、リンクを共有したり、写真を共有したり、共有の説明、共有チャネル、その他の情報を設定します。詳細については、Baidu のコード共有ドキュメントを参照してください
http://share.baidu.com/code/advance#config
実際の使用では、あまり設定は行わず、css の再設定を使用しました。スタイルの一部を書いて作成します。
私の次のデモ表示レンダリングはおそらくこのスタイルです。具体的なコードは次のとおりです:
html:
<!DOCTYPE html><html><head lang="cn"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>移动百度分享demo</title> <link rel="stylesheet" href="css/index.css" /></head><body> <h2 id="share"> 分享 </h2> <section class="screenW"> <div class="subW"> <div class="info"> <div class="shareBox"> <h2>请选择您的分享方式：</h2> <div class="bdsharebuttonbox"> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a> <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友">QQ</a> <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a> <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a> </div> <div class="bdsharebuttonbox"> <a href="#" onclick="return false;" class="popup_more" data-cmd="more"></a> </div> </div> </div> <div class="close">关闭</div> </div> </section> <script src="js/zepto.min.js"></script> <script src="js/main.js"></script></body></html>
css
html{font-size:10px;}html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-weight: normal; vertical-align:baseline;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}body {font-family:"Microsoft YaHei", Arial, Helvetica, sans-serif; background:#f5f5f5;}ol, ul { list-style:none;}em, i{font-style: normal;}blockquote, q { quotes:none;}blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}table { border-collapse:collapse; border-spacing:0;}* { tap-highlight-color:rgba(0, 0, 0, 0); -webkit-tap-highlight-color:rgba(0, 0, 0, 0); -webkit-box-sizing:border-box; box-sizing:border-box;}input, textarea { outline:0; resize:none; -webkit-appearance: none;}img{vertical-align: middle;}a{display: block; color: #333; text-decoration: none;}/*以下是样式代码*/#share{margin: 50px;text-align: center;}.screenW{width: 100%; height: 100%; position: fixed; left: 0; top: 0; background-color: rgba(0,0,0,0.5); z-index: 999; display: none;}.subW{width: 100%; height: 260px; position: absolute; left: 0; bottom: -260px; background-color: #FFF; z-index: 999;}.subW.move{ animation:sidebar-move .5s ease; -webkit-animation:sidebar-move .5s ease; bottom:0px;}.subW.back{ animation:sidebar-back .5s ease; -webkit-animation:sidebar-back .5s ease; bottom:-260px;}.subW .title{width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: .4rem;}.subW .close{width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: .4rem; color: #FFF; background: #2fc7c9;}.subW .info{width:100%; height: 220px; padding: 0 10px;}/*以下是对百度自带样式的改造*/.shareBox .bdshare-button-style0-16{ background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,.1) 50%,transparent 50%); background-image: linear-gradient(bottom,rgba(0,0,0,.1) 50%,transparent 50%); background-size: 100% 1px; background-repeat: no-repeat; background-position: left bottom; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}.shareBox .bdshare-button-style0-16:last-child{background: none;}.shareBox .bdshare-button-style0-16:after{ content: ""; visibility: hidden; display: none; height: 0; clear: both;}.shareBox .bdshare-button-style0-16 a{ text-align: center; float: none; font-size: 12px; padding: 35px 0 0 0; line-height: normal; height: auto; cursor: pointer; margin: 10px 0; position: relative; background: none; -webkit-box-flex:1; -webkit-flex:1; flex:1;}.shareBox .bdshare-button-style0-16 a:after{ content: " "; width:30px; height:30px; position: absolute; left: 50%; top: 0px; -webkit-transform: translate(-50%,0); transform: translate(-50%,0);}.shareBox .bdshare-button-style0-16 a.bds_qzone:after{ background: url("../img/icon_qqkongjian_yellow.png") no-repeat; background-size: 100%;}.shareBox .bdshare-button-style0-16 a.bds_tsina:after{ background: url("../img/icon_xinlangweibo_red.png") no-repeat; background-size: 100%;}.shareBox .bdshare-button-style0-16 a.bds_sqq:after{ background: url("../img/icon_qqhaoyou_blue.png") no-repeat; background-size: 100%;}.shareBox .bdshare-button-style0-16 a.bds_tqq:after{ background: url("../img/icon_qqweibo_green.png") no-repeat; background-size: 100%;}.shareBox .bdshare-button-style0-16 a.bds_weixin:after{ background: url("../img/icon_weixin_green.png") no-repeat; background-size: 100%;}.shareBox .bdshare-button-style0-16 a.popup_more{width: 100%; margin: 20px 0;}.shareBox .bdshare-button-style0-16 a.popup_more:after{ width:40px; height:40px; position: absolute; left: 50%; top: 0px; background: url("../img/icon_more_orange.png") no-repeat; background-size: 100%;}/*动画*/@keyframes sidebar-move { 0% { bottom:-260px; } 100% { bottom:0px; }}@keyframes sidebar-back { 0% { bottom:0px; } 100% { bottom:-260px; }}@-webkit-keyframes sidebar-move { 0% { bottom:-260px; } 100% { bottom:0px; }}@-webkit-keyframes sidebar-back { 0% { bottom:0px; } 100% { bottom:-260px; }}れーい
ダウンロードの場所は csdn 上にあり、アドレスは
http://download.csdn.net/detail/hufengsky123/9270163
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
