怎么用css做如图所示的导航条
发布网友
共4个回答
热心网友
按照标准的写法，应该是每个li都有背景，且背景的位置为right、top，右侧顶部。当然，你还需要为最后一个设置为无背景。使用：
#nav ul li.last,#nav ul li:last-child {background:none;}
last-child是标准的伪类写法，而li.last则是使用js来修正的，你需要使用js（或交给程序，他也可以判断输出的）给予最后一个li一个指定的class即可。
还有其他的写法，如，逐个输出空的li元素，并命名为li.split 分隔。最后一次不输出（需要程序人员配合）。
热心网友
这里只说居中的事情
html代码：
<ul class="nav">
<li><a href="">首页</a></li>
<li><a href="">关于</a></li>
<li><a href="">产品介绍</a></li>
<li><a href="">服务相关</a></li>
<li><a href="">驱动</a></li>
<li><a href="">联系我们</a></li>
</ul>
css代码：
*{ padding:0; margin:0;}
.nav{ overflow:hidden;}
.nav li{ list-style:none; float:left; height:40px; background:url(line.jpg) no-repeat right center; background-color:#000;}
.nav li a{ display:block; height:40px; line-height:40px; padding:0 20px; color:#fff;}
因为每个栏目的字数不一样，所以给a标签左右各一定的内边距，这样看上去就居中了
热心网友
也就是UL LI的使用，下面的那个渐变是背景图片。
1；问再多都不如自己亲手尝试一下进步的快。
2；即使不会也要有自己的思路，自己的尝试，然后问具体不会的点在哪里。
3；直接在这上面问，人家写一个，以后遇到同样的导航，自己也不一定会，多学，多看，多思考，这样才进不得快。
-------------------------------------
以上仅个人观点，好坏勿喷，谢谢！
热心网友
您好。
文字排版可用line-height,即行高控制
文字边距可用padding控制
分割线没有排版，是控制的文字和分割线之间的距离。
