css定义一个导航栏

导航栏是网页中常用的模块，有很多方法可以实现，下面是用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的作用是让文字垂直居中


最终效果如：