|
问题是这样子的,今天在看电影时偶然注意到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}
哪位大牛来共同研究指点一下下? |
|