首页 > 其他 > 详细

导航栏的浮动技术

时间:2014-11-08 02:39:12      阅读:298      评论:0      收藏:0      [点我收藏+]

?

导航栏:

? ?关键技术:

??

  去掉列表<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;
}

?


bubuko.com,布布扣
?

?

导航栏的浮动技术

原文:http://baihe747.iteye.com/blog/2153547

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!