社区（SNS）是近年WEB2.0最火的应用，它以六度理论为模型，实际上是要建立一个映射，将人们实际生活联系在互联网体现出来。所以，反映人们真实生活与工作联系是Facebook、人人网、开心网等主流SNS的发展源动力。

今天我就教大家用jQuery+CSS来实现人人网页脚管理效果，有SNS站的站长们可以尝试移植到自己的网站上来增加网站的用户黏度。

人人网页脚管理效果

演示效果：http://www.56mp.cn/upload/renren/

HTML部分：

   

       
• 首页 逸诚科技

       
• 查看资料 查看资料

       
• 编辑资料 编辑资料

       
• 联系方式 联系方式

       
• 邮件 邮件

       
• 播放列表 播放列表

       
• 视频 视频

   

CSS部分：

用CSS定义底部位置和宽度：

#footpanel {
 position: fixed;
 bottom: 0; left: 0;
 z-index: 9999;
 background: #e3e2e2;
 border: 1px solid #c3c3c3;
 border-bottom: none;
 width: 94%;
 margin: 0 3%;
}

你可能会想，IE6不支持固定定位，下面就告诉你解决IE6不支持固定定位的方法：

*html #footpanel {
 margin-top: -1px;
 position: absolute;
 top:expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+

(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-

this.clientHeight));
}

无序列表HTML部分：

#footpanel ul {
 padding: 0; margin: 0;
 float: left;
 width: 100%;
 list-style: none;
 border-top: 1px solid #fff;
 font-size: 1.1em;
}
#footpanel ul li{
 padding: 0; margin: 0;
 float: left;
 position: relative;
}
#footpanel ul li a{
 padding: 5px;
 float: left;
 text-indent: -9999px;
 height: 16px; width: 16px;
 text-decoration: none;
 color: #333;
 position: relative;
}
html #footpanel ul li a:hover{ background-color: #fff; }
html #footpanel ul li a.active {
 background-color: #fff;
 height: 17px;
 margin-top: -2px;
 border: 1px solid #555;
 border-top: none;
 z-index: 200;
 position: relative;
}