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

最新推荐文章于 2024-09-30 11:32:01 发布

iteye_14864

最新推荐文章于 2024-09-30 11:32:01 发布

阅读量188

点赞数

文章标签：影视资讯游戏 CSS Firebug

问题是这样子的，今天在看电影时偶然注意到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
}

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