您的位置：首页 > 其它

无序列表制作横向导航

2007-05-10 19:02 471 查看

关于导航栏，就是导航横向排列中间用竖线分割的那种，我所见的做法有4种了。最简单的也是以前最常用的是栏目1 | 栏目2 | 栏目3 这种。
自从div+css爆发开始，很多导航都采用无序列表<ul>这种方式了。据说这种方式有N多好处，具体如何不得而知。用<ul>做导航栏最大的问题就在于中间的一条竖线。这条竖线的加入方法我见过三种。

利用空的<li></li>,给这个li一个class，在class中定义背景宽度为1px，高度为100%或者自己定义高度n px，定义一个背景色(也似乎是背景图，偶忘记了，这个不重要)。

利用li中的border,设border-left为1px或者border-right为1px，这样出现的问题就是栏目最左或者最右会多出一个border边框，很难看。一般可以用margin-left(or right):-1px;可以把那个部分隐藏。不过ff里不可以。

自己用的终极大招：也许很多人这么用过了。。。。也不算什么终极大招。不过有一个!important属性，很好用哦。

<style>...

li{...}{list-style:none; border-left:1px solid red; font:12px “宋体”;float:left;}

#special{...}{border:none !important}

</style>

<body>

<ul>

</ul>

</body>

其实就是在那个第一个li后面加一个id啦，id的style是border:none，然后加上!important，提高样式的优先级，就ok了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航