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

2016-02-19 23:22 28 1 收藏

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

【 tulaoshi.com - Web开发 】

  当前页面--比如说现在的页面是首页,那么在导航栏上首页的色彩等和其他栏目有所不同,用以给浏览者一个明显的指示。下面来说下具体的做法,菜单的基本实现和一般的CSS菜单没多大区别,着重说下如何实现当前页。

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

  设菜单有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

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

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

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

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

延伸阅读
标签: Web开发
1. This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page. 2. In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals ...
用纯CSS也可以实现各种各样很酷的效果了,甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行,有些只是展示并没什么实际 用途, 但仅用CSS实现出的这些效果似乎没什么可以挑剔的。 对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了 更多的选择...
标签: Web开发
利用CSS在导航条上标示当前所在频道的技术,已经有很长时间了,在很多CSS的书中都介绍过,不过还是总被问到,因此写一个简单的示例来讲解一下。 其实原理非常简单: 1) 按照不同的频道(栏目),分别为body定义id。例如: 首页:body id="p_home" Blog频道:body id="p_blog" 相册频道:body id="p_ablum"...
标签: Web开发
自己写的个导航,感觉还不错...惟一的不足就是hack比较多,如果有简洁的方式实现,请留言告诉我...呵呵... 样式部分: #headerMenu {     width:560px;     margin:30px auto; } .menu {     font-size:14px;     line-height:18px;    &n...
标签: Web开发
除非你的网站只有一页,不然你一定会用的导航的.事实上,导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站. 在以前做网站导航时,往往依赖于图像,表格,和javascript.而这些都严重的影响了网站的可访问性和可使用性.如果在一个缺乏支持javascript的用户,那么你的网站导航将无算正常的显示.比如说一个用户...

经验教程

813

收藏

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