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

2016-02-19 19:41 11 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐导航上用CSS标志当前页效果的实现,赶紧看过来吧!

【 tulaoshi.com - Web开发 】

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

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

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

以下是引用片段:
#home#navli#m1a, 
#about#navli#m2a, 
#products#navli#m3a, 
#services#navli#m4a, 
#contact#navli#m5a{  color:#FFF;  background:#DC4E1Burl(navbg.gif)no-repeat;}

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

  xhtml:

以下是引用片段:
ulid="nav"
liid="m1"ahref="index.html"Home/a/li 
liid="m2"ahref="about.html"About/a/li
liid="m3"ahref="products.html"Products/a/li
liid="m4"ahref="services.html"Services/a/li
liid="m5"ahref="contact.html"Contact/a/li
/ul

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

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

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

延伸阅读
标签: Web开发
用css实现透视效果 今天萌发一个想法,用css来实现透视效果。起初,我想到的是我们常见的添加阴影效果的方法,用多个div通过偏移来实现,但这需要很多 div,不够理想。随后,我想到css的一个属性:border,在border相连接处可以产生对角线效果。这样用两个div就可以实现,我们先看看 最终效果 ,然后再分析实现过程。 首先,我们看看bor...
标签: 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: ...
步骤是这样的: 1.先把你想要做的图片放到PS里面进行去色处理-图像–调整–去色或者ctrl+shift+u 2.将此图和原图片整合成上下两张的图片,如下图: 3.下一步写下代码: xhtml代码: div id="box" a href="#" span/span /a /div CSS代码: a {float:left;}#box s...
标签: PHP
  <?php   //本例子摘自phpbuilder.com   //稍加翻译   //<sprming@netease.com   $limit=20; // 每页显示的行数   $numresults=mysql_query("select * from TABLE where YOUR CONDITIONAL HERE order by WHATEVER");//换成你所需要的sql语句   $numrows=m...
标签: Web开发
利用CSS在导航条上标示当前所在频道的技术,已经有很长时间了,在很多CSS的书中都介绍过,不过还是总被问到,因此写一个简单的示例来讲解一下。 其实原理非常简单: 1) 按照不同的频道(栏目),分别为body定义id。例如: 首页:body id="p_home" Blog频道:body id="p_blog" 相册频道:body id="p_ablum"...

经验教程

380

收藏

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