威視視頻管理系統(tǒng)頭部導航的定制

導航: 上一頁 | 首頁 | 帝國CMS | Drupal | PHPCMS | PHP168 | PHP | Joomla | TWiki | SupeSite | ECShop | DedeCMS |WordPress

頭部導航結(jié)構(gòu)

威視的頭部導航結(jié)構(gòu)由上下兩部分構(gòu)成，如圖所示：上面一部分叫做menu, 下面一部分叫做channelnav，這二者的主要樣式代碼在theme.css里面為： *theme.css的路徑為system/template/front/default/media/css

以上代碼藍色部分為顏色值，簡單來說，只要更改以上代碼中的藍色部分，即可改變頭部的大體風格，下面我們來做個實例；

一個簡單的修改

下圖是對頭部導航的一個簡單的修改，整體風格上由明快變?yōu)榉€(wěn)重，色調(diào)也由藍白變?yōu)楹诳?。大家可以根?jù)一下幾個簡單的步驟，來了解頭部導航的修改是多么的容易；

首先，將menu的背景色改為深黑色，將第1行中的顏色值改為#333333，改后變成

.menu{ background:#333333;  border-top:1px solid #333333; }

其次，鼠標在導航上滑動的時候，項目顏色的改變在第3行進行修改，改完即為

.menu ul li a:hover{ background:#FF6600;  text-decoration:none; }

再次，將選中色改為橘紅色，修改第4行的顏色值為#FF6600, 改完即為

.menu .hover a,.menu .hover a:hover{ background:#FF6600;  color:#0080b9; }

改完這三處之后，頭部導航的變成如上圖所示的樣子。是不是覺得變化很大呢？很簡單吧，僅三個地方就完成了全部的修改。大家也可以嘗試多種不同的顏色組合；下面讓我們再來看一個復雜點的例子。

Pocle2.6導航的模仿

Pocle2.6是威視的前身，它的默認模板也是眾多站長非常喜歡的一款。由于種種原因，威視現(xiàn)有版本中，官方已經(jīng)不在同步升級該模板了，這也使得很多站長有些失望。不過沒關(guān)系，在現(xiàn)有的css樣式下能很快的實現(xiàn)Pocle2.6的導航樣式。官方不支持了，咱們來DIY一個山寨版的豈不是也很有趣 .