分享一个关注QQ微博的小样式

PHPWIND[民间论坛]数据搬迁导致丢失严重,用户数据基本全部损坏,十分遗憾来自phpwind.me的远古记忆

免责声明

董宝中离线 4K阅读 1回复于 2014-06-26 23:55 发布在技术文献分类

效果是这样的：

图片：1.jpg

具体的你们去我的网站看，大学知网（http://www.unki.cn）

我从前面有人分享的糗事百科的PW风格里面提取的，CSS和HTML我都提取出来放下面的附件里，大家用DIY创建一个HTML静态模板复制进去就能用了。其中图片的默认路径是网站根目录，如果不放根目录的同学自己修改代码里的图片路径就行。

&lt;style&gt;
.snslink a {
    display:block;
    clear:both;
    font-size:14px;
    height:35px;
    line-height:35px
}
.snslink a:hover {
    padding-left:5px;
    padding-right:5px;
    margin-left:-5px;
    margin-right:-5px;
    box-shadow:0 1px 1px rgba(0,0,0,0.2);
    background:#fcfbea;
    text-decoration: NONE
}   
  
      
.ptb-m {
    padding-top:10px;
    padding-left:5px;
    padding-right:10px
}   
      
.sns-button {
    float:right;
    padding:6px;
    margin-top:5px;
    line-height:100%;
    font-size:12px;
    color:#ccc;
    background:#fff;
    box-shadow:1px 1px 1px rgba(0,0,0,0.2)
}
.icon-android,.icon-ios,.icon-qzone,.icon-tencent,.icon-weibo,.icon-feed {
    display:block;
    float:left;
    width:25px;
    height:25px;
    margin:5px 10px 5px 0;
    vertical-align:middle
}
.icon-search {
    width:25px;
    height:25px;
    margin:2px 0 2px -27px;
    vertical-align:middle;
    text-indent:-10000px
}
.input-search {
    padding-right:35px
}
.icon-android,.icon-ios,.icon-qzone,.icon-tencent,.icon-weibo,.icon-feed,.icon-search {
    background:url("web_home.png") no-repeat scroll;
    background-size:auto
}
  
.icon-android {
    background-position:0 -260px
}
.icon-ios {
    background-position:0 -285px
}
.icon-qzone {
    background-position:0 -310px
}
.icon-tencent {
    background-position:0 -335px
}
.icon-weibo {
    background-position:0 -360px
}
.icon-feed {
    background-position:0 -385px
&lt;/style&gt;
  
&lt;div class="snslink ptb-m"&gt;
&lt;a href="http://user.qzone.qq.com/2665353473" target="_blank"&gt;
&lt;div class="sns-button"&gt;访问&lt;/div&gt;
&lt;div class="icon-qzone"&gt;&lt;/div&gt;
&lt;font color="#999999"&gt;认证空间&lt;/font&gt;
&lt;/a&gt;
&lt;a href="http://t.qq.com/wenni_me" target="_blank"&gt;
&lt;div class="sns-button"&gt;关注&lt;/div&gt;
&lt;div class="icon-tencent"&gt;&lt;/div&gt;
&lt;font color="#999999"&gt;腾讯微博&lt;/font&gt;
&lt;/a&gt;
&lt;a href="http://weibo.com/unkiwb" target="_blank"&gt;
&lt;div class="sns-button"&gt;关注&lt;/div&gt;
&lt;div class="icon-weibo"&gt;&lt;/div&gt;
&lt;font color="#999999"&gt;新浪微博&lt;/font&gt;
&lt;/a&gt;
&lt;a href="http://shang.qq.com/wpa/qunwpa?idkey=e6a7eb98fa0312076fa96e13cccc99b6f4ae9549434ea74d3013e7047cde48b5" target="_blank"&gt;
&lt;div class="sns-button"&gt;加入&lt;/div&gt;
&lt;div class="icon-feed"&gt;&lt;/div&gt;
&lt;font color="#999999"&gt;大学生QQ群&lt;/font&gt;
&lt;/a&gt;
&lt;/div&gt;

图片自己另存为，上面的二维码没修改懒得弄了，不影响：web_home.zip