|
在前面的三篇系列文章中，我對九宮格布局作了詳細(xì)的介紹。先從一個基本布局入手，將在制作過程中遇到的問題逐一進(jìn)行了講解。這三篇文章都是基本原理的講解，沒有一個有力的應(yīng)用案例來證明這種原理是否正確，可能有些朋友已經(jīng)有點急不可煩，也有網(wǎng)友要求我能提供案例。因此，在這一篇文章中，我將介紹一個九宮格案例—極酷的播放器。
在我的第三篇文章《三層分離的完美九宮格》中，我介紹了用JS封裝html標(biāo)簽，以便于減少冗余的結(jié)構(gòu)體，但這種方式也是有缺陷的，如果用戶禁用了JS，將造成結(jié)構(gòu)完全顯示不出來，當(dāng)然對于當(dāng)今的上網(wǎng)條件來說，這應(yīng)該不是一個大問題，但縱觀國外的的一些網(wǎng)頁設(shè)計，都是有這種考慮的必要的。這就需要優(yōu)雅降級和功能弱化，但這樣帶來的結(jié)果和不應(yīng)用JS封裝是一樣的。所以，魚和熊掌不可兼得也。哎，這些都是題外話，還是來看看我們的一個極酷播放器是如何設(shè)計出來的吧！
先入為主，大家都想先看看結(jié)果，好，先秀出截圖：
圖一
一般對于這樣一個有豐富色彩的播放器來說，都是要求其寬高值是可以動態(tài)調(diào)整，因此這樣的圖形用九宮格來做是非常適合的選擇。
當(dāng)然原理我也不再重述了，請參考我的系列文章中的《牢不可破的九宮格布局》，這個應(yīng)用案例就是針對它來實現(xiàn)的。當(dāng)然在制作中還是有些技巧可以幫我們更好地的完成任務(wù)。比如css sprites技術(shù)（可以查看我的另一篇文章《css sprites圖片背景優(yōu)化技術(shù)》），它能有利地減少圖片的請求數(shù)，一般對于九宮格布局的應(yīng)用來講，其圖片是比較多的，因為它至少需要八張圖片分別來裝飾四個角落和四條邊。所以怎樣減少圖片數(shù)量，對于設(shè)計人員來說是一件不得不考慮的事情。
在本例中我將四角的圖片合并成了一張圖片，它們看起應(yīng)該就是下面這個樣子：
圖二
在上圖中我為了讓大家看得仔細(xì)一點，幾張圖片的交界處用輔助線畫了出來，我們應(yīng)用圖片定位原理將它們分別固定在四個角落上。它們在樣式表中是如下方式來定義的：
.t_l{ background:url(../image/round.gif) no-repeat left top;}
/*左上角*/
.t_r{background:url(../image/round.gif) no-repeat right top;}
/*右上角*/
.b_l{background:url(../image/round.gif) no-repeat left bottom;}
/*左下角*/
.b_r{ background:url(../image/round.gif) no-repeat right bottom;}
/*右下角*/
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 九宮格應(yīng)用案例:極酷網(wǎng)頁播放器 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 九宮格應(yīng)用案例:極酷網(wǎng)頁播放器 [1]
第 2 頁 
