威視視頻管理系統(tǒng)如何修改視頻截圖樣式

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

視頻截圖，即為頁面中可以看到的視頻縮略圖，可以大致分為三種：左側(cè)大圖、右側(cè)小圖、專輯圖片 如下圖：

對比一下，大家可以看到，每個(gè)網(wǎng)站也都有自己不同的截圖樣式：

可以看到，這些截圖有的簡單，有的復(fù)雜，甚至有的是在截圖上又添加了一些小的功能；在此因?yàn)槌绦蛳拗疲貓D上的一些暫時(shí)無法實(shí)現(xiàn)的功能就不再敘述了，本篇重點(diǎn)在于對截圖樣式，截圖比例的修改；

截圖比例的修改

截圖的寬高比列基本上有兩種：16:10 和 4:3 ；在themes.css文件中，有截圖樣式的一段css代碼：

/*--------------視頻截圖格式--------------*/
.pic,.pic img,.pics,.pics img{height:75px;}
.pic_r{height:56px;}

.pic{border:1px solid #d8d8d8;display:block;width:120px; margin-bottom:5px;padding:4px;overflow:hidden;}
.pic:hover{border:1px solid #999;}
.pic img{display:block;width:120px;overflow:hidden;}
.pics{background:url(../images/spl_bg.gif) right 0 no-repeat;display:block;width:120px;margin-bottom:5px;padding:6px 6px 0 0;}
.pics img{width:120px;}
.pic_r{border:1px solid #ccc;display:block;float:left;width:90px;margin:0 5px 5px 0;overflow:hidden;}
.pic_r img{display:block;width:90px;overflow:hidden;}

其中，pic為左側(cè)大圖的樣式，pics為專輯圖片的樣式，pic_r為右側(cè)小圖的樣式；默認(rèn)的比例為16:10 ；

下面，想改截圖比列為4:3，請修改兩個(gè)數(shù)值：

.pic,.pic img,.pics,.pics img{height:90px;}
.pic_r{height:68px;}

然后回首頁，刷新看一下，是不是變了呢； 但是，專輯的背景圖還是原來的，下步還需要更換一下專輯的背景圖

spl_bg.gif

將這張圖片下載后，放入system/template/front/default/media/images/目錄下替換原文件即可； *注意備份原來的那張圖片 效果見下圖：

截圖邊框的美化

試看一些其他視頻網(wǎng)站，視頻截圖的邊框多種多樣，基本上分為三類：

• 沒有邊框；

這個(gè)最簡單，更改為以下代碼即可：

.pic{border:0px solid #ccc;......padding:0px;......}

同樣也可以直接把border:0px solid #ccc;和padding:0px;這兩句刪掉，精簡代碼；

• 1px的細(xì)線做邊框，并帶有鼠標(biāo)經(jīng)過變色的樣式；

我們現(xiàn)在的默認(rèn)模板，默認(rèn)的就是這種樣式，如果想換換顏色，只須修改顏色值即可：

.pic{border:1px solid #d8d8d8;display:block;width:120px; margin-bottom:5px;padding:4px;overflow:hidden;}
.pic:hover{border:1px solid #999;} /*鼠標(biāo)經(jīng)過時(shí)邊框的顏色*/

• 用圖片做背景的截圖邊框效果

這種情況，首先請準(zhǔn)備一張合適的背景圖，本例的圖片：

pic_bg.gif

載之后，放入system/template/front/default/media/images/文件夾內(nèi)，然后替換以下代碼：

.pic{background:url(../images/pic_bg.gif) -3px 0 no-repeat;display:block;width:147px;
 height:86px; margin-bottom:5px;padding:13px 0 0 13px;overflow:hidden;}

然后刪除這句樣式：.pic:hover{border:1px solid #999;} 即可； 但是，因?yàn)檫@張背景圖是向兩邊淡出的，故視頻截圖向內(nèi)縮進(jìn)了一些，那么要使截圖下面的文字也往右縮進(jìn)一些，使其和圖片對齊，再往css中加入這句代碼即可：

.t_box dd,.t_box dt a{ padding-left:10px;}

看一下整體效果：