CSS导航布局中“当前页面”的做法

最新推荐文章于 2022-01-22 22:59:18 发布

iteye_19603

最新推荐文章于 2022-01-22 22:59:18 发布

阅读量654

点赞数

文章标签： xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为CSS导航布局中当前页面的做法，属于站长常用代码，更多菜单导航代码请访问懒人图库JS代码频道。" />
<title>CSS导航布局中当前页面的做法_懒人图库</title>
<style type="text/css">
body{
 font-family: Arial, Helvetica, sans-serif; font-size: 12px; } *{ margin: 0; padding: 0; list-style: none; } #nav{ padding: 10px 10px 0; font-size: 11px; font-weight: bold; } #nav li{ float: left; margin-right: 1px; } #nav li a{ padding: 4px 10px 2px 14px; text-decoration: none; background: #DDD url(images/navbg.gif) no-repeat; color: #666; display: block; float: left; } #nav li a:hover{ color: #CCC; background-color: #FFDEAD; } #navbar{ background:#DC4E1B; height: 8px; overflow: hidden; clear: both; } #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(images/navbg.gif) no-repeat; }

//当前位置的CSS样式
p{
 margin: 10px; } </style> </head>

<body id="About">
 <ul id="nav"> <li id="m1"><a href="#">Home</a></li> <li id="m2"><a href="#">About</a></li> <li id="m3"><a href="#">Products</a></li> <li id="m4"><a href="#">Services</a></li> <li id="m5"><a href="#">Contact</a></li> </ul> <div id="navbar"></div> 当前位置：About

当前页面--比如说现在的页面是首页，那么在导航栏上首页的色彩等和其他栏目有所不同，用以给浏览者一个明显的指示。 
 
下面来说下具体的做法，菜单的基本实现和一般的CSS菜单没多大区别，着重说下如何实现当前页。 
 
设菜单有5个栏目：home、about、products、services、contact，分别给每个栏目一个ID，m1-m5
然后分别给每个页面的bady标签一个独立的ID，当前是哪个页面，那个页面的BODY的ID就是哪个，例如给首页的ID是home，其余的类推。 
 
这样做法的好处是每个页面的菜单都是一样的，方便修改，动态页包含也容易。
</body>
</html>

效果如下图：
CSS导航布局中鈥湹鼻耙趁驸澋淖龇