首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视
设为首页
加入收藏
联系我们
高级搜索
您当前的位置: 主页>网站制作>网页特效>导航上用CSS标志当前页效果的实现
导航上用CSS标志当前页效果的实现
来源: 发布时间:2008-01-13 发布人: 浏览: 人次   字体: [ ]  
当前页面--比如说现在的页面是首页,那么在导航栏上首页的色彩等和其他栏目有所不同,用以给浏览者一个明显的指示。下面来说下具体的做法,菜单的基本实现和一般的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>


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

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


相 关 文 章   发布商链接
·通过css改变图片显示的内容
·css固定定位实现悬浮效果
·CSS解决倾斜鼠标翻转导航制作麻烦问...
·网页表格制作之圆圈型表格的实现代码
·仿windows关机对话框的提示框效果代...
·淘宝在线状态和qq在线状态的生成代码
·网页CSS样式表学习技巧小记,供大家...
·无刷新更换页面样式例子供大家参考
·动态添加表单两法
·Css样式表实现文字的渐变效果代码
 §最新评论:(评论内容只代表网友观点,与本站立场无关!)
网名: 验证码:  【所有评论】【↑返回顶部
评 分: 12 345
评论内容:(不能超过500字,请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]
注意:请勿在本站发布政治话题、色情及违反法律的内容。
IT知道网 声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。
推 荐 文 章
·鼠标移到链接出现漂亮的对话...
·当左右内容高度不定时,中间...
·利用CSS样式控制打印页面显示
·CSS样式实现文字分散对齐的方
·CSS实现多种多彩文字链接代码
·解决长串英文字母将表格伸的...
·CSS模拟windows菜单选项卡效...
·样式表固定table表头和列代码
·DIV+CSS两个简单的导航效果,...
·Css样式表实现文字的渐变效果
·动态添加表单两法
·无刷新更换页面样式例子供大...
·网页CSS样式表学习技巧小记,
·淘宝在线状态和qq在线状态的...
·仿windows关机对话框的提示框
热 门 文 章
·淘宝在线状态和qq在线状态的...
·图片左右滚动代码,鼠标放上去...
·css固定定位实现悬浮效果
·样式表固定table表头和列代码
·js实现的文字无缝向上滚动的...
·js实现复制内容到剪贴板,可...
·CSS模拟windows菜单选项卡效...
·CSS样式实现文字分散对齐的方...
·教您实现Div的动态伸缩效果 ...
·通过CSS来动态改变界面样式实...
·实例解决Div被Select挡住问题...
·实例讲解利用css滤镜实现背景...
·DIV+CSS两个简单的导航效果,...
·仿windows关机对话框的提示框...
·网页开发特效之input控件高度...
网站首页 - 关于本站 - 加入收藏 - 网站地图 - 友情连接 - 在线留言 - 联系我们 - 返回顶部
Copyright © 2007 IT知道网.[冀ICP备07026896号]. All Rights Reserved .