导航栏是网页中常用的模块，有很多方法可以实现，下面是用css实现的方法：
<div id="menu"> <ul> <li><a href="#">首页</a></li> <li class="menuDiv"></li> <li><a href="#">博客</a></li> <li class="menuDiv"></li> <li><a href="#">设计</a></li> <li class="menuDiv"></li> <li><a href="#">相册</a></li> <li class="menuDiv"></li> <li><a href="#">论坛</a></li> <li class="menuDiv"></li> <li><a href="#">关于</a></li> </ul> </div>css代码如下： #menu {padding:20px 20px 0 0} /*利用padding:20px 20px 0 0来固定菜单位置*/ #menu ul {float:right;list-style:none;margin:0px;} /*添加了float:right使得菜单位于页面右侧*/ #menu ul li {float:left;margin:0 10px;display:block;line-height:28px} /*加菜单间的竖线*/ .menuDiv {width:1px;height:28px;background:#999} /*定义菜单链接的样式*/ #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666} #menu ul li a:hover{}解释一下： <ul></ul>、<li></li>这两个HTML元素它们最主要的作用就是在HTML中以列表的形式来显示一些信息。 当在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class="divID"时，则在CSS中对应的设置语法是.divID #menu ul {list-style:none;margin:0px;} list-style:none，这一句是取消列表前点，因为我们不需要这些点。 margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px} 这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。 margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左：10px，右：10px) display:block;line-height:28px的作用是让文字垂直居中最终效果如：
转载于:https://www.cnblogs.com/tuyile006/archive/2007/07/06/808721.html
相关资源：淘宝新旺铺导航栏自动生成 CSS 代码
