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

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

人人网页脚管理效果

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

HTML部分：

<div id="footpanel">
    <ul id="mainpanel">
        <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="home">首页 <small>逸诚科技</small></a></li>
        <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="profile">查看资料 <small>查看资料</small></a></li>
        <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="editprofile">编辑资料 <small>编辑资料</small></a></li>
        <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="contacts">联系方式 <small>联系方式</small></a></li>
        <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="messages">邮件 <small>邮件</small></a></li>
        <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="playlist">播放列表 <small>播放列表</small></a></li>
        <li><a href=http://www.chinaz.com/Design/Pages/"http://www.56mp.cn" class="videos">视频 <small>视频</small></a></li>
    </ul>
</div>

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 { /*--IE6 Hack - 固定定位到底部--*/
 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;
}

感谢 萧逸 的投稿

互诺科技