类似于人人网、QQ空间的导航条,主要是顶端的导航条不随滚动条的滚动而滚动
<!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>导航条固定</title>
<style type="text/css">
body
{
background-attachment:fixed;
background-color: #ffffff;
text-align: center;
width: 960px;
height:100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#nav
{
width: 960px;
overflow:visible;
position: fixed;/*固定作用*/
top: 0px;
/*ie6下样式,加下划线表示只针对ie6 的hack */
_position:absolute;/* 把导航栏位置定义为绝对位置 关键*/
_top: expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
z-index:9999; /* 让导航栏浮在网页的高层位置,遇到flash和图片时候也能始终保持最外层 */
text-align:left;
height:40px;
background-color:#6666ff;
color:#ffffff;
padding-left:0px;
}
#nav a
{
color:#ffffff;
font-size:20px;
text-decoration:none;
}
#nav a:hover
{
text-decoration:underline
}
#main
{
text-align: center;
width:960px;
height:auto;
text-align:left;
padding-top:45px;
}
#bottom
{
text-align: center;
height: 50px;
width: 960px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #252525;
margin-top:10px;
}
</style>
</head>
<body>
<div id="nav">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td valign="middle" style="width:25%;">
<a href="#" target="_blank">分类1</a>
</td>
<td valign="middle" style="width:25%;">
<a href="#" target="_blank">分类2</a>
</td>
<td valign="middle" style="width:25%;">
<a href="#" target="_blank">分类3</a>
</td>
<td valign="middle" style="width:25%;">
<a href="#" target="_blank">分类4</a>
</td>
</tr>
</table>
</div>
<div id="main">
<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>!</p>
<p>!</p>
<p>!</p>
</div>
<div id="bottom">Copyright © All Rights Reserved </div>
</body>
</html>