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

狮子QWE321EWQ

狮子QWE321EWQ

2016-02-19 23:22

下面这个网页导航上用CSS标志当前页效果教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

  当前页面--比如说现在的页面是首页,那么在导航栏上首页的色彩等和其他栏目有所不同,用以给浏览者一个明显的指示。下面来说下具体的做法,菜单的基本实现和一般的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 id="nav"
li id="m1"a href="index.html"Home/a/li 
li id="m2"a href="about.html"About/a/li
li id="m3"a href="products.html"Products/a/li
li id="m4"a href="services.html"Services/a/li
li id="m5"a href="contact.html"Contact/a/li
/ul

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

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

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

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

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

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

s8lol主宰符文怎么配

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

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

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

VBA全选word当前页代码

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

lol偷钱流符文搭配推荐

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

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

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

Word2025中在当前页插入页眉而其他页没有页眉

word
Word2025中在当前页插入页眉而其他页没有页眉

lolAD刺客新符文搭配推荐

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

WPS移动版新功能实现多文档随意切换 工作效率翻倍

WPS移动版新功能实现多文档随意切换 工作效率翻倍

金山WPS for Linux 简单测评

金山WPS for Linux 简单测评
下拉加载更多内容 ↓