采用列表标签ul li + CSS布局+浮动css导航条。
实现代码;
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html>
<head>
<meta =\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title></title>
<style type=\"text/css\">
#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
</style>
</head>
<body>
<div id=\"nav\">
<ul>
<li>HomePage</li>
<li>Div CSS教程</li>
<li>CSS布局实例</li>
<li>CSS2.0教程 </li>
<li>CSS在线手册</li>
<li>Web标准</li>
<li>XHTML教程</li>
</ul>
</div>
</body>
</html>
<!doctype html><html><head><meta charset=\"utf-8\"><title>盒子边框</title><style type=\"text/css\">*{ text-align:center;}span{ font-size:30px;}.head{ width:95%; height:50px; border:3px solid red; color:red; position:fixed; //这个定位方式是最重要的css导航条，他可以将盒子固定在指定的位置 top:0px; //这就是定位的位置，距离顶端0px}.head_black{ width:100%; height:56px;}.content{ width:100%; height:1000px; border:3px solid blue; color:blue;}</style></head><div class=\"head\"> <span>头部</span></div><div class=\"head_black\"> <!-- 设置空白，因为head在定为fixed后是不占据页面空间的--></div><div class=\"content\"> <span>下部</span> </div><body></body></html>
直接贴我看了题写的实例代码吧css导航条。我想你应该是这个意思吧。把导航栏固定在最上部。重点都在里面，如有疑问 欢迎追问
