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

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

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

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

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

簡(jiǎn)單的邊框修改[ ]

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

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

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

首先改變body的背景色：

body{background:#000;}

改變border的顏色：

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

改變字體和鏈接的顏色：

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

h3{color:#fff;...}

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

邊框的深度美化[ ]

素材準(zhǔn)備：

這次要準(zhǔn)備的圖片素材比較多，因?yàn)樽屑?xì)觀察內(nèi)容塊，有三種：content_box（左側(cè)主要內(nèi)容）、sidebar_box（右側(cè)邊欄內(nèi)容）、f_links（友情鏈接區(qū)）；每個(gè)區(qū)域需要caption（標(biāo)題）、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);}

樣式微調(diào)：

將原來(lái)邊框的那條1px細(xì)線去掉，即修改代碼：.border{border:0px solid #A9CCEE;}或者干脆刪掉此行代碼都可以；

OK，刷新一下，看看頁(yè)面是不是變了呢

現(xiàn)在我們可以知道了，以后要想再更換其他邊框的效果，只需做幾張邊框的圖片往border文件夾里一放，就是一種風(fēng)格了，是不是很方便？下面給出這些圖片的尺寸大小，僅供參考：

綜上所述，大家只用準(zhǔn)備好素材，做好圖片，不用去管tpl，簡(jiǎn)單的把圖片往border文件夾里替換，就可以實(shí)現(xiàn)多種多樣的邊框效果了，再配合前三篇的教程，做好風(fēng)格統(tǒng)一的頭部，視頻截圖，內(nèi)容邊框，以及調(diào)整好背景顏色和文字顏色

久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

WIKI使用導(dǎo)航

站長(zhǎng)百科導(dǎo)航

站長(zhǎng)專題

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

簡(jiǎn)單的邊框修改[ ]

邊框的深度美化[ ]