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

小丽丽2921

小丽丽2921

2016-02-19 13:10

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

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

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

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

ul

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

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

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

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

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

/ul

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

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

展开更多 50%)
分享

猜你喜欢

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

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

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

Web开发
网页导航上用CSS标志当前页效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

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

Web开发
导航上用CSS标志当前页效果的实现

VBA全选word当前页代码

电脑入门
VBA全选word当前页代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用CSS实现网页的绝对居中

Web开发
用CSS实现网页的绝对居中

在代码隐藏中遍历当前页的所有控件

电脑网络
在代码隐藏中遍历当前页的所有控件

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

jquery 新手学习常见问题解决方法

jquery 新手学习常见问题解决方法

C++语言概述

C++语言概述
下拉加载更多内容 ↓