编辑“威视视频管理系统头部导航的定制”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[威视视频管理系统使用教程|上一页]] | {{template:威视视频导航}}</span>
<div style="clear:both;"></div>

==头部导航结构==

[[Image:Weishi02013.jpg]]

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

[[Image:Weishi02014.jpg]]

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

==一个简单的修改==

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

[[Image:Weishi02015.png]]

首先，将menu的背景色改为深黑色，将第1行中的颜色值改为#333333，改后变成
<pre>
.menu{ background:#333333;  border-top:1px solid #333333; }
</pre>
其次，鼠标在导航上滑动的时候，项目颜色的改变在第3行进行修改，改完即为
<pre>
.menu ul li a:hover{ background:#FF6600;  text-decoration:none; }
</pre>
再次，将选中色改为橘红色，修改第4行的颜色值为#FF6600, 改完即为
<pre>
.menu .hover a,.menu .hover a:hover{ background:#FF6600;  color:#0080b9; }
</pre>
改完这三处之后，头部导航的变成如上图所示的样子。是不是觉得变化很大呢？很简单吧，仅三个地方就完成了全部的修改。大家也可以尝试多种不同的颜色组合；下面让我们再来看一个复杂点的例子。

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







[[category:视频管理系统|W]]
[[Category:PHP程序|W]]
[[category:模板制作|W]]