首 页 | 精品电影 | 音乐天堂 | 在线游戏 | Flash MTV | 三湘书屋 | 幽默笑话 | 三湘图库 | 美女写真 | IT知识库 | QQ贴图 | 加入书签

网页制作网络编程图形图象操作系统冲浪宝典软件教学网络安全认证考试通信技术电子商务业内动态书籍教程原码

最近更新 文章分类 多媒体类 精品软件

本站搜索:
您的位置:三湘时空 -> IT知识库 -> 文章分类 -> CSS教程 -> CSS实现当前页的滑动门菜单效果方法  
CSS实现当前页的滑动门菜单效果方法


文章类别:CSS教程 来源: 作者: 发表日期:2006-10-28 字体:[ ]

小游戏 | 在线影院 | 幽默笑话 | 源码下载 | Flash MTV | 音乐试听 | 书屋 | 美女写真

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

  下面来说下具体的做法,菜单的基本实现和一般的CSS菜单没多大区别,着重说下如何 实现当前页。

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

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

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

上一篇:CSS实现导航条图片的翻转菜单 下一篇:来自Windows Live Messenger 9 的消息
本栏目热门文章
·CSS+DIV设计实例:纯CSS制作下拉导航菜单 2006-5-28
·CSS+DIV设计实例:实现让多个DIV排列时居中 2006-5-28
·引入CSS样式的五种方式 2006-5-28
·超强,用CSS构建iframe效果 2006-4-5
·避免表格table被撑开变形的CSS 2006-5-18
·SPAN和DIV的区别 2006-3-18
·CSS实用教程(一) 2005-10-4
·拒绝单调 让网页超链接拥有多姿多彩的下划线 2005-10-4
·用CSS实现表格背景颜色渐变效果 2006-6-6
·css学习的一些心得 2005-12-13
新近更新文章
·对css滑动门技术的一些总结和归纳 2006-11-16
·CSS样式表设计的十条技巧 2006-11-9
·网页制作之常用CSS缩写语法总结 2006-11-5
·CSS超级技巧大放送合集 2006-11-5
·认清CSS的类class和标识id选择符 2006-11-5
·用CSS设计高用户体验的web文字大小 2006-11-5
·实时切换网页的CSS样式实现 2006-10-28
·在CSS样式表里使用JavaScript 2006-10-28
·CSS实现当前页的滑动门菜单效果方法 2006-10-28
·CSS实现导航条图片的翻转菜单 2006-10-28
首 页 | 软件发布 | 广告联系 | 下载帮助 | 意见反馈 | 网站地图
  CopyRight? 2002-2004 WWW.SXSKY.NET? All Rights Reserved
三湘时空 站长QQ:82675303 Email: