创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。但这样有意义吗？
现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered list）来标识。再应用CSS样式对其进行控制，按我们预想的形式在容器中显示出来。对导航条使用无序列表似乎是不符合直观感受的，因为我们习惯于把无序列表作为一个竖着推起来的列表项目，每个前面都放着一个列表预设标记。这似乎不符合导航条水平方向的习惯。但作为独立列表项目集合的列表逻辑结构能够适用于导航条里的链接；而CSS的规则让你能够强制取代列表项目缺省的表现形式，以消除它们并安排列表项在容器内按水平方向排列，而不是从上而下的规则。现在让我们来看看实例，根据无序列表创建CSS样式和XHTML标签的横向导航菜单。
#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
}
给你个参考
<html>
<head>
<style>
h1{
font-size:40px
text-align:center
}
#page{
width:300px
height:500px
margin:0 auto
}
#header{
border: 1px red dashed
width:100%
height:80px
background: #FDFDFD
}
#content{
border: 1px red dashed
background: #FFFADD
width:100%
height:300px
margin:0 auto
}
#left{
border: 1px red dashed
width:80px
height:100%
float:left
}
#right{
border: 1px red dashed
height:100%
width:200px
float:right
}
#footer{
border-style:dashed
width:100%
height:80px
background: #FDFDFD
border: 1px red dashed
}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>header</h1></div>
<div id="content">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
<div id="footer"><h1>footer</h1></div>
</div>
</body>
</html>
效果如下：你参考着慢慢写吧
