CSS_水平导航条

最新推荐文章于 2023-12-27 15:06:04 发布

trace332

最新推荐文章于 2023-12-27 15:06:04 发布

阅读量654

点赞数

分类专栏：结构与样式文章标签： css float class url 招聘文档

本文链接：https://blog.csdn.net/trace332/article/details/4011246

版权

结构与样式专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<div id="mainNav"> <ul> <li class="first"><a href="#" mce_href="#">首页</a> </li> <li><a href="#" mce_href="#">走进中科创</a> </li> <li><a href="#" mce_href="#">投资中心</a> </li> <li><a href="#" mce_href="#">担保中心</a> </li> <li><a href="#" mce_href="#">政策法规</a> </li> <li><a href="#" mce_href="#">新闻动态</a> </li> <li><a href="#" mce_href="#">人才招聘</a> </li> <li class="last"><a href="#" mce_href="#" class="last">联系我们</a> </li> </ul> </div>

#mainNav ul{ float:left;/*alert:添加浮动后,IE/FF中导航条长短不一致的BUG消失*/ margin:0; padding:0; list-style-type:none; width:780px; background: url(../images/Navbg.gif) repeat-x; color:#FFF;} #mainNav ul li { float:left;} #mainNav a { float:left; display:block; text-align:center; margin:0px 0px; padding:0 17px; letter-spacing:0.1em; height:28px; line-height:30px; background:url(../images/line.gif) no-repeat right center; text-decoration:none; font-size:12px; font-weight:bold; color:#FFFFFF;} #mainNav a:hover { color:#F87115;} #mainNav .last { background: url(../images/Navbg.gif) repeat-x;} #mainNav .first { padding-left:45px;}

1. ul li上设置浮动后,不再占据文档流中的空间,父列表上没有内容就会收缩.所以最好在ul上也设置float:left;

2. ul li上只设置浮动,把每个导航的背景图片及补白等CSS内容放在ul a 上(我一开始就是在ul li上设置了很多内容,结果在IE6中有问题,其它的正常);

3. 如果首尾的导航有特殊情况,则分别进行设置(如.first ,.last);