前端集合 - 关注前端技术和互联网免费资源

关注前端技术和互联网免费资源

分类儿

页面儿

搜索儿

前端集合 RSS订阅
Home » 经验记录 » 如何给网站导航加上动态分割线

如何给网站导航加上动态分割线

发布者:前端集合 // 发布时间:2011-02-23 23:25:29 // 分类:经验记录 // 访问: 3,482 次 // 热度:

首先看一下效果:

image

我们都知道,导航是整个网站非常关键的模块。

每个用户打开你的网站,首先看到的就是导航。可以说,一个用户对整个网站的第一印象是否良好,首要影响因素就是导航的外观。而对于网站所有者来说,导航部分也决定了整个网站的风格。

说了这么多,其实我是要引出下面滴内容:

下面这个就是我的博客(http://itwwt.com)以前的导航样式,

image

是没有中间那小白条的,给人的感觉是界线不够明了清晰。所以后来就给它在中间加了个小白条。由于博客的目录也就是导航要根据增减而相应变化,所以不能采用手动的方式去添加,如果那样就不具备可扩展性啦。

所以我用了几句灰常简单的JQuery代码实现了这个效果:

这样,在每一个导航栏的li之后就添加了一个<span>,如图:

image

然后在为<span>添加css样式即可:

#nav span {
background-color: #FFFFFF;
display: block;
float: left;
height: 16px;
margin: 11px 2px 0 0;
width: 2px;
}

当博客目录增加或减少的时候,<span>也会相应增加或减少。

Tags: 网站导航, 分割线

如何让wordpress友情链接按照级别排序>>  << 购入黑莓8320
Top