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

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

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

【 tulaoshi.com - Web开发】

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

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

　　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，其余的类推。

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

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

看过《导航上用CSS标志当前页效果的实现》的人还看了以下文章更多>>

用CSS实现给图片上色的效果

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

步骤是这样的： 1.先把你想要做的图片放到PS里面进行去色处理-图像–调整–去色或者ctrl+shift+u 2.将此图和原图片整合成上下两张的图片，如下图： 3.下一步写下代码： xhtml代码： div id="box" a href="#" span/span /a /div CSS代码： a {float:left;}#box s...

用js实现的抽象CSS圆角效果!!

标签： 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: ...

CSS标示导航条当前所在频道

标签： Web开发

利用CSS在导航条上标示当前所在频道的技术，已经有很长时间了，在很多CSS的书中都介绍过，不过还是总被问到，因此写一个简单的示例来讲解一下。其实原理非常简单： 1) 按照不同的频道（栏目），分别为body定义id。例如：首页：body id="p_home" Blog频道：body id="p_blog" 相册频道：body id="p_ablum&qu...

用css实现图片替换

标签： Web开发

style h2{font-size:14px; font-weight:bold; padding:10px 0; margin:5px 0; border-bottom:1px solid #ccc;} .box2{} .box2 img{display:block; padding:2px; border:0;} .box2 a{color:#333; text-decoration:none;border:2px solid #FFF; float:left; cursor:hand;} .box2 a span{display:...

css实现的图片模糊效果