|
锁定老帖子 主题：关于pps.tv首页导航菜单样式的研究疑问
精华帖 (0) :: 良好帖 (0) :: 新手帖 (8) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-12-10
于是好奇心起，想看看它的菜单竖条是怎么实现的，是不是与网上常见实现方式相同 网上的常见实现方式是这样的（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
}
哪位大牛来共同研究指点一下下？ 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-12-11
margin: 8 -2 0 0
|
| 返回顶楼 | |
|
发表时间：2009-12-11
就是 BORDER-RIGHT: #acacac 1px solid 啊~~~
|
| 返回顶楼 | |
|
发表时间：2009-12-11
让你笑了 写道 margin: 8 -2 0 0
我自己写着试了，貌似不行虽然有-2的偏移，但是最后一个"pps搜索"的怎么办？ |
| 返回顶楼 | |
|
发表时间：2009-12-11
yvfish 写道 让你笑了 写道 margin: 8 -2 0 0
我自己写着试了，貌似不行虽然有-2的偏移，但是最后一个"pps搜索"的怎么办？ .ppsNav UL { HEIGHT: 31px; OVERFLOW: hidden } |
| 返回顶楼 | |
|
发表时间：2009-12-14
大家分析下这个：
http://im.qq.com/ |
| 返回顶楼 | |
|
发表时间：2009-12-16
会用FIREBUG的话,这个问题真的不应该在这儿出现.
|
| 返回顶楼 | |
|
发表时间：2009-12-16
<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>
|
| 返回顶楼 | |
|
发表时间：2009-12-16
最后修改：2009-12-16
干嘛非要写成它那种的，搜一下“类目分隔符”吧
|
| 返回顶楼 | |
|
发表时间：2009-12-16
楼主很好学，鉴定完毕!
|
| 返回顶楼 | |
