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

来自站长百科
跳转至: 导航、​ 搜索

导航: 上一页 | 首页 | 帝国CMS | Drupal | PHPCMS | PHP168 | PHP | Joomla | TWiki | SupeSite | ECShop | DedeCMS |WordPress

头部导航结构[ ]

Weishi02013.jpg

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

Weishi02014.jpg

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

一个简单的修改[ ]

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

Weishi02015.png

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