导航栏的浮动技术

 

导航栏:

   关键技术:

  

  去掉列表<li>的属性;list-style-type:none;
    浮动;float
  外间距: margin

 
 

 

例子:

 <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:40px 40px 0px 150px;
}
#menu ul {
  margin-left:150px;
  float:right;
  list-style:none;
}

#menu ul li {
  margin:0px 10px;
  float:left; 
  dispaly;block;
  line-height:20px;
}
.menuDiv{
 width:1px;
 height:20px;
 background-color:#000000;
}