设为首页
收藏本站
网站地图
网站首页 走进从化 新闻动态 从化旅游 专题聚焦 生活之窗 IT世界 企业之窗 图片中心 网站留言 关于我们
热门关键字:从化地图 从化温泉 森林公园 从化景点 酒店 荔枝
精 彩 推 荐
热 点 文 章
·如何在FLASH中打开新窗口(可
·flash图片效果系列之一
·优秀网站设计的51条原则(一
·一种flash鼠标跟随效果
·四种简单保存网页Flash动画
·网页背景设计技巧大全
·给你的网页盖个章
·Dreamweaver MX 2004一句话
相 关 文 章
·Flash制作鼠标点击滚动效果
·CSS技巧学习:像table一样布
·和Flash初学者详谈Loading的
·Fireworks 制作纸张卷边效果
·点按钮,让任意场景(含单个场
·Fireworks 简单制作羽毛
·表格中单元格之间分隔线的隐
·表格边框魔鬼教程
当前位置:网站首页 > IT世界 > 设计专栏 > 网页设计 >  正文

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

文章来源:68design 文章作者: 发布时间:2007-05-25

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

下面来说下具体的做法,菜单的基本实现和一般的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,其余的类推 。

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

 
用户名: 新注册) 密码: 匿名评论 [所有评论]
评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规。
§最新评论:
站长邮箱: 联系电话:15914291233