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

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

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

【 tulaoshi.com - Web开发 】

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

(本文来源于图老师网站,更多请访问https://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

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

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

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

/ul

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

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

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

延伸阅读
标签: word
Word2013中在当前页插入页眉而其他页没有页眉   ①启动Word2013,光标定位到需要插入页眉的那一页页首,然后点击菜单栏--页面布局--下一页。 ②这样可以在指定页前面插入一个空白页,然后单击插入--页眉和页脚--页眉,调出页眉编辑栏。 ③下面是关键的一步,我尽量描述详细点。先点击设计选项卡下的链接到前一节按钮...
标签: Web开发
用css实现透视效果 今天萌发一个想法,用css来实现透视效果。起初,我想到的是我们常见的添加阴影效果的方法,用多个div通过偏移来实现,但这需要很多 div,不够理想。随后,我想到css的一个属性:border,在border相连接处可以产生对角线效果。这样用两个div就可以实现,我们先看看 最终效果 ,然后再分析实现过程。 首先,我们看看bor...
标签: Web开发
如何用CSS实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现,我们有更简单的做法: HTML代码: div class="alpha1" div class="ap2" p背景为红色(#FF0000),透...
步骤是这样的: 1.先把你想要做的图片放到PS里面进行去色处理-图像–调整–去色或者ctrl+shift+u 2.将此图和原图片整合成上下两张的图片,如下图: 3.下一步写下代码: xhtml代码: div id="box" a href="#" span/span /a /div CSS代码: a {float:left;}#box s...
标签: Web开发
大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: html head titlecss圆角效果/title meta http-equiv="content-type" content="text/html; charset=gb2312" style type="text/css" div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: ...

经验教程

858

收藏

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