类似QQ空间6.0版的导航条固定

　　自从QQ空间6.0版本出来以后，一直想做一个与它类似的导航条，主要是top部分不随滚动条的滚动而滚动，以下是我今天研究出来的一个方法，现在贴出来跟大家分享，希望大家一起学习啊。（这也是我在博客园发布的第一篇正式博客）

1、首先看下html代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <title>Made by Tandy Tang</title>
 <link href="indexcss.css" rel="stylesheet" type="text/css">
</head>
<body>
 <div id="login">
  <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
   <tr>
    <td align="left" valign="middle" style="50%;"><a href="http://www.cnblogs.com/tandyshen" target="_blank">博客园博客</a>
    </td>
    <td align="right" valign="middle" style="50%;"><a href="http://www.cnblogs.com/tandyshen" target="_blank">联系我</a>
    </td>
   </tr>
  </table>
 </div>
 <div id="main">
  <p>版</p>
  <p>权</p>
  <p>归</p>
  <p>Tandy</p>
  <p>Tang</p>
  <p>所</p>
  <p>有</p>
  <p>，</p>
  <p>转</p>
  <p>载</p>
  <p>或</p>
  <p>使</p>
  <p>用</p>
  <p>请</p>
  <p>注</p>
  <p>明</p>
  <p>作</p>
  <p>者</p>
  <p>，</p>
  <p>谢</p>
  <p>谢</p>
  <p>.</p>
  <p>.</p>
  <p>.</p>
 </div>
 <div id="bottom">Copyright &copy; 2011 Tandy Tang. All Rights Reserved </div>
</body>
</html>

2、再看下CSS代码。

/*CSS Made by Tandy Tang*/
body 
{
 background-image:url(about:blank);
 background-attachment:fixed;
 background-color: #ffffff;
 text-align: center;
  960px;
 height:100%;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 background-image: url(a.jpg);
 background-repeat: repeat-x;
}
#login
{
  960px;
 overflow:visible;
 position: fixed;/*固定作用*/
 top: 0px;
 _position:absolute;
 _top: expression(documentElement.scrollTop + "px"); 
 text-align:left;
 height:50px;
 background-color:#252525;
 color:#ffffff;
 padding-left:0px;
}
#login a
{
 color:#ffffff;
 font-size:20px;
 text-decoration:none;
}
#login a:hover
{
 text-decoration:underline
}
#main
{
 960px;
 height:auto;
 text-align:left;
 padding-top:55px;
}
#bottom
{
 text-align: center;
 height: 50px;
  960px;
 border-top- 2px;
 border-top-style: solid;
 border-top-color: #252525;
 margin-top:10px;
}

3、怎么看效果？把1中的代码ctrl+c全部复制到一个*.htm文件中，把2中代码ctrl+c全部复制到一个*.css文件中，另外还要弄一个.jpg图片1*50，用做body的背景图片，颜色与login的颜色一样，你们懂的呀...

效果图如下：

PS：代码很简单，所以也没有加太多的注释，如果有看不懂的，就联系我吧，如果有什么错误，还请大家指正，一定虚心请教，共同进步。

作者：大神神风
出处：http://www.cnblogs.com/tandyshen/
感谢您点【推荐】，祝您事业有成，生活愉快，健康美丽。