问题是这样子的,今天在看电影时偶然注意到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
}
哪位大牛来共同研究指点一下下?
- 大小: 14.2 KB
分享到:
相关推荐
易语言做的PPS.rar 易语言做的PPS.rar 易语言做的PPS.rar
行政管理学pps.pps
PPS core file Source Code for Linux v2.13.6.
台北的烟火pps.ppt
品质工程QE技能系统与提升培训教材pps.pps
........\计算机组成原理目录.pps ........\计算机组成原理第一章.pps ........\计算机组成原理第七章.pps ........\计算机组成原理第三章.pps ........\计算机组成原理第九章.pps ........\计算机组成原理第二...
测试技术.pps测试技术.pps测试技术.pps测试技术.pps测试技术.pps测试技术.pps测试技术.pps测试技术.pps
镜头架拆画架体零件图过程.pps.download
房地产金融-个人住房贷款件.pps.ppt
看各种各样的电影很快捷,不用发费很多时间搜索其它网站.
广告策划与营销计划品牌建设的关系PPS.pptx
深度网络电视(集合PPS.PPLIVE等多个播放器.做的还是不错的
LinuxPPS provides a programming interface (API) to define in the system several PPS sources.
清华郑莉授课pps
C语言基础知识课件,适合初学者。非常不错的课件。
this paper ieee inormation hiding
七彩传媒公交车车身公交车内电子屏媒体资料pps.ppt
PPS API header for Linux v2.13.6.
关于编程序的一些经验,希望能与大家共享,也可以一起探讨
这是一个介绍matlab的pps,包括matlab的特点、语法构成、程序设计等