定義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等定義也加上不同的背景定義，則可以制作出更豐富的效果，具體可以進一步拓展嘗試一下。

效果示例：