威视视频管理系统头部导航的定制

头部导航结构[ ]

威视的头部导航结构由上下两部分构成，如图所示：上面一部分叫做menu, 下面一部分叫做channelnav，这二者的主要样式代码在theme.css里面为： *theme.css的路径为system/template/front/default/media/css

以上代码蓝色部分为颜色值，简单来说，只要更改以上代码中的蓝色部分，即可改变头部的大体风格，下面我们来做个实例；

下图是对头部导航的一个简单的修改，整体风格上由明快变为稳重，色调也由蓝白变为黑酷。大家可以根据一下几个简单的步骤，来了解头部导航的修改是多么的容易；

首先，将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是威视的前身，它的默认模板也是众多站长非常喜欢的一款。由于种种原因，威视现有版本中，官方已经不在同步升级该模板了，这也使得很多站长有些失望。不过没关系，在现有的css样式下能很快的实现Pocle2.6的导航样式。官方不支持了，咱们来DIY一个山寨版的岂不是也很有趣 .