网页导航上用CSS标志当前页效果的实现

2016-02-19 13:10 13 1 收藏

今天图老师小编给大家介绍下网页导航上用CSS标志当前页效果的实现,平时喜欢网页导航上用CSS标志当前页效果的实现的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - Web开发 】

当前页面--比如说现在的页面是首页,那么在导航栏上首页的色彩等和其他栏目有所不 同,用以给浏览者一个明显的指示。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

下面来说下具体的做法,菜单的基本实现和一般的CSS菜单没多大区别,着重说下如何 实现当前页。

设菜单有5个栏目:home、about、products、services、contact,分别给每个栏目一 个ID,m1-m5,CSS可写成如下:

#home #nav li#m1 a, #about #nav li#m2 a, #products #nav li#m3 a, #services #nav li#m4 a, #contact #nav li#m5 a{color: #FFF; background: #DC4E1B url(navbg.gif) no-repeat; }

xhtml:

ul

lia href="index.html"Home/a/li

lia href="about.html"About/a/li

lia href="products.html"Products/a/li

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

lia href="services.html"Services/a/li

lia href="contact.html"Contact/a/li

/ul

然后分别给每个页面的bady标签一个独立的ID,例如给首页的ID是home,其余的类推 。

这样做法的好处是每个页面的菜单都是一样的,方便修改,动态页包含也容易

来源:http://www.tulaoshi.com/n/20160219/1603201.html

延伸阅读
标签: Web开发
有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片。 为什么使用预载 你为什么会考虑使用预载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片...
标签: Web开发
利用CSS在导航条上标示当前所在频道的技术,已经有很长时间了,在很多CSS的书中都介绍过,不过还是总被问到,因此写一个简单的示例来讲解一下。 其实原理非常简单: 1) 按照不同的频道(栏目),分别为body定义id。例如: 首页:body id="p_home" Blog频道:body id="p_blog" 相册频道:body id="p_ablum&qu...
标签: Web开发
如何用CSS实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现,我们有更简单的做法: HTML代码: div class="alpha1" div class="ap2" p背景为红色(#FF0000),透...
标签: Web开发
    三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。     绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度...
标签: Web开发
用css实现透视效果 今天萌发一个想法,用css来实现透视效果。起初,我想到的是我们常见的添加阴影效果的方法,用多个div通过偏移来实现,但这需要很多 div,不够理想。随后,我想到css的一个属性:border,在border相连接处可以产生对角线效果。这样用两个div就可以实现,我们先看看 最终效果 ,然后再分析实现过程。 首先,我们看看bor...

经验教程

316

收藏

30
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部