Skip to content

Instantly share code, notes, and snippets.

@suhaotian

suhaotian/index.html

Created March 20, 2017 03:13
Show Gist options
  • Save suhaotian/d6b31feea35435d3167ddbed8dde5a6f to your computer and use it in GitHub Desktop.
Save suhaotian/d6b31feea35435d3167ddbed8dde5a6f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/zucapenaso
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
ul {
margin: 0;
padding: 0;
}
.share-list {
padding:40px 20px 35px;
overflow-x:auto
}
.share-list ul {
text-align: center;
}
.share-item {
display:inline-block;
margin-right:30px
}
.share-item i {
display:inline-block;
width:50px;
height:50px;
background:url(//css.tv.itc.cn/m/img/icon_share.png) no-repeat;
background-size:400px
}
.share-item .qq {
background-position:-140px 0
}
.share-item .weibo {
background-position:-210px 0
}
.share-item .qzone {
background-position:-280px 0
}
.share-item .wxtimeline {
background-position:-69px 0
}
.share-item .wxfriends {
background-position:0 0
}
</style>
</head>
<body>
<div class="share-list"><ul>
<li class="share-item share-item-qqb">
<a href="javascript:void(0)">
<i class="wxfriends"></i>
</a>
</li>
<li class="share-item share-item-qqb">
<a href="javascript:void(0)">
<i class="wxtimeline"></i>
</a>
</li>
<li class="share-item share-item-qqb">
<a target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://baidu.com/&desc=baidu分享233&pics=https://img6.bdstatic.com/img/image/smallpic/anyixuan.jpg">
<i class="qq"></i>
</a>
</li>
<li class="share-item share-item-qqb">
<a target="_blank" href="http://service.t.sina.com.cn/share/share.php?appkey=customkey&url==http://baidu.com/&title=baidu分享233&pic=https://img6.bdstatic.com/img/image/smallpic/anyixuan.jpg">
<i class="weibo"></i>
</a>
</li>
<li class="share-item share-item-qqb">
<a target="_blank" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url==http://baidu.com/&title=baidu分享233&pics=https://img6.bdstatic.com/img/image/smallpic/anyixuan.jpg">
<i class="qzone"></i>
</a>
</li>
</ul></div>
<script id="jsbin-source-css" type="text/css">ul {
margin: 0;
padding: 0;
}
.share-list {
padding:40px 20px 35px;
overflow-x:auto
}
.share-list ul {
text-align: center;
}
.share-item {
display:inline-block;
margin-right:30px
}
.share-item i {
display:inline-block;
width:50px;
height:50px;
background:url(//css.tv.itc.cn/m/img/icon_share.png) no-repeat;
background-size:400px
}
.share-item .qq {
background-position:-140px 0
}
.share-item .weibo {
background-position:-210px 0
}
.share-item .qzone {
background-position:-280px 0
}
.share-item .wxtimeline {
background-position:-69px 0
}
.share-item .wxfriends {
background-position:0 0
}</script>
</body>
</html>
Raw
jsbin.zucapenaso.css
ul {
margin: 0;
padding: 0;
}
.share-list {
padding:40px 20px 35px;
overflow-x:auto
}
.share-list ul {
text-align: center;
}
.share-item {
display:inline-block;
margin-right:30px
}
.share-item i {
display:inline-block;
width:50px;
height:50px;
background:url(//css.tv.itc.cn/m/img/icon_share.png) no-repeat;
background-size:400px
}
.share-item .qq {
background-position:-140px 0
}
.share-item .weibo {
background-position:-210px 0
}
.share-item .qzone {
background-position:-280px 0
}
.share-item .wxtimeline {
background-position:-69px 0
}
.share-item .wxfriends {
background-position:0 0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment