最近想好好学一下前端,发现去看人家做的东西是学习最好最快的,最近一个项目有一个导航条让人看上去怎么也不舒服, 如是想自己来改动一下,改动之前先参考前人的,“站在前人的肩膀上能看的更远”。 首先参考的是百度知道 <div class="menu " id="menu"> <div style="clear: both;" mce_style="clear: both;" class="main-menu"> <div class="outer"> <div class="inner"> <ul> <li class="current"><a οnclick="log.nslog(this.href, 210, { pos: 'home' })" href="/" mce_href="">知道首页</a></li> <li><a οnclick="log.nslog(this.href, 210, { pos: 'team' })" href="/team" mce_href="team">知道团队</a></li> <li><a οnclick="log.nslog(this.href, 210, { pos: 'gongshe' })" href="/user/admin" mce_href="user/admin">知道公社</a></li> <li><a οnclick="log.nslog(this.href, 210, { pos: 'master' })" href="http://zhishi.baidu.com/" mce_href="http://zhishi.baidu.com/" target="_blank">知识掌门人</a></li> <li><a οnclick="log.nslog(this.href, 210, { pos: 'light' })" href="http://light.baidu.com/" mce_href="http://light.baidu.com/" target="_blank">小桔灯</a></li> <li><a οnclick="log.nslog(this.href, 210, { pos: 'jingyan' })" href="http://jingyan.baidu.com/" mce_href="http://jingyan.baidu.com/" target="_blank">经验</a></li> </ul> <span class="total">已解决问题:105053589 待解决问题:1946730</span> </div> </div> </div> </div> /* 此样式用来清除浮动,并且和上下保持10px的margin */ #menu{clear:both;margin:10px 0}; /* 使菜单条左边有一个圆角的4px的图片背景,这就是为什么padding-left:4px;的原因,如果不这样设置会左边没有那圆角的背景,看上去不美观 */ .main-menu { clear:both;background:url("http://img.baidu.com/img/iknow/home/bg.gif") no-repeat scroll 0 -30px transparent; padding-left:4px } /* 使菜单条右边有一个圆角的4px的图片背景,这就是为什么padding-right:4px;的原因,如果不这样设置会右边没有那圆角的背景,看上去不美观 */ .outer { background:url("http://img.baidu.com/img/iknow/home/bg.gif") no-repeat scroll right -30px transparent; padding-right:4px; } /* 设置菜单条的背景,高度为34px; */ .inner { background:url("http://img.baidu.com/img/iknow/home/bg.gif") repeat-x scroll 0 -65px transparent; height:34px; overflow:hidden; padding-left:17px; } ul { float:left;list-style:none outside none;margin:0;padding:0; } /* 要想列表元素在同一水平位置,li必须float,背景图片为每一个列表项右边的小竖线 */ li { background:url("http://img.baidu.com/img/iknow/home/bg.gif") no-repeat scroll right -100px transparent; float:left; padding:0 20px; text-align:center; } /*如果没有选中的link,默认图片的背景色彩,但是文字色彩为白色,行高和高度相等,这样就可以垂直居中 */ li a:link,li a:visited { color:#FFFFFF; display:block; font-size:14px; font-weight:bold; height:36px; line-height:36px; margin:0 auto; text-decoration:none; } /* 当选中状态时背景为白色,字段为绿色 */ li.current a:link, .main-menu li.current a:visited { background:url("http://img.baidu.com/img/iknow/home/bg.gif") no-repeat scroll 0 4px transparent; color:#408F24; height:34px; overflow:hidden; padding:0 12px; text-decoration:none; }