社区（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.56mp.cn" class="home">首页 <small>逸诚科技</small></a></li>
        <li><a href="http://www.56mp.cn" class="profile">查看资料 <small>查看资料</small></a></li>
        <li><a href="http://www.56mp.cn" class="editprofile">编辑资料 <small>编辑资料</small></a></li>
        <li><a href="http://www.56mp.cn" class="contacts">联系方式 <small>联系方式</small></a></li>
        <li><a href="http://www.56mp.cn" class="messages">邮件 <small>邮件</small></a></li>
        <li><a href="http://www.56mp.cn" class="playlist">播放列表 <small>播放列表</small></a></li>
        <li><a href="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;
}

　　无序列表CSS部分：

　　#footpanel a.home{
 background: url(home.png) no-repeat 15px center;
 width: 50px;
 padding-left: 40px;
 border-right: 1px solid #bbb;
 text-indent: 0; /*--重置文本缩进--*/
}
a.profile{ background: url(user.png) no-repeat center center;  }
a.editprofile{ background: url(wrench_screwdriver.png) no-repeat center center; }
a.contacts{ background: url(address_book.png) no-repeat center center; }
a.messages{ background: url(mail.png) no-repeat center center; }
a.playlist{ background: url(document_music_playlist.png) no-repeat center center; }
a.videos{ background: url(film.png) no-repeat center center; }
a.alerts{ background: url(newspaper.png) no-repeat center center; }
#footpanel a.chat{
 background: url(balloon.png) no-repeat 15px center;
 width: 126px;
 border-left: 1px solid #bbb;
 border-right: 1px solid #bbb;
 padding-left: 40px;
 text-indent: 0; /*--重置文本缩进--*/
}
#footpanel li#chatpanel, #footpanel li#alertpanel { float: right; }  / *--右对齐聊天和警报面板 - * /

　　冒泡式的提示效果：

冒泡式的提示效果

　　#footpanel a small {
 text-align: center;
 width: 70px;
 background: url(pop_arrow.gif) no-repeat center bottom;
 padding: 5px 5px 11px;
 display: none; /*--默认情况下隐藏--*/
 color: #fff;
 font-size: 1em;
 text-indent: 0;
}
#footpanel a:hover small{
 display: block;
 position: absolute;
 top: -35px;
 left: 50%;
 margin-left: -40px;
 z-index: 9999;
}

　　 如果有什么不明白的可以加首页上的QQ进行咨询。