威視視頻管理系統(tǒng)內(nèi)容塊邊框的美化

內(nèi)容區(qū)域和邊欄區(qū)域都是由多個不同內(nèi)容塊（content_box）和邊欄內(nèi)容塊（sidebar_box）來組成的，一個內(nèi)容塊整體上就是一個box；在box中按上中下分為caption（標題）、main（主要）、footer（底部）三部分，如下圖：

因此，我們可以對caption、main、footer分別設置背景圖片來實現(xiàn)各種各樣的邊框效果：*此套模板已經(jīng)集成了這種效果，就是說用戶不需要再更改tpl文件，只需修改themes.css文件即可，以下會有詳細解釋；

下圖是右側(cè)邊欄sidebar_box的分解圖，可以看到分別用了3張圖片來修飾邊框：

以上是美化內(nèi)容塊邊框的原理，下面我們分步驟來講怎樣去實現(xiàn)：

簡單的邊框修改[ ]

大家可以看到，威視默認的內(nèi)容塊邊框是一條1px的細線，代碼如下：

.border{border:1px solid #A9CCEE;}

如果想換一種風格的邊框，只需要簡單改一下以上代碼中紅色部分的顏色值即可，我們來試一下，將網(wǎng)站風格改為黑色系的：

首先改變body的背景色：

body{background:#000;}

改變border的顏色：

.border{border:1px solid #f60;}

改變字體和鏈接的顏色：

a{color:#fff;outline:none;text-decoration:none;}

h3{color:#fff;...}

改好之后，就可以看到以下黑色系效果了：

邊框的深度美化[ ]

素材準備：

這次要準備的圖片素材比較多，因為仔細觀察內(nèi)容塊，有三種：content_box（左側(cè)主要內(nèi)容）、sidebar_box（右側(cè)邊欄內(nèi)容）、f_links（友情鏈接區(qū)）；每個區(qū)域需要caption（標題）、main（主要）、footer（底部）三張圖片，總共是9張圖片，

先在system/template/front/default/media/images目錄下新建border文件夾，然后將上面的文件下載解壓后，放入border目錄下。

增加css代碼：

在themes.css中加入以下代碼：

.content_box{}

        .content_box .caption{background:url(../images/border/con_t.gif);}

        .content_box .main{background:url(../images/border/con_m.gif) repeat-y;}

        .content_box .bottom{background:url(../images/border/con_b.gif);}

.sidebar_box{}

        .sidebar_box .caption{background:url(../images/border/sid_t.gif);}

        .sidebar_box .main{background:url(../images/border/sid_m.gif) repeat-y;}

        .sidebar_box .bottom{background:url(../images/border/sid_b.gif);}

.f_links{}

        .f_links .caption{background:url(../images/border/flink_t.gif);}

        .f_links .main{background:url(../images/border/flink_m.gif) repeat-y;}

        .f_links .bottom{background:url(../images/border/flink_b.gif);}