关于pps.tv首页导航菜单样式的研究疑问

 问题是这样子的，今天在看电影时偶然注意到pps.tv的首页导航菜单，注意他的“PPS搜索”是没有右边框的

 

于是好奇心起，想看看它的菜单竖条是怎么实现的，是不是与网上常见实现方式相同

网上的常见实现方式是这样的（http://www.blueidea.com/tech/site/2006/3574_3.asp）

　　<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>
而为什么要添加以下代码呢？
<li class="menuDiv"></li>
插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。

 

 但是仔细看了一下PPS.tv的代码，真的想不出来他是怎么做到的(http://www.pps.tv/)

 

 

<DIV id=header>
<DIV class=ppsNav>
<UL>
<LI><A href="http://so.pps.tv/" target=_blank><SPAN>PPS搜索</SPAN></A> </LI>
<LI><A href="http://club.pps.tv/" target=_blank><SPAN>PPS社区</SPAN></A> </LI>
<LI><A href="http://joy.pps.tv/" target=_blank><SPAN>影视交友</SPAN></A> </LI>
<LI><A href="http://g.pps.tv/" target=_blank><SPAN>PPS游戏</SPAN></A> </LI>
<LI><A href="http://bk.pps.tv/" target=_blank><SPAN>影视百科</SPAN></A> </LI>
<LI><A href="http://news.pps.tv/" target=_blank><SPAN>PPS资讯</SPAN></A> </LI>
<LI><A href="http://kan.pps.tv/" target=_blank><SPAN>PPS看看</SPAN></A> </LI>
<LI><A href="http://dl.pps.tv/" target=_blank><SPAN>PPS下载</SPAN></A> </LI>
<LI class=cur><A href="http://www.pps.tv/" target=_blank><SPAN>PPS首页</SPAN></A> </LI></UL>
<DIV id=header_user_plan class=cookie></DIV></DIV>
 

 

 

对应的CSS  (http://www.pps.tv/style_v9/css/core.css?20090922)

.ppsNav {
	HEIGHT: 31px; OVERFLOW: hidden
}
.ppsNav UL {
	HEIGHT: 31px; OVERFLOW: hidden
}
.ppsNav UL {
	WIDTH: 675px; FLOAT: right
}
.ppsNav LI {
	LINE-HEIGHT: 16px; MARGIN: 8px -2px 0px 0px; FONT-FAMILY: "Microsoft YaHei"; FLOAT: right; HEIGHT: 16px; FONT-SIZE: 13px; BORDER-RIGHT: #acacac 1px solid
}
.ppsNav LI A {
	DISPLAY: block; COLOR: #c8c8c8
}
.ppsNav LI A SPAN {
	DISPLAY: block; COLOR: #c8c8c8
}
.ppsNav LI A {
	BORDER-RIGHT: #6e6e6e 1px solid
}
.ppsNav LI A:hover {
	TEXT-DECORATION: none
}
.ppsNav LI A SPAN {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 12px; PADDING-RIGHT: 10px; WHITE-SPACE: nowrap; PADDING-TOP: 0px
}
.ppsNav .cur A {
	COLOR: #fff; TEXT-DECORATION: underline
}
.ppsNav .cur A SPAN {
	COLOR: #fff
}
.ppsNav .cur A:hover {
	TEXT-DECORATION: none
}
.ppsNav .cookie {
	LINE-HEIGHT: 20px; MARGIN-TOP: 5px; WIDTH: 320px; FLOAT: left; HEIGHT: 20px; OVERFLOW: hidden
}
.ppsNav .cookie A {
	MARGIN: 0px 3px; COLOR: #fff; TEXT-DECORATION: underline
}
.ppsNav .cookie IMG {
	WIDTH: 20px; HEIGHT: 20px; MARGIN-RIGHT: 5px
}

 

哪位大牛来共同研究指点一下下？

评论

11 楼 指尖帝 2010-11-13  

mark yixia

10 楼 yvfish 2010-01-18  

zbm2001 写道

yvfish 写道

让你笑了 写道

margin: 8 -2 0 0

我自己写着试了，貌似不行虽然有-2的偏移，但是最后一个"pps搜索"的怎么办？

.ppsNav UL { 
    HEIGHT: 31px; OVERFLOW: hidden 
}

噢，是hidden

9 楼 zyl小星星 2009-12-16  

楼主很好学，鉴定完毕!

8 楼 寄生虫 2009-12-16  

干嘛非要写成它那种的，搜一下“类目分隔符”吧

7 楼 寄生虫 2009-12-16  

<pre name="code" class="html">&lt;style&gt;
* {font-size:13px; font-family:'微软雅黑'}
UL { padding:0px; margin:0px; overflow:hidden; background-image:url("http://www.pps.tv/style_v9/img/wrapper.gif"); padding:6px 0px 7px 0px;}
UL LI { list-style-type:none; float:left; border-left:solid 1px #ACACAC; line-height:18px; margin-left:-2px;}
UL LI A { display:block; border-left:solid 1px #6E6E6E; padding:0px 10px; color:#c8c8c8; text-decoration:none;}
UL LI A:HOVER { text-decoration:underline;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;UL&gt;
&lt;LI&gt;&lt;A href="http://so.pps.tv/" target=_blank&gt;&lt;SPAN&gt;PPS搜索&lt;/SPAN&gt;&lt;/A&gt; &lt;/LI&gt; 
&lt;LI&gt;&lt;A href="http://club.pps.tv/" target=_blank&gt;&lt;SPAN&gt;PPS社区&lt;/SPAN&gt;&lt;/A&gt; &lt;/LI&gt; 
&lt;LI&gt;&lt;A href="http://joy.pps.tv/" target=_blank&gt;&lt;SPAN&gt;影视交友&lt;/SPAN&gt;&lt;/A&gt; &lt;/LI&gt; 
&lt;LI&gt;&lt;A href="http://g.pps.tv/" target=_blank&gt;&lt;SPAN&gt;PPS游戏&lt;/SPAN&gt;&lt;/A&gt; &lt;/LI&gt; 
&lt;LI&gt;&lt;A href="http://bk.pps.tv/" target=_blank&gt;&lt;SPAN&gt;影视百科&lt;/SPAN&gt;&lt;/A&gt; &lt;/LI&gt; 
&lt;LI&gt;&lt;A href="http://news.pps.tv/" target=_blank&gt;&lt;SPAN&gt;PPS资讯&lt;/SPAN&gt;&lt;/A&gt; &lt;/LI&gt; 
&lt;LI&gt;&lt;A href="http://kan.pps.tv/" target=_blank&gt;&lt;SPAN&gt;PPS看看&lt;/SPAN&gt;&lt;/A&gt; &lt;/LI&gt; 
&lt;LI&gt;&lt;A href="http://dl.pps.tv/" target=_blank&gt;&lt;SPAN&gt;PPS下载&lt;/SPAN&gt;&lt;/A&gt; &lt;/LI&gt; 
&lt;LI&gt;&lt;A href="http://www.pps.tv/" target=_blank&gt;&lt;SPAN&gt;PPS首页&lt;/SPAN&gt;&lt;/A&gt;&lt;/LI&gt;
&lt;/UL&gt;
&lt;/body&gt;</pre>

6 楼 windywany 2009-12-16  

会用FIREBUG的话,这个问题真的不应该在这儿出现.

5 楼 leejon 2009-12-14  

大家分析下这个：
http://im.qq.com/

4 楼 zbm2001 2009-12-11  

yvfish 写道

让你笑了 写道

margin: 8 -2 0 0

我自己写着试了，貌似不行虽然有-2的偏移，但是最后一个"pps搜索"的怎么办？

.ppsNav UL { 
    HEIGHT: 31px; OVERFLOW: hidden 
}

3 楼 yvfish 2009-12-11  

让你笑了 写道

margin: 8 -2 0 0

我自己写着试了，貌似不行虽然有-2的偏移，但是最后一个"pps搜索"的怎么办？

2 楼 yangmin 2009-12-11  

就是 BORDER-RIGHT: #acacac 1px solid  啊~~~

1 楼 让你笑了 2009-12-11  

margin: 8 -2 0 0