近日在网上研究WEB标准页面，看到一个菜单效果，即您现在看到的页面上部菜单效果，当点击进入本栏目时，其背景的图片采用与周围不同的唯一图片，感觉不错，好好研究了一下。

　　研究发现，他是在body中加入了唯一的id标识，如、等定义，然后再定义不同的id为一个背景图片。如下面的代码：

以下是引用片段： body#home LI#menuHome {  BACKGROUND-IMAGE: url(/images/sea/menu_btn_s_bk_050104.gif); COLOR: #000 } body#aggregator LI#menuWSBA {  BACKGROUND-IMAGE: url(/images/sea/menu_btn_s_bk_050104.gif); COLOR: #000 } body#articles LI#menuArticles {  BACKGROUND-IMAGE: url(/images/sea/menu_btn_s_bk_050104.gif); COLOR: #000 } ……

　　首先这样写太麻烦，可以简写成这样：

以下是引用片段： body#home LI#menuHome, body#aggregator LI#menuWSBA, body#articles LI#menuArticles, …… {  BACKGROUND-IMAGE: url(/images/sea/menu_btn_s_bk_050104.gif); COLOR: #000 }

　　现在看起来舒服多了，自我表扬一下：）

　　细细分析了下他的CSS定义中，“body#home LI#menuHome”这一行定义，分别是“body＋#home（body的id为home标识）＋ （半角空格，隔开表示后面的内容为CSS样式附属选择器的定义）＋LI（li的列表标识，表示重复列表项，可以在CSS中定义成竖向或横向的排列方式）＋#menuHome（附属选择器中div的id为menuHome标识）”。在页面中的调用格式为：

以下是引用片段： 〈body id="home"〉 〈div id="container"〉      ……       〈div id="menu"〉    〈menu〉      〈li id="menuHome"〉〈a href="/" title="返回首页"〉首页 home〈/a〉〈/li〉     〈li id="menuArticles"〉〈a href="/articles/" title="文章"〉文章 articles〈/a〉〈/li〉     〈li id="menuWSBA"〉〈a href="/wsba/main.php" title="Web标准"〉聚合 WSBA〈/a〉〈/li〉      ……      〈/menu〉     ……     〈/div〉  〈/div〉 〈/body〉

　　这个页面也不难分析，body中定义了一个标识，不同的网页定义不同的标识；id="container"表示定义了一个大背景；id="menu"开始才是菜单box的定义范围。接下来就是〈menu〉包括中的菜单项，重点看下这里的定义：

　　menu标签在XHTML Strict中已经不存在了，如果基于“向前兼容”的考虑，可以使用ul来代替menu：

以下是引用片段：  〈div id="menu"〉     〈ul〉      〈li id="menuHome"〉〈a href="/" title="返回首页"〉首页 home〈/a〉〈/li〉     〈li id="menuArticles"〉〈a href="/articles/" title="文章"〉文章 articles〈/a〉〈/li〉     〈li id="menuWSBA"〉〈a href="/wsba/main.php" title="Web标准"〉聚合 WSBA〈/a〉〈/li〉      ……      〈/ul〉   〈/div〉

　这里每一个li都定义了唯一的id标识，这样就可以单独对每一个菜单内容、背景等进行定义。而li的id又从属于li，li双从属于id="menu"，所以可以进行选择器的附属选择器定义，再加上最上级的body，这时则可以这样定义：

　　body＋bodyr的CSS样式选择器＋ ＋li＋li的CSS样式选择器

　　到这里基本明白了它的道理：利用body的不同的ID定义，来确定当这个页面的标识唯一时（即body的ID为唯一时），则显示菜单项中的li图片，所以body的ID和li的ID是一组组对应的。
　　关键是到我们系统中如何来进行运用？得告诉系统要不同的标识才可以显示出这样的效果哦。

　　想了半天，突然想起有个唯一的选择：ClassID！哈哈，只要body的ID标识是这个栏目的ID标识即可。感觉有些小聪明，哈哈.....

　　着手写一下，反正div写起来很快，下面是页面中代码：

以下是引用片段： 〈body id="{$ClassID}"〉 〈div id="bgallbox"〉  〈div id="headbox"〉〈/div〉  〈div id="menu"〉    〈ul〉     〈li id="menuHome"〉〈a href="/template/ShowClass.asp?ClassID=59" title="返回首页"〉首页 home〈/a〉〈/li〉     〈li id="menuTaste"〉〈a href="/template/ShowClass.asp?ClassID=60" title="Web标准主题的经验、技巧、智慧与心得"〉心得 taste〈/a〉〈/li〉     〈li id="menuStudy"〉〈a href="/template/ShowClass.asp?ClassID=61" title="学习资料收集"〉学习 study〈/a〉〈/li〉     〈li id="menuRefer"〉〈a href="/template/ShowClass.asp?ClassID=62" title="速查参考资料、设计及相关知识"〉参考 refer〈/a〉〈/li〉     〈li id="menuPrattle"〉〈a href="/template/ShowClass.asp?ClassID=63" title="就是无事多聊聊啦"〉闲聊 prattle〈/a〉〈/li〉     〈li id="menuSlot"〉〈a href="/template/ShowClass.asp?ClassID=64" title="就是你有，我有，我儿子也有的过程)"〉足迹 slot〈/a〉〈/li〉     〈li id="menuManage"〉〈a href="/template/ShowClass.asp?ClassID=65" title="这个是最缺乏的知识，哈哈"〉管理 manage〈/a〉〈/li〉    〈/ul〉  〈/div〉 〈div〉     ……   〈/body〉

下面是CSS中的相应定义：

以下是引用片段： #headbox { background: url(skin/yahu/title_bk.jpg) no-repeat center top; width: 760px; height: 162px; margin: 0 auto;text-align: center; } /*=======menu 定义开始=======*/ .hidden { display: none; } #menu { background-image: url(skin/yahu/menu_bg.jpg); text-align: center; line-height: 29px; height: 29px; width: 760px; } ul { disply: inline; margin: 0px auto; padding: 0px; width: 700px; } ul li { float: left; padding: 0px; width: 100px; list-style-type: none; text-align: center; } /*****当栏目ID为相应值时，显示背景*****/ body#59 li#menuHome, body#60 li#menuTaste, body#61 li#menuStudy, body#62 li#menuRefer, body#63 li#menuPrattle, body#64 li#menuSlot, body#65 li#menuManage { background-image: url(skin/yahu/menu_1.gif); color: #000; } #menu A { display: block; color: #333; text-decoration: none; } #menu A:hover { background: url(skin/yahu/menu_2.gif) #e6e6e6; }

　　测试成功，归功于"{$ClassID}"这个标签，效果还不错吧，拍拍手掌......

　　不过，在FireFox中测试，却通不过这个效果，查看控制台，提示：

FireFox的Javascript控制台提示信息： 错误： 预期为 ’,’ 或 ’{’ 但却得到 ’#59’。  选择器错误导致忽略规则集。 源文件：/Skin/Skin3.css　行：44 ……

　　这也好解决，既然不认数字，可以在每个ClassID定义前随便加个英文，如：

〈body id="a{$ClassID}"〉 ……  body#a59 li#menuHome,  ……

　　测试通过，FireFox中也一样显示了菜单效果。

　　不过这只是个笨办法，如果是有上百个栏目，不得在后台CSS中写上上百个CSS定义？继续思考一下。与壮志讨论了下，将这个放在后台中的CSS提出来，放在模板页面中应该会更好。这样，如果将“body#59 li#menuHome”中的body#59，放在页面中就可以写成body#{$ClassID} ，系统会解析{$ClassID} 为具体数值，也就会唯一；如果将li#menuHome写成li#{$ClassID} ，则li后面的定义也会解析成唯一数值。

　　设想好象没问题，得再实践一下。

　　首先将后台的那部分定义提出来，直接定义到栏目页模板面中：

以下是引用片段： 〈style type="text/css"〉 〈!-- body#{$ClassID} li#{$ClassID} {  background-image: url(skin/yahu/menu_1.gif); color: #000;  --〉 〈/style〉

　　这样代码更精简了。

　　但是，测试失败，因为系统将{$ClassID}在一个页面中解析成同一个ID，CSS无法继续判断其不同，只会显示出相同的背景，不能象现在这样在当前栏目ID时显示本背景，其他ID下的菜单则不显示此背景。失败呀。