您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> html教程 >> 文章正文
[图文]导航上用CSS标志当前页效果的实现           ★★★
导航上用CSS标志当前页效果的实现
作者:网页设计…  文章来源:网页设计师联盟  点击数:  更新时间:2007-11-7 17:29:46 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:

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

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

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

 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:Rainsion    责任编辑:Rainsion  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章: 没有了
  • 最新文章
    相关文章
    不用JS的漂浮层
    CSS层叠样式表最佳入门教程
    解css定位与定位应用
    Firefox CSS私有属性备忘记录
    CSS制作网页编写的提醒及小技巧整理
    XHTML+CSS的目的和好处(WEB标准的目的和好处
    常见的CSS问题的“一站式”的解决方案
    国外译文:网页设计如何使用CSS的选择器模式
    CSS实现图片阴影效果三部曲(译文)
    CSS实现不定高度DIV绝对居中
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门