定义CSS修改网站导航处显示效果_动易Cms教程

　　有时，我们想改变一下动易系统中频道行的显示效果，将那个“|”线改成其他样式，如下图效果：

　　背景这属于一种更换频道文字后面背景的效果。一般可以定义表格背景进行重复显示来达到自己要的效果。但是，表格背景重复只能用于相同字数（或宽度）的频道名，假如频道名有长有短，如何来实现类似于上面图片的效果呢？
　　本文主要讲了运用定义CSS伪类a的背景方法，对动易系统实现上述所需的效果。

操作步骤：

　　1、修改Gb2312.xml，将<ChannelLink><![CDATA[&nbsp;|&nbsp;]]></ChannelLink>这里的|删除，至于&nbsp;这个空格要不要删除随意，可删可不删。
　　2、在CSS中加上以下定义：
　　a.channel {background: url(Skin/aaaaa.jpg) no-repeat left top;}
　　a.channel2 {background: url(Skin/aaaaa.jpg) no-repeat left top;}

原理：
　　因为默认频道文字的链接是使用的<a class='Channel2' 和<a class='Channel'二个样式，在样式定义中对a.channel 和a.channel2 这二个样式定义上背景（固定在左侧显示），即可达到你要的效果。因为是CSS样式控制图片路径，所以就不会涉及到路径不同的问题。

　　假如对a.channel2（当前频道）a.channel（非当前频道）这里要显示的背景图片是同一个，则可以简写成：
　　a.channel,a.channel2 {background: url(Skin/aaaaa.jpg) no-repeat left top;}
　　这里分开定义，是因为可以使用不同的图片来显示和区分当前频道和非当前频道的显示样式，如当前频道是一张亮光底图，非当前频道是现在的那个小图片。

另外说明：
　　至所以说“至于&nbsp;这个空格要不要删除随意”，是因为二个频道名间的空距，是可以通过对这二个CSS样式定义去控制的，如：
　　a.channel,a.channel2 {background: url(Skin/aaaaa.jpg) no-repeat left top;padding-left:10px;margin-left:10px;}
　　并且这样定义a背景的方式比在语言包中修改的好处是，在最后一个频道名的后面不显示图片，而在语言包中定义则都不会如此。
　　此外，若对a.channel:hover、a.channel2:hover等定义也加上不同的背景定义，则可以制作出更丰富的效果，具体可以进一步拓展尝试一下。

效果示例：