　首　页　Home 　新　闻　News 　专　题　Topics

　专　栏　Column 　使用技巧　How To use 　选购技巧　How To Buy

　数字未来　Next Gear 　下　载　Downloads 　杂　志　magazine

　

　社　区　Forums 　读者俱乐部　Club

按照产品目录浏览

进入 find.pcworld.com.cn 搜索

笔记本电脑台式机配件显示器打印机投影机数码相机数码摄象机软件网络与通信

企业计算 Linux/Unix .NET IT

专业子站

读者社区QQ群:34298428

联想重兵布局外部设备

联想投影机全球同一品质

联想打印机与冬奥同行

联想激光打印专区

无限照片打印

平板电视专业子站

联想外设数码业务百城巡展

消费电子全攻略

打造数字化家装

联想商用PC专区

移动数码装备任你游

走近我们的RFID

万元级彩色激光一体机

每日聚焦

打印机服务对比

明日技术预言

数字说话088期

电子期刊047期

数码聚焦：神秘的镜头

超值桌面电脑Top 10

把iPod音乐搬到电脑上

Mac游戏：明年有何期待？

蓝光DVD惹恼PS3买家

搜索专利，请用Google！

互联网15大“时间陷阱”

2006年一百个先见之明

畅观磁盘存储50年

任天堂Wii游戏机初体验

iPod损坏了我们该怎么办？

Java的又一个15年

2006年11月使用技巧一览

2006年12期杂志内容一览

电子读物

电子期刊047期

头条回放024期

迎娶您的液晶显示器

12月选购技巧精彩回放

新商务显示

13款安全套装横向评测

独家报道

5大最新最酷产品“欣赏”

微投影最新技术产品集锦

台式PC七大新形态

索尼VPL-DX15网络投影机测试

史上最值得珍藏的18款PC

我的QQ密码谁也偷不走

买液晶显示器省钱的秘密

华硕触控式一体机测试

笔记本世界论坛版主申请

新闻邮件订阅

IT要闻
产品评测
技巧推荐
社区精华
请输入您的e-mail地址:

使用技巧 - How to Use

　您的位置：首页 > 使用技巧 > 编程软件

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

佚名　论坛 | 2007-12-25 10:36:35 |

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

当前页面--比如说现在的页面是首页，那么在导航栏上首页的色彩等和其他栏目有所不同，用以给浏览者一个明显的指示。下面来说下具体的做法，菜单的基本实现和一般的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，其余的类推。

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

【推荐】【打印】

相关文章

· DIV+CSS常见错误汇总 2007-12-19 09:56:45
· CSS模块化设计——从空格谈起 2007-12-18 10:39:22
· css属性之媒体（Media）类型 2007-12-17 10:57:29
· 如何用CSS让文字居于div的底部 2007-12-17 10:33:29
· 调整CSS类型的顺序改变链接翻滚 2007-12-07 10:32:52

PCWorld社区

网友评论

以下网友评论只代表网友个人观点，不代表PCWorld观点

发表内容:

SPONSORED LINKS

联想M930一体机体验专区
5月15日，联想率先在喷墨一体机市场上发布了针对soho用户和小型办公类市场为主打……

联想外设数码业务百城巡展
传承奥运品质倾心百城服务

爱普生3LCD联盟
了解3LCD已经汇集了3LCD技术精英的联盟站点

全方位深入的存储资讯
从企业级到个人应用，从业界动态到大型评测，带您尽览存储风云

享受高质量低成本的照片打印
联想4330照片打印机，打印成本仅需1元

尚品·人生网
尚品·人生网，让优质生活与事业和谐平衡

中华部落阁
加入中华部落阁，记录你的新生活。

润眼电脑“3H高清润眼屏”
免费体验，火热报名，海尔润眼电脑系列。

万元级彩色激光一体机
爱普生彩色激光多功能一体机CX11系列专区

联想投影机全球同一品质
新联想一周年庆典新投影共享全球同一品质