设为首页收藏本站

职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
职业IT人-IT人生活圈»IT生活 › 软件工程师 › WEB前端 › 关于pps.tv首页导航菜单样式的研究疑问
返回列表 发新帖
查看: 648|回复: 9

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

[复制链接]
无处不在 发表于 2011-6-16 11:09 | 显示全部楼层 |阅读模式


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


于是好奇心起，想看看它的菜单竖条是怎么实现的，是不是与网上常见实现方式相同
网上的常见实现方式是这样的（http://www.blueidea.com/tech/site/2006/3574_3.asp）
Html代码  
　　<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>  
插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。  

　　<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/)


Html代码  
<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>  
   

<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)
Html代码  
.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   
}  

.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
}
哪位大牛来共同研究指点一下下？

大小: 14.2 KB
查看图片附件

回复

使用道具 举报

Jethro 发表于 2011-6-16 11:09 | 显示全部楼层
margin: 8 -2 0 0

回复 支持 反对

使用道具 举报

 楼主| 无处不在 发表于 2011-6-16 11:09 | 显示全部楼层
就是 BORDER-RIGHT: #acacac 1px solid  啊~~~

回复 支持 反对

使用道具 举报

郁闷小男人 发表于 2011-6-16 11:09 | 显示全部楼层
让你笑了 写道
margin: 8 -2 0 0

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

回复 支持 反对

使用道具 举报

yoyo 发表于 2011-6-16 11:09 | 显示全部楼层
yvfish 写道
让你笑了 写道
margin: 8 -2 0 0

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

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

回复 支持 反对

使用道具 举报

broken 发表于 2011-6-16 11:10 | 显示全部楼层
大家分析下这个：
http://im.qq.com/

回复 支持 反对

使用道具 举报

hxy 发表于 2011-6-16 11:10 | 显示全部楼层
会用FIREBUG的话,这个问题真的不应该在这儿出现.

回复 支持 反对

使用道具 举报

broken 发表于 2011-6-16 11:10 | 显示全部楼层
Html代码  
<style>  
* {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;}   
</style>  
</head>  
  
<body>  
<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><A href="http://www.pps.tv/" target=_blank><SPAN>PPS首页</SPAN></A></LI>  
</UL>  
</body>  

<style>
* {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;}
</style>
</head>

<body>
<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><A href="http://www.pps.tv/" target=_blank><SPAN>PPS首页</SPAN></A></LI>
</UL>
</body>

回复 支持 反对

使用道具 举报

愚人 发表于 2011-6-16 11:10 | 显示全部楼层
干嘛非要写成它那种的，搜一下“类目分隔符”吧

回复 支持 反对

使用道具 举报

钰云 发表于 2011-6-16 11:10 | 显示全部楼层
楼主很好学，鉴定完毕!


回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点，并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是信息平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽造成漏登，请及时联系我们，我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-5-14 10:59 , Processed in 0.127950 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表